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 之间的链接丢失并且从未调用 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();
}, []);

反应：Appsync 订阅在 useEffect 中不起作用

1 个答案: