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

Question

I am trying to refetch the data after an action is done but i am failing at refetching and the page is not refreshing with the data.

Below is the code for mutation and fetch queries:

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' }]
          }
        }
      ]
    }
  );

and then below is the method where i am calling above mutation

  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}.`
        });
      }
    });
  };

i am not sure where I am doing wrong with the above code. Could any one please let me know any suggestion or ideas how to refetch make it work, many thanks in advance

Answer 1

I have solved this problem by assigning refetch to Oncompleted method like as below,

  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
    }
   );

if it incase anyone in the future looking for the same, this is an example.