使用reactJS和GraphQL进行实时数据获取的最佳实践

问题描述

我正在使用对graphQL的反应，作为数据库我正在使用Postgresql。

所以我在主屏幕上有一个记录列表，我想在数据库中有新记录时更改它。我的数据库可以从不同的UI更新。因此，在数据库记录发生更改时不重新加载FE的最佳实践是什么。

作为连接器，我使用NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 8d Nginx LoadBalancer 10.101.179.72 192.168.143.230 80:32190/TCP 22s 来获取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中获取最新数据吗？

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

解决方法

尝试React-Query，它还可以与REST API和Graphql一起使用。您可以对数据库进行突变，并使先前提取的数据无效，以从后端获取更新的数据。此过程称为使陈旧数据无效。

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

是这样的，一旦您执行了FUnction addTodo 即可使数据库发生变异，成功执行后，React查询将使先前从数据库中提取的待办事项和提醒无效，并从数据库中重新获取它们。 db在后台。

这里是文档的Link。