Graphql react-apollo IntrospectionFragmentMatcher

Question

I'm using GitHub Graphql API and I wrote following code with react-apollo but when I paginate after many requests I get following errors on the console.

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/recipes/fragment-matching.html

.

WARNING: heuristic fragment matching going on!

.

Missing field name in { "__typename": "Organization" }

Missing field avatarUrl in { "__typename": "Organization" }

Missing field repositories in { "__typename": "Organization" }

and I wrote the following codes:

gql`
  query($username: String!, $nextPage: String) {
    search(query: $username, type: USER, first: 100, after: $nextPage) {
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        node {
          ... on User {
            name
            avatarUrl
            repositories {
              totalCount
            }
          }
        }
      }
    }
  }
`;


handleSubmit = ({ username }) => {
    const { client } = this.props;
    this.setState({
      loading: true,
      searchTerm: username,
    });
    client
      .query({
        query: SEARCH_USER,
        variables: {
          username
        }
      })
      .then(({ data }) => {
        this.setState({
          loading: false,
          searchList: data.search.edges,
          pagination: data.search.pageInfo,
        });
      })
      .catch(err => {
        console.warn(err);
      });
  };

Kamil Kisiela Kamil Kisiela · Accepted Answer · 2019-01-17T13:00:56

Because Apollo has not enough information about your GraphQL Schema you need to provide it somehow. Apollo has a well written documentation on that topic.

It describes to use a script to introspect your GraphQL Server in order to get that missing information about Unions and Interfaces.

To make the process even easier I wrote a plugin for GraphQL Code Generator that automates everything. There's a chapter called "Fragment Matcher" that I recommend to read.

Either first, the manual solution or the second should fix your problem :)

Graphql react-apollo IntrospectionFragmentMatcher

1 Answers