Apollo-server: Playground config doesn't work

[DavidOnGitHub]

Following is my code:

import express from 'express'
import { ApolloServer } from 'apollo-server'
import { makeExecutableSchema } from 'graphql-tools'
import cors from 'cors'
import { typeDefs, resolvers, schemaDirectives } from './models'

const server = new ApolloServer({
  schema: makeExecutableSchema({
    typeDefs, resolvers, schemaDirectives
  }),
  playground: {
    endpoint: 'http://someurl/abc/graphql',
    settings: {
      'editor.theme': 'light'
    }
  }
})
const app = express()

app.use(cors())

server.applyMiddleware({ app })

app.listen(3000, () =>
  console.log(`The app is listening on ${server.graphqlPath}!`)
)

Playground is supposed to send requests to http://someurl/abc/graphql but it's still sending to http://localhost:3000/graphql. In fact the settings don't work either coz the theme doesn't change to 'light'.

apollo-server version is 2.0.0-rc.12. apollo-server-express version is 2.0.0-rc.12.

[DavidOnGitHub]

Dug into source code of apollo-server-express and found that the config should be passed as 'gui' in applyMiddleware:

import express from 'express'
import { ApolloServer } from 'apollo-server'
import { makeExecutableSchema } from 'graphql-tools'
import cors from 'cors'
import { typeDefs, resolvers, schemaDirectives } from './models'

const server = new ApolloServer({
  schema: makeExecutableSchema({
    typeDefs, resolvers, schemaDirectives
  })
})
const app = express()

app.use(cors())

server.applyMiddleware({ app, gui:  {
  endpoint: 'http://someurl/abc/graphql',
  settings: {
    'editor.theme': 'light'
  }
}})

app.listen(3000, () =>
  console.log(`The app is listening on ${server.graphqlPath}!`)
)

Please note this is not in documentation.

[unicodeveloper]

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

// Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: {
    endpoint: 'http://someurl/abc/graphql',
    settings: {
      'editor.theme': 'light'
    }
  }
});

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 3000 }, () =>
  console.log(`🚀 Server ready`)
);

This works without the gui option @DavidOnGitHub

[DavidOnGitHub]

@unicodeveloper, thanks for your reply. I copied your exact code but the settings still don't work. What's the version of the packages you are using?

[unicodeveloper]

Hello @DavidOnGitHub I'm using:

• apollo-server-express: 2.0.0
• express: 4.16.3

[unicodeveloper]

This is me using the standalone apollo-server.

apollo-server

const { ApolloServer, gql } = require('apollo-server');

// Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: {
    endpoint: '/playground',
    settings: {
      'editor.theme': 'light'
    }
  }
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

apollo-server-express

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: {
    endpoint: '/server/playground',
    settings: {
      'editor.theme': 'light'
    }
  }
});

const app = express();
server.applyMiddleware({ app, path: '/server' });

app.listen({ port: 3000 }, () => {
  console.log(`🚀 Server ready at port 3000`);
});

• apollo-server-express: 2.0.0
• apollo-server: 2.0.0
• express: 4.16.3

[DavidOnGitHub]

Yea it works. Thank you @unicodeveloper . I think it might be my cache.

[mpatelatIBM]

What are the other option that we can add inside settings,

playground: { endpoint: '/server/playground', settings: { 'editor.theme': 'light' } }

share playground is not working and can we show default schema of query (like we can do in swagger), is there any doc that I can refere?

Thanks.

[langpavel]

It does not work for me. All packages at last version.

[jrhite]

It does not work for me as well:

apolloServer = new ApolloServer{
    typeDefs,
    resolvers,
    playground: {
        endpoint: '/graphiql',
        settings: {
             'editor.theme': 'light'
        }
    }
});

The GraphQL loads in the browser at: http://localhost:3000/graphql and in the UI tab I see http://localhost:3000/graphiql

But then I get a series of 404s: POST http:/localhost:3000/graphiql 404 (Not Found)

If I remove the playground settings from the config above everything works, but both the browser URL and the URL in the tab point to http:/localhost:3000/graphql

[mrdulin]

@jrhite same issue with yours

[lyudad]

same issue