在 apollo 客户端中使用缓存答案

【问题标题】：Use cache in apollo client在 apollo 客户端中使用缓存
【发布时间】：2020-08-07 21:53:36
【问题描述】：

我尝试从 apollo 缓存中读取数据（React + Apollo Client 2.6）。

我的代码：

try {
    const {users} = client.readQuery({
        query: GetUsersForView
    });

    console.log(users);
}
catch(e) {
    console.log('Query is not in cache:', e);
}

我的查询：

query GetUsersForView($search : String, $country_id : [ID]) {
    users (
        filters : {
            search: $search
            country: $country_id
        }) {
        ...BasicData
        country {
            ...BasicData
        }
    }
}

控制台中的结果：

Query is not in cache: Invariant Violation: Can't find field users({"filters":{}}) on object {
  "authenticatedUser": {…},
  "userSettings": {…},
  "users({\"filters\":{\"country\":[],\"search\":\"\"}})": [
    {…},
    {…},
    {…}
  ],
  "countries": [
    {…},
    {…},
    {…},
    {…}
  ]
}.

我做错了什么？查询结果在缓存中，为什么我检索不到数据？

【问题讨论】：

标签： reactjs apollo-client apollo-cache-inmemory

【解决方案1】：

这个 sn-p 表明它正在缓存中寻找users({"filters":{}})：

Query is not in cache: Invariant Violation: Can't find field users({"filters":{}}) on object {
  "authenticatedUser": {…},
  "userSettings": {…},
  "users({\"filters\":{\"country\":[],\"search\":\"\"}})": [
    {…},
    {…},
    {…}
  ],
  "countries": [
    {…},
    {…},
    {…},
    {…}
  ]
}.

但您可以在下面看到 4 行，您的缓存改为包含键 users({\"filters\":{\"country\":[],\"search\":\"\"}})

您的示例中似乎没有将变量传递给查询。以前在您的应用程序中的某个地方，它们已通过使用以下变量调用查询进行查询并存储在您的缓存中：

{
   country: [],
   search: ""
}

因此，您必须再次传递这些以允许 apollo 在缓存中找到它，就像这样（适应您的第一个 sn-p）：

try {
    const {users} = client.readQuery({
        query: GetUsersForView,
         variables: {
           country: [],
           search: ":
         },
    });

    console.log(users);
}
catch(e) {
    console.log('Query is not in cache:', e);
}

【讨论】：