如何解决防止Apollo客户端在更新缓存后自动重新获取查询
我有一个使用钩子的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挂钩提供了更新功能,并更新了缓存。但是,一旦更新了缓存,阿波罗客户端就会重新获取仪表板查询。这是我的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,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",
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。