在Apollo Client的缓存中使用接口和联合体（警告：启用启发式片段匹配！）

Apollo Client的缓存功能非常方便，可以直接使用而无需进行特殊配置。但是，在使用Union或Interface时，需要一些技巧，请允许我介绍一下。

请问有什么疑问？

当使用Apollo Client处理包含Union或Interface的查询时，会出现以下警告提示。

这是Apollo Client中用于缓存机制的Fragment Matcher，默认情况下不能处理Interface或Union，因此会出现警告。

为了解决这个问题，需要在服务器上准备支持定义的模式的碎片匹配器。

解决方案

要进行Fragment Matcher的设置，首先需要使用一个名为GraphQL Code Generator的工具。

需要安装 @graphql-codegen/cli 和 @graphql-codegen/fragment-matcher。

 yarn add -D @graphql-codegen/cli @graphql-codegen/fragment-matcher

接下来，我们需要准备GraphQL Code Generator的配置文件。

# codegen.yml
schema: [YOUR_API]
overwrite: true
generates:
  ./fragmentTypes.json:
    plugins:
      - fragment-matcher

在这种设置中，schema选项可能包含GraphQL服务器的端点或包含模式信息的JSON文件。

设置完成后，请执行以下命令。

$ yarn run gql-gen
#or
$ npm run gql-gen

执行完后会生成一个名为fragmentTypes.json的文件。

这是自动生成的GraphQL模式信息——即自省结果。

比如说

union Animal
    = Dog | Cat | Bear

假设有类似的架构定义，那么fragmentTypes.json应该输出如下内容。

{
  "__schema": {
    "types": [
      {
        "kind": "UNION",
        "name": "Animal",
        "possibleTypes": [
          {
            "name": "Dog"
          },
          {
            "name": "Cat"
          },
          {
            "name": "Bear"
          }
        ]
      }
    ]
  }
}

通过在创建Apollo Client实例时加载生成的fragmentTypes.json，可以解决警告。

import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import introspectionQueryResultData from '../fragmentTypes.json'

// IntrospectionFragmentMatcher
const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData
})
// InMemoryCache
const cache = new InMemoryCache({ fragmentMatcher })

const apolloClient = new ApolloClient({
  cache,
  ...省略
})

最后

这次我们使用了GraphQL Code Generator来输出Introspection结果，但也可以手动编写脚本并通过服务器响应来输出。请参考文档尝试一下。

文件：使用碎片