Apollo+GraphQL - 启发式片段手动匹配

Question

我有一个无头 Craft CMS，它通过 Apollo 通过 GraphQL 端点将数据返回到我的 Nuxtjs 应用程序。我有一个可以返回三种不同块类型之一的字段：richText、image 和 pullQuote。

我的 GraphQL 端点如下所示：

query($section:[String], $slug:[String]) {
    entries(section: $section, slug: $slug) {
        id,
        title,
        uri,
        ... on blog_blog_Entry{
            contentEngine{
                __typename,
                ...on contentEngine_richText_BlockType{
                    __typename,
                    id,
                    richText
                    fontColor,
                    backgroundColor
                }
                ...on contentEngine_image_BlockType{
                    __typename,
                    id,
                    backgroundColor,
                    imageWidth,
                    image {
                        id,
                        url
                    }
                }
                ...on contentEngine_pullQuote_BlockType{
                    __typename,
                    id,
                    backgroundColor,
                    fontColor,
                    quote
                }
            }
        }
    }
}

It returns data just fine，但在我的 Nuxt 组件中尝试使用它时出现此错误：

您正在使用简单（启发式）片段匹配器，但您的查询包含联合或接口类型。 Apollo Client 将无法准确映射片段。要消除此错误，请使用文档中所述的IntrospectionFragmentMatcher：https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher

令人气愤的是，这个文档导致了 404。我发现了一些 other GitHub tickets 引用了这个链接，所以我不确定我应该遵循什么步骤。

我想我需要做的就是教 Apollo 的内存缓存。由于我的回复没有那么复杂，我想我可以用Defining PossibleTypes manually 逃脱。

我尝试了以下方法，但我认为我不了解如何正确设置：

const cache = new InMemoryCache({
    possibleTypes: {
        contentEngine: [
            "contentEngine_richText_BlockType", 
            "contentEngine_pullQuote_BlockType", 
            "contentEngine_image_BlockType"
        ],
    },
});

解决这个问题的任何帮助都会是一个巨大的帮助。

警告：启发式片段匹配正在进行中！

Answer 1

我自己也为此苦苦挣扎，但在@mylesthe.dev（上面的回复）直接与我交谈以提供出色的支持和一些示例之后，我想通了。因此，对于仍然像我一样挣扎的其他人，这里的代码（感谢他的工作）最终让事情对我有用：

首先，在你的 nuxt.config.js 中设置你的 apollo 配置：

// Apollo config and endpoint for graph ql
apollo: {
  includeNodeModules: true,
  clientConfigs: {
    default: '@/apollo/client-configs/default.js' // This is where you'll set up the client and import the possible fragment types
  }
},

现在我们在apollo/client-configs/default.js 中使用片段模式文件（我们将创建）创建 apollo 客户端

import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import schema from './schema.json';
const fragmentMatcher = new IntrospectionFragmentMatcher({
    introspectionQueryResultData: schema
  })

export default ({req, app}) => {
    const token = process.env.GRAPHQL_TOKEN
    return {
        httpEndpoint: process.env.API_ENDPOINT,
        getAuth: () => `Bearer ${token}`, // remove if you're using the public schema
        cache: new InMemoryCache({ fragmentMatcher }),
    }
}

现在在apollo/client-configs/ 中保存一个空的schema.json 文件。

接下来，我们需要设置脚本以在nuxtServerInit 上查询和生成此架构。您需要fs 来编写您的架构文件。您可以使用 NPM 安装它：npm install --save fs。

安装后，返回到您的 nuxt.config 并将 fs 添加到构建中：

build: {
  extend (config, ctx) {
    config.node = {
      fs: 'empty'
    }
  }
}

然后在你的store/index.js:

import Vuex from 'vuex';
import fetch from 'node-fetch';
import fs from 'fs';


const createStore = () => {
  return new Vuex.Store({
    actions: {
        async nuxtServerInit({commit}, {app}) {

            // only update fragements locally
            if (process.env.NODE_ENV == 'local') {
                 
                // LOAD FRAGMENT TYPES AND STORE IN FILE
                // APOLLO READS THIS FILE LATER
                fetch(process.env.API_ENDPOINT, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', authorization: 'Bearer ' + process.env.GRAPHQL_TOKEN, },
                    body: JSON.stringify({
                        variables: {},
                        query: `
                            {
                                __schema {
                                    types {
                                        kind
                                        name
                                        possibleTypes {
                                            name
                                        }
                                    }
                                }
                            }
                        `,
                    }),
                })
                .then(result => result.json())
                .then(result => {
                    // here we're filtering out any type information unrelated to unions or interfaces
                    const filteredData = result.data.__schema.types.filter(
                    type => type.possibleTypes !== null,
                    );
                    result.data.__schema.types = filteredData;
                    fs.writeFile('./apollo/client-configs/schema.json', JSON.stringify(result.data), err => {
                        if (err) {
                            console.error('Error writing fragmentTypes file', err);
                        }
                    });
                });

            }
            
        },
    }
  });
};

export default createStore

您的架构现在应该在架构文件的本地生成，并且该文件将存储在 apollo 缓存中。

Answer 2

任何人来这里是因为他们使用的是无头工艺 CMS，上面的答案是正确的，但为了节省您的阅读时间，基本上您必须让 Apollo 了解架构。

import possibleTypes from './possibleTypes.json';
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
const fragmentMatcher = new IntrospectionFragmentMatcher({
    introspectionQueryResultData: possibleTypes
})

在您定义客户的地方添加以下内容

cache: new InMemoryCache({
    fragmentMatcher
})

要生成您的架构，您可以执行以下查询一次，然后将结果粘贴到 possibleTypes.json（不推荐，因为您会经常这样做）或者将该过程添加到您的 nuxtInitServer 函数中自动更新。

query {
  __schema {
    types {
      name
      kind
      possibleTypes {
        name
        description
      }
    }
  }
}

Answer 3

如文档所述，只有在使用 apollo-client 3.0 版或更高版本（目前处于测试阶段）时才能使用 possibleTypes。除非您使用@apollo/client 包，如here 所示，否则传入possibleTypes 参数将无济于事。

此外，您需要确保传入的对象中的每个属性都是联合或接口的名称，而不是字段的名称。来自docs

您可以将 possibleTypes 选项传递给 InMemoryCache 构造函数，以指定架构中的超类型-子类型关系。此对象将接口或联合类型（超类型）的名称映射到实现或属于它的类型（子类型）。

换句话说，您可以使用contentEngine 字段的类型名称，而不是使用contentEngine 作为键。

如果您使用的是早期版本的apollo-client，则需要按照文档here 中的说明创建IntrospectionFragmentMatcher。