为什么在片段上使用apollo客户端查询会给我一个空对象，而api工作正常？

Question

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

当我使用npm install和npm run start时它也正常工作但是当我切换到纱线安装和纱线运行开始时它给了我一个错误。

我使用了IntrospectionFragmentMatcher并将fetchPolicy设置为'cache-and-policy'。

我还为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 })