Search code examples
reactjsgraphqlgraphiql

Prevent Graphiql console from issuing multiple introspection queries

I am using the Graphiql component to render a console and want to fetch the schema via an introspection query. The problem is that if the component re-renders before the first introspection query is resolved (say a modal is opened for example), a second introspection query is fired off. Given that these queries are expensive for the backend, I'd like to avoid this.

Is there a way to avoid multiple introspection queries?

Solution

  • The GraphiQL component accepts a schema prop:

    schema: a GraphQLSchema instance or null if one is not to be used. If undefined is provided, GraphiQL will send an introspection query using the fetcher to produce a schema.

    You can use getIntrospectionQuery to get the complete introspection schema, fetch the introspection result and then use it to build a schema.

    const { getIntrospectionQuery, buildClientSchema } = require('graphql')

const response = await fetch('ENDPOINT_URL', {
  method: 'post',
  headers: { 'Content-Type': 'application/json' },
  body: { query: JSON.stringify(getIntrospectionQuery()) },
})
const introspectionResult = await response.json()
const schema = buildClientSchema(introspectionResult.data)

    Do this before you render the component and then just pass in the schema as a prop. If your schema isn't going to change, you can also just save the introspection result to a file and use that instead of querying the server.