GraphiQL

How to set up GraphiQL with GraphQL Server

GraphQL Server allows you to easily use GraphiQL. Here’s how:

Configuring GraphiQL

graphiql<Express/Connect/Hapi/Koa> accepts the following options object:

1
2
3
4
5
6
7
const options = {
endpointURL: String, // URL for the GraphQL endpoint this instance of GraphiQL serves
query?: String, // optional query to pre-populate the GraphiQL UI with
operationName?: String, // optional operationName to pre-populate the GraphiQL UI with
variables?: Object, // optional variables to pre-populate the GraphiQL UI with
result?: Object, // optional result to pre-populate the GraphiQL UI with
}

GraphQL Server’s graphiql middleware does not run any query passed to it, it simply renders it in the UI.
To actually execute the query, the user must submit it via the GraphiQL UI, which will
send the request to the GraphQL endpoint specified with endpointURL.

Using with Express

If you are using Express, GraphiQL can be configured as follows:

1
2
3
4
5
import { graphiqlExpress } from 'graphql-server-express';
app.use('/graphiql', graphiqlExpress({
endpointURL: '/graphql',
}));

Using with Connect

If you are using Connect, GraphiQL can be configured as follows:

1
2
3
4
5
import { graphiqlConnect } from 'graphql-server-express';
app.use('/graphiql', graphiqlConnect({
endpointURL: '/graphql',
}));

Using with Hapi

If you are using Hapi, GraphiQL can be configured as follows:

1
2
3
4
5
6
7
8
9
10
11
import { graphiqlHapi } from 'graphql-server-hapi';
server.register({
register: graphiqlHapi,
options: {
path: '/graphiql',
graphiqlOptions: {
endpointURL: '/graphql',
},
},
});

Using with Koa 2

If you are using Koa 2, GraphiQL can be configured as follows:

1
2
3
import { graphiqlKoa } from 'graphql-server-koa';
router.get('/graphiql', graphiqlKoa({ endpointURL: '/graphql' }));
Edit on GitHub