如何将 Apollo 的 cacheRedirect 与嵌套查询一起使用答案

【问题标题】：How can I use Apollo's cacheRedirect with a nested query如何将 Apollo 的 cacheRedirect 与嵌套查询一起使用
【发布时间】：2020-08-08 06:22:15
【问题描述】：

我有一个如下所示的查询：

export const GET_PROJECT = gql`
  query GetProject($id: String!) {
    homework {
      getProject(id: $id) {
        ...ProjectFields
      }
    }
  }
  ${ProjectFieldsFragment}
`;

我的InMemoryCache 看起来像这样：

const cache = new InMemoryCache({
  dataIdFromObject: ({ id }) => id,
  cacheRedirects: {
    Query: {
      getProject: (_, args, obj) => {
        console.log('Hello world');
      },
    },
  }
});

上述缓存重定向永远不会命中。但是，如果我将其修改为：

const cache = new InMemoryCache({
  dataIdFromObject: ({ id }) => id,
  cacheRedirects: {
    Query: {
      homework: (_, args, obj) => {
        console.log('Hello world');
      },
    },
  }
});

它确实受到了打击，但是我没有任何在嵌套的 getProject 查询中传递的参数。同样令人困惑的是，这个缓存重定向功能会针对看起来不应该被命中的查询命中，例如：

export const SESSION = gql`
  query Session {
    session {
      user {
        id
        fullName
        email
      }
      organizations {
        name
        id
      }
    }
  }
`;

那么发生了什么？我只在希望缓存重定向的地方使用了readFragment，但我希望该逻辑变得集中。

【问题讨论】：

标签： caching react-apollo

【解决方案1】：

对于这类问题很难确定，但我敢打赌，既然你这么说

同样令人困惑的是，这个缓存重定向函数会针对看起来不应该被命中的查询来命中

问题可能出在您的 dataIdFromObject 函数上。
这个函数最终决定是否从缓存中读取数据。如果你有一个非常具体的理由，你应该只覆盖它。例如：

import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory';

// ...

export default new ApolloClient({
    link,
    cache: new InMemoryCache({
        dataIdFromObject(object) {
            switch (object.__typename) {
                case 'ModifierScale':
                case 'ModifierGroup':
                    return [
                        object.__typename,
                        object.id,
                        ...object.defaults
                            .map((defaultModifier) => defaultModifier.id)
                            .join(''),
                    ].join('');
                default:
                    return defaultDataIdFromObject(object); // fall back to default handling
            }
        },
    }),
});

此设置的目的是允许您自定义在加载数据时放入缓存的key。

如果这不能解决您的问题，我肯定会进入 chrome 开发工具中的 Apollo 选项卡（您需要 Apollo 开发工具 chrome 扩展来执行此操作）并查看缓存部分。它应该向您显示缓存中的数据以及存储数据的键。

【讨论】：