为什么在 api 工作正常的情况下，在fragment上使用apollo客户端查询会得到一个空对象？

Question

我想获取动态类型的数据。为此，我在 graphql 查询中使用片段。Api 在 graphql Playground 中工作正常，但是当我尝试将它与 React-apollo 客户端集成时，它也给了我一个空对象以及警告！控制台中正在进行的启发式片段匹配。

当我使用 npm install 和 npm run start 时它也可以工作，但是当我切换到yarn install 和yarn run start 时它给了我一个错误。

我使用 IntrospectionFragmentMatcher 并将 fetchPolicy 设置为“缓存和策略”。

我还共享了用于客户端配置的 IntrospectionFragmentMatcher 的代码。

query GetContentSections($contentPageId: Int) {
  contentSection {
    searchContentSections(contentPageId: $contentPageId, status: [ACTIVE]) {
      id
      contentLayoutId
      sort
      sectionContainers {
        id
        sort
        snippets {
          id
          sort
          type: __typename
          ...quote
          ...text
          ...image
          ...video
          ...audio
          ...button
          ...popup
          ...map
          ...code
          ...app
        }
      }
    }
  }
}
fragment text on ContentSnippetTextType{
  text
}
fragment image on ContentSnippetImageType{
  assetId
}
fragment video on ContentSnippetVideoType{
  assetId
}
fragment audio on ContentSnippetAudioType{
  assetId
}
fragment button on ContentSnippetButtonType{
  hyperlink
  innerText
  foregroundColor
  fontColor
  backgroundColor
}
fragment popup on ContentSnippetPopupType{
  text
  link
}
fragment quote on ContentSnippetQuoteType {
  text
  author
}
fragment map on ContentSnippetMapType {
  longitude
  latitude
  zoom
}
fragment code on ContentSnippetCodeType {
  cssFileLocation
  htmlFileLocation
  javascriptFileLocation
}
fragment app on ContentSnippetAppType {
  appId
}

const fm = new IntrospectionFragmentMatcher({
  introspectionQueryResultData:{
    "__schema": {
      "types": [
        {
          "kind": "INTERFACE",
          "name": "ContentSnippetInterface",
          "possibleTypes": [
            { "name": "ContentSnippetAppType" },
            { "name": "ContentSnippetAudioType" },
            { "name": "ContentSnippetButtonType" },
            { "name": "ContentSnippetCodeType" },
            { "name": "ContentSnippetImageType" },
            { "name": "ContentSnippetMapType" },
            { "name": "ContentSnippetPopupType" },
            { "name": "ContentSnippetQuestionType" },
            { "name": "ContentSnippetQuoteType" },
            { "name": "ContentSnippetTextType" },
            { "name": "ContentSnippetVideoType" },
            { "name": "ContentSnippetSpacerType" }
          ]
        },
      ]
    }
  }
});

export default new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({ fm }),
});

我希望所有字段都取决于类型。它可以是动态的，因此仅在运行时决定。但它给了我一个空的对象。

Answer 1

InMemoryCache 接受配置对象作为其参数。该对象的属性应与文档中显示的内容相匹配。您可以通过设置属性来传入 FragmentMatcher fragmentMatcher。但是，在您的代码中，您设置了一个名为fm相反的属性。你应该这样做：

new InMemoryCache({ fragmentMatcher: fm })