Offline Apollo graphql playground

#graphql #apolloserver #javascript #node

In a Apollo graphql server application, at the graphql end point , usually the http://localhost:4000/graphql you may prompted to use the new Apollo studio / playground, which required connection to the internet.

There is also an option to use the sand box which let you use the playground without login to studio. Still miss the old graphql playground ?

What is playground ?

Graphql Playground is a interactive script tool for testing query, typeDefs and mutations, it also list available schema and other useful information.

How to use a offline playground ?

We can optionally configure an offline graphql playground (old) in our server/index.js file of our project using the ApolloServerPluginLandingPageGraphQLPlayground plugin from the core module.

First import the plugin from core module

const { ApolloServerPluginLandingPageGraphQLPlayground } = require('apollo-server-core');
...
const server = new ApolloServer({
    typeDefs, resolvers,
    plugins: [
        ApolloServerPluginLandingPageGraphQLPlayground({
            // options
        })
    ]
});

Start the project and go to the graphql end point , you will meet the old playground which is ideal for development purposes.

Wanna disable the landing page ?

Still the landing page annoying you ? use the second plugin to disable the feature

const server = new ApolloServer({
    typeDefs, resolvers,
    plugins: [
        ApolloServerPluginLandingPageGraphQLPlayground({
            // options
        })
        , ApolloServerPluginLandingPageDisabled()
    ]
});