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

Question

我有一个 headless 的 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 组件中尝试使用它时出现此错误:

You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types. Apollo Client will not be able to accurately map fragments. To make this error go away, use the IntrospectionFragmentMatcher as described in the docs: 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"
        ],
    },
});

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

WARNING: heuristic fragment matching going on!

Answer 1

任何人来到这里是因为他们正在使用 headless 的 Craft 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
      }
    }
  }
}