如何强制 Apollo Client 将缓存数据用于详细视图页面

Question

我有一个基于分页游标的查询 TODOS 和带有查询 TODO 的详细信息页面以按 ID 获取数据。每当我转到详细视图并将 useQuery 与 TODO 查询一起使用时（其中包含与 TODOS 完全相同的数据查询结果，它仍然尝试从服务器而不是从缓存中获取数据。我怎样才能实现不从服务器获取数据（因为它已经存在），我认为 Apollo 通过 id 和 return 从缓存中检测但是没有。有什么建议吗？

与此没有类似的问题，但我认为这不是正确的方法，应该有更好的解决方案。（我希望）

这是TODOS查询：

query TODOS(
  $paginationOptions: PaginationOptionsInput
) {
  todos(paginationOptions: $paginationOptions) {
    pagination {
      minCursor
      maxCursor
      sortOrder
      limit
      hasMoreResults
    }
    result {
     id
     ...SomeTodoFields
  }
}

在详细信息页面上我有第二个查询 TODO

query (
  $todoId: String!
) {
  todo(todoId: $todoId) {
    id
    ...SomeTodoFields
  } 
}

Answer 1

因为我使用 Apollo-client < 3.0 cacheRedirect 工作正常，你可以看得更远 here。仔细阅读每一个注意事项真的很重要！我的代码示例：

cache: new InMemoryCache({
    fragmentMatcher,
    cacheRedirects: {
      Query: {
        todo: (_, args, { getCacheKey }) => {
          return getCacheKey({ __typename: 'TodoType', id: args.todoId })
        }
      }
    }

  })
})

也找到了一些很好的相关内容 article，您可能想检查一下。这对我有用，希望对其他人也有帮助。 :)

如何强制 Apollo Client 将缓存数据用于详细视图页面

How to force Apollo Client to use cached data for detail view page

apollo

reactjs

react-apollo

apollo-client