DEV Community

MANOJ AP
MANOJ AP

Posted on • Updated on

Offline Apollo graphql playground

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
        })
    ]
});

Enter fullscreen mode Exit fullscreen mode

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()
    ]
});
Enter fullscreen mode Exit fullscreen mode

don't forget to import the plugin first.

For good read

Top comments (2)

Collapse
 
bobrobert13 profile image
Robert Caraballo

this working for me.! thanks you

Collapse
 
oshperez profile image
oshperez

This article solved my problem. Thanks