Why query with apollo client on fragment gives me an empty object while api is working fine?

Question

I want to get the data on the dynamic type. For that, I am using fragment in graphql query. Api is working fine in graphql playground but when I am trying to integrate it with react-apollo client it gives me an empty object as well WARNING!heuristic fragment matching going on in console.

It is also working when I am using npm install and npm run start but when I switched to yarn install and yarn run start it gives me an error.

I used IntrospectionFragmentMatcher and set the fetchPolicy as 'cache-and-policy'.

I also shared code for IntrospectionFragmentMatcher for client configuration.

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 }),
});

I expect all fields depend on the type. It can be dynamic so it is decided at run time only. But it gives me an empty object.

If you're still getting the heuristic fragment matching warning, then you either did not configure IntrospectionFragmentMatcher correctly or are not passing it correctly to your InMemoryCache constructor. Please edit your question to include your full client configuration, including the JSON file used to build the IntrospectionFragmentMatcher. — Daniel Rearden

Daniel Rearden Daniel Rearden · Accepted Answer · 2019-08-20T15:05:33

InMemoryCache accepts a configuration object as its parameter. The properties of that object should match what's shown in the docs. You can pass in a FragmentMatcher by setting the fragmentMatcher property. However, in your code, you set a property named fm instead. You should instead do:

new InMemoryCache({ fragmentMatcher: fm })

Why query with apollo client on fragment gives me an empty object while api is working fine?

1 Answers