React：Appsync 订阅在 useEffect 中不起作用

Question

我正在使用 React 和 aws-appsync 编写一个新应用程序，但我无法按我想要的方式进行订阅。

我写了一个视图，由路由器调用。这是一个使用状态来存储信息的功能。为了从我的 api 中获取数据，我将代码写入函数中，由 useEffect 挂钩调用，以便它们只执行一次。这部分我还可以。

我需要订阅 appsync API，我尝试以不同的方式订阅但没有成功：

当我直接从函数中调用它时，代码被调用了 10,000 次。所以我尝试使用钩子：

   async function subscribe() {
  API.graphql(
      graphqlOperation(onAddRunLab, { client_id: userid, lab_id: labid })
  ).subscribe({
      next: ({ provider, value }) => updateInfo(value.data.onAddRunLab),
      error: error => console.warn(error)
  });
  
useEffect(() => {
  // Create an scoped async function in the hook
  async function anyNameFunction() {
    await subscribe();
  anyNameFunction();
}, []);

但是，它不能使用挂钩。我认为订阅已完成，但在那之后 rect 和 API 之间的 link 丢失并且 updateInfo 函数从未被调用。

你有什么想法吗？

Answer 1

您无需将订阅设置为异步函数，而是执行以下操作并确保取消订阅。

useEffect(() => {
  const subscription = API.graphql(
    graphqlOperation(onAddRunLab, { client_id: userid, lab_id: labid })
  ).subscribe({
    next: ({ provider, value }) => updateInfo(value.data.onAddRunLab),
    error: (error) => console.warn(error),
  });
  return () => subscription.unsubscribe();
}, []);

React：Appsync 订阅在 useEffect 中不起作用

React : Appsync subscription doesn't work in useEffect

reactjs

graphql

subscription

aws-appsync