reactjs - 防止 apollo 客户端在更新缓存后自动重新获取查询

Question

我有一个使用钩子的带有 apollo 客户端的 React 应用程序。我有一个仪表板页面，其中包含以下查询

dashboard(uniquePageId: $id) {
      id
      tasks(filterData: $taskFilter) {
        taskId
        taskName
        taskTagLine
        taskStatus
        taskImagePath
      }
    }
  }

使用具有以下配置的 useLazyQuery 挂钩获取数据：

  const [
    taskFilterQuery,
    { error: taskFetchError, loading: taskFetchLoading },
  ] = useLazyQuery<TaskSummaryResponse, DashboardQueryVariables>(
    UPDATE_TASKS_DATA,
    {
      errorPolicy: "all",
      fetchPolicy: "cache-and-network",
    }
  );

每当应用过滤器时，我都会像这样调用函数

const handleTaskFilterChange = useCallback(
    function (filterData: TasksSummaryFilter) {
      taskFilterQuery({
        variables: {
          taskFilter: filterData,
          id: PAGE_ID,
        },
      });
    },
    [taskFilterQuery]
  );

我有另一个视图可以让用户更新任务的状态。更新完成后，我想更新列表并从当前查看的列表中删除状态已更新的任务。所以我为 useMutation 钩子提供了一个更新函数并更新了缓存。但是一旦缓存更新，apollo 客户端就会重新获取仪表板查询。这是我的update cache代码

try {
    const tasksSummary = cache.readFragment<TaskSummaryFragment>({
      fragment: TASKS_DATA,
      id: cache.identify({ __typename: DASHBOARD_DATA, id: queryVariables.id }),
      variables: {
        taskFilter: queryVariables.taskFilter,
      },
    });

    if (!tasksSummary) {
      return;
    }

    const updatedTasks = tasksSummary.tasks.filter(
      ({ taskId }) => taskIdToCheck !== taskId
    );

    cache.writeFragment<TaskSummaryFragment>({
      fragment: TASKS_DATA,
      id: cache.identify({ __typename: DASHBOARD_DATA, id: queryVariables.id }),
      variables: {
        taskFilter: queryVariables.taskFilter,
      },
      data: {
        tasks: updatedTasks,
      },
      broadcast: false,
    });
  } catch (cacheUpdateError) {
    console.error("Updating task cache failed", cacheUpdateError);
  }

一旦缓存更新完成，任务查询将自动重新获取。这会导致不必要的网络往返。如果我注释掉这段代码，那么突变后不会重新获取查询。有什么办法可以阻止阿波罗这样做吗？

项目版本

  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "@apollo/client": "^3.1.3",

标签： reactjsapolloapollo-client