Passing a static GraphQL schema into GraphiQL 1.0

[connorshea]

I don't want to create more work for you all since I know 2.0 development is getting started, but I wanted to ask about this since I've been struggling to get it fully working for a few days now.

Essentially, the problem is this: I have a GraphQL API that requires authentication (via HTTP headers), which means the introspection query used by the docs explorer fails. So I want to pass a schema into the GraphiQL instance statically. However, this requires building a GraphQLSchema object, which requires pulling in methods from GraphQL and it's kind of a mess.

What I want to be able to do is pass a schema string (aka the JSON response the introspection query would give) into GraphiQL and then have it handle converting that string into a valid schema object.

Right now, my JS looks roughly like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { GraphiQL } from 'graphiql';
import { buildClientSchema } from 'graphql';

let schema = JSON.parse(document.getElementById("graphiql-injection-point").dataset.graphqlSchema)['data'];
let graphQLSchema = buildClientSchema(schema, { assumeValid: true });

ReactDOM.render(
  React.createElement(GraphiQL, {
    schema: graphQLSchema,
    fetcher: graphQLFetcher,
    headerEditorEnabled: true,
    headers: '{\n  "X-User-Email": "[email protected]",\n  "X-User-Token": "API_TOKEN_HERE"\n}'
  }),
  document.getElementById("graphiql-injection-point")
);

This works fine in development, but fails in production - seemingly due to weirdness with Webpack/Babel.

The JSON in the graphqlSchema data attribute looks like this:

{
  "data": {
    "__schema": {
      "queryType": {
        ...
      },
      "mutationType": {
        ...
      }
      ...
    }
  }
}

What I'd like to be able to do here instead is something like this:

import { GraphiQL } from 'graphiql';

let schema = document.getElementById("graphiql-injection-point").dataset.graphqlSchema;

ReactDOM.render(
  React.createElement(GraphiQL, {
    schemaString: schema,
    fetcher: graphQLFetcher,
    headerEditorEnabled: true,
    headers: '{\n  "X-User-Email": "[email protected]",\n  "X-User-Token": "API_TOKEN_HERE"\n}'
  }),
  document.getElementById("graphiql-injection-point")
);

With this schemaString property, GraphiQL would parse the string as JSON and create the schema itself.

Would this be possible? I'd like to avoid needing to import the graphql package and mess with building the schema object myself.

[ts-sdeb]

@connorshea Facing the same issue, were you able to find a workaround?

[acao]

you just need to pass a schema object to the schema prop

schema: GraphiQL.GraphQL.buildSchema(schemaString)

[acao]

the way people have always done this is by passing a GraphQLSchema object to the schema prop

to pass it in from a string i think you would use graphql.buildSchema(schemaString)

the schema prop dynamically updates validation/etc, GraphiQL has always worked this way.