Build and run queries against Apollo Server

In non-production environments, Apollo Server 3 serves the following landing page from its base URL (http://localhost:4000 by default):

Apollo Server serves a different landing page

in production

Apollo Sandbox

The landing page above provides a link to

Apollo Sandbox

, a powerful web IDE that enables you to build and run operations against your server (or any other reachable server). Sandbox is a special instance of the

Apollo Studio Explorer

that doesn't require an Apollo account.

Production vs. non-production

In production environments (when NODE_ENV is production), Apollo Server serves a different landing page:

This is partly because Apollo Server disables introspection in production by default, which means that tools like Apollo Sandbox don't work.

For this reason, if you choose to

change your Apollo Server landing page

, we recommend using different settings for production and non-production environments (potentially even

disabling your landing page

in production).

Changing the landing page

You can change the landing page that's served from Apollo Server's base URL. In addition to

configuring the default landing page

, you can serve

GraphQL Playground

(an open-source GraphQL IDE), a completely

custom landing page

, or you can

disable the landing page entirely

You do this by installing one of a few different Apollo Server plugins.

Configuring the default landing page

Apollo Server uses one of these plugins to display its default landing page, depending on the environment:

ApolloServerPluginLandingPageLocalDefault (non-production environments)
ApolloServerPluginLandingPageProductionDefault (production)

You can install either of these plugins manually to configure its behavior.

This sample replicates Apollo Server's default behavior, except it removes the footer that each landing page displays:

index.js

1
const {
2
  ApolloServerPluginLandingPageProductionDefault
3
  ApolloServerPluginLandingPageLocalDefault,
4
} = require('apollo-server-core');
5

6
const server = new ApolloServer({
7
  typeDefs,
8
  resolvers,
9
  plugins: [
10
    process.env.NODE_ENV === 'production' ?
11
      ApolloServerPluginLandingPageProductionDefault({ footer: false }) :
12
      ApolloServerPluginLandingPageLocalDefault({ footer: false })
13
  ]
14
});

For all available configuration options for these plugins,

see the API reference

GraphQL Playground

Note: The GraphQL Playground project has been

retired

. Apollo Server provides an integration with GraphQL Playground to help developers migrate from Apollo Server 2 with as few changes as possible, but we do not recommend long-term use of this unmaintained project.

The previous version of Apollo Server (v2) serves GraphQL Playground from its base URL:

You can replicate this behavior in Apollo Server 3 by providing the following plugin to the ApolloServer constructor:

index.js

1
const { ApolloServerPluginLandingPageGraphQLPlayground } = require('apollo-server-core');
2

3
const server = new ApolloServer({
4
  typeDefs,
5
  resolvers,
6
  plugins: [
7
    ApolloServerPluginLandingPageGraphQLPlayground({
8
      // options
9
    })
10
  ]
11
});

You can configure GraphQL Playground's behavior by

providing options to this plugin

Custom landing page

You can serve a custom HTML landing page from Apollo Server's base URL. To do so, define your own

custom plugin

that calls the

renderLandingPage method

, like so:

index.js

1
const server = new ApolloServer({
2
  typeDefs,
3
  resolvers,
4
  plugins: [
5
    {
6
      async serverWillStart() {
7
        return {
8
          async renderLandingPage() {
9
            const html = `
10
<!DOCTYPE html>
11
<html>
12
  <head>
13
  </head>
14
  <body>
15
    <h1>Hello world!</h1>
16
  </body>
17
</html>`;
18
            return { html };
19
          }
20
        }
21
      }
22
    }
23
  ]
24
});

Disabling the landing page

You can disable Apollo Server's landing page by providing the following plugin to the ApolloServer constructor:

index.js

1
const { ApolloServerPluginLandingPageDisabled } = require('apollo-server-core');
2

3
const server = new ApolloServer({
4
  typeDefs,
5
  resolvers,
6
  plugins: [
7
    ApolloServerPluginLandingPageDisabled()
8
  ]
9
});

Subscriptions

Request format