使用 reactJS 和 GraphQL 获取实时数据的最佳实践 [关闭]

Question

我正在使用与 graphQL 的反应，而作为数据库，我使用 PostgreSQL。

所以我的主屏幕上有一个记录列表，我想在我的数据库中有新记录时更改它。我的数据库可以从不同的 UI 更新。那么每当我的数据库记录发生变化时，在不重新加载的情况下更新我的 FE 的最佳做法是什么。

作为一名加入者，我使用 react-apollo-hooks 来获取 graphQL 数据。

我尝试了什么：

• 网络套接字

参考链接：

• https://scotch.io/tutorials/realtime-graphql-ui-updates-in-react-with-apollo
• https://www.smashingmagazine.com/2018/12/real-time-app-graphql-subscriptions-postgres/

还有其他更好的方法从 BE 获取最新数据吗？

编辑：我知道有很多方法可以实现这一点，但我想知道最好的方法。就像按照行业标准的方式一样。

Answer 1

试试 React-Query，它也适用于 REST API 和 Graphql。您可以对数据库进行突变并使先前提取的数据无效以从后端获取更新的数据。此过程称为使过时数据无效。

const [mutate] = useMutation(addTodo, {
   onSuccess: () => {
     queryCache.invalidateQueries('todos')
     queryCache.invalidateQueries('reminders')
   },
 })

就像这样，一旦你执行了改变数据库的 FUnction addTodo，在成功执行时，React 查询将使之前从数据库中提取的待办事项和提醒无效，并从db 在后台。

这是文档的Link。