reactjs - 在 apollo 客户端中使用缓存

Question

我尝试从 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": [
    {…},
    {…},
    {…},
    {…}
  ]
}.

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

Answer 1

此代码段显示它正在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 在缓存中找到它，如下所示（改编您的第一个片段）：

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

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