尝试使用 Apollo 查询重新获取数据答案

【问题标题】：Trying to refetch the data using Apollo query尝试使用 Apollo 查询重新获取数据
【发布时间】：2021-04-29 18:34:38
【问题描述】：

我正在尝试在某个操作完成后重新获取数据，但重新获取失败并且页面没有刷新数据。

下面是突变和获取查询的代码：

const {
    data: designHubProjectData,
    loading: designHubProjectDataLoading,
    error: designHubProjectDataError
  } = useQuery(ALL_DESIGNHUB_PROJECTS, {
    fetchPolicy: 'network-only',
    variables: {
      order: [{ projectNumber: 'DESC' }]
    }
  });

  const [insertEmployeeDesignHubProjectBookmarkMutation] = useMutation(
    INSERT_EMPLOYEE_DESIGNHUB_PROJECT_BOOKMARK,
    {
      refetchQueries: [     // here i am calling two queries after insert
        {
          query: EMPLOYEE_DESIGNHUB_PROJECT_BOOKMARK,
          variables: {
            order: [{ projectNumber: 'DESC' }]
          }
        },
        {
          query: ALL_DESIGNHUB_PROJECTS,
          fetchPolicy: 'network-only',
          variables: {
            order: [{ projectNumber: 'DESC' }]
          }
        }
      ]
    }
  );

然后下面是我在突变上方调用的方法

  const handleAddBookmark = record => {
    insertEmployeeDesignHubProjectBookmarkMutation({
      variables: {
        employeeId: loggedInEmployee.id,
        projectNumber: record.projectNumber
      }
    }).then(({ data }) => {
      if (data.insertEmployeeDesignHubProjectBookmark.ok) {
        notification.success({
          message: 'Success',
          description: 'Successfully bookmarked the project.'
        });
      } else {
        const errors = data.insertEmployeeDesignHubProjectBookmark.errors.join(', ');
        notification.error({
          message: 'Error',
          description: `Adding bookmark to the project failed: ${errors}.`
        });
      }
    });
  };

我不确定上面的代码在哪里做错了。任何人都可以让我知道如何重新获取使其工作的任何建议或想法，非常感谢提前

【问题讨论】：

不工作？没有网络请求？没有视图更新？ awaitRefetchQueries: true?
是的，页面没有刷新，我可以看到那些网络请求
awaitRefetchQueries: true 似乎无法正常工作，页面仍未刷新
请求完成然后没有重新获取问题...重新渲染取决于相关组件的其余/整个代码（效果/渲染部分）

标签： javascript reactjs graphql apollo-client react-apollo

【解决方案1】：

我已经通过将refetch 分配给Oncompleted 方法解决了这个问题，如下所示，

  const {
    data: designHubProjectBookmarkData,
    loading: designHubProjectBookmarkDataLoading,
    error: designHubProjectBookmarkDataError,
    refetch: refetchBookmarkProjects
  } = useQuery(EMPLOYEE_DESIGNHUB_PROJECT_BOOKMARK, {
    fetchPolicy: 'network-only',
    variables: {
      order: { projectNumber: 'DESC' }
    }
  });


const [insertEmployeeDesignHubProjectBookmarkMutation] = useMutation(
    INSERT_EMPLOYEE_DESIGNHUB_PROJECT_BOOKMARK,
    {
      onCompleted: refetchBookmarkProjects
    }
   );

如果将来有人会寻找相同的东西，这就是一个例子。

【讨论】：