GraphQL plugin config: document what exactly the typeName is

[dandv]

Summary

New Gatsby user, but experienced with GraphQL. I've cloned gastby-with-apollo and I'm trying to use the the gatsby-source-graphql plugin to fetch a basic list of names. I can't figure out what to pass in the typeName field of the plugin configuration.

Relevant information

In the documentation, the comment above that field is

 // This type will contain remote schema Query type

Overlooking the terse grammar, I don't understand what that comment means, and why that information is necessary, when I'm already specifying the (root) fieldName, and the full GatsbyQuery.

File contents (if changed)

gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-graphql',
      options: {
        typeName: 'Filter',
        fieldName: 'publicFilters',
        url: 'https://graphql.cryptoclimate.io',
      },
    },
  ],
};

Relevant information

• GraphQL Playground
• GatsbyQuery I'm running: { publicFilters { id name } } (executes fine in the Playground)
• Error: Unknown field 'id' on type 'Filter!'.
• Schema includes:
  • type Filter { id: String!, name: String!, ... },
  • type Query { publicFilters(userIds: [String!]): [Filter!]! }

I've tried all sorts of permutations and capitalization of "Filter" and "PUBLICFILTERS" for the typeName, but all result in the same error. I can't relate the "RMAPI" from gastby-with-apollo, or the SWAPI from other samples to anything in their GraphQL schemas. I'm sure those aren't arbitrary strings, so what am I missing?

[tbrannam]

gatsby-source-graphql stitches other GraphQL schemas into the Gatsby GraphQL schema.

When attaching an external schema - you are grouping all those queries under that fieldname.

try renaming Type to CClimate and fieldname to cclimate.

and update your query so that the fields of your graphql service are nested under cclimate

query {
  cclimate {
     publicFilters(userIds: ....) {
        id
     }
  }
}

[universse]

Can you try this?

query MyQuery {
  graphQlSource(typeName: {eq: "Filter"}) {
    fieldName
    id
    typeName
  }

  allGraphQlSource {
    nodes {
      id
      typeName
      fieldName
    }
  }
}

[dandv]

@tbrannam: thanks for the suggestion, it works. Why the particular capitalization for typeName, CClimate, though? I replaced it with BOGUS, and the query worked just as well. So,

1. typeName can be, literally, anything
2. the fieldName is the arbitrary name for the field under which the remote GraphQL source will appear in Gastby's GraphQL schema. You'll use it in the GatsbyQuery. Working example:

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-graphql',
      options: {
        typeName: 'BOGUS',
        fieldName: 'myRemoteGqlSource',
        url: 'https://graphql.cryptoclimate.io',
      },
    },
  ],
};

src/pages/index.js

import React from 'react';
import { graphql } from 'gatsby';

// This query is executed at build time by Gatsby.
export const GatsbyQuery = graphql`
  query {
    myRemoteGqlSource {
      publicFilters {
        id
        name
      }
    }
  }
`;

export default ({ data }) => {
  return (
    <div>{JSON.stringify(data)}</div>
  )
}

If the explanation above for fieldName is clearer, I'm happy to submit a doc PR. It seems that typeName is unnecessary though, so my understanding is perhaps still incomplete.

Here's a minimalistic working repo with the BOGUS typeName.

@universse: that resulted in all queries nested under publicFilters, but publicFilters is a query itself:

With the working repo, GraphiQL looks sane:

[tbrannam]

You are correct - both names are fairly arbitrary. The typeName is used, if you peek at the Docs generated in GraphiQL you will see that myRemoteGqlSource: BOGUS is defined. In this case BOGUS represents the type of all the resolvers of your GraphQL service.

[dandv]

Thanks for the clarifications! I've submitted #18937 to improve the plugin's doc.