Support a different URL for playground

• feature

I know I can provide parameter path when calling server.applyMiddleware({ app, path });. But it looks like this path will be used for both the GraphQL API endpoint (when using XHR) and also for the playground (when visiting in a browser). Is it possible to use different URLs for them? e.g. /api/graphql for the endpoint and /graphql-playground for the playground

[mondaychen]

I found https://github.com/apollographql/apollo-server/blob/master/packages/apollo-server-express/src/ApolloServer.ts

It does not look like it’s supported.

If this sounds like a valid feature request, I can work on this and submit a merge request next week.

[Pocket-titan]

If I’m not mistaken, the playground key accepts an endpoint parameter like so:

import { ApolloServer } from 'apollo-server'

const server = new ApolloServer({
    playground: {
        endpoint: 'http://localhost:4000/graphql', // I think this is the default one
    },
})

So in your case, I believe you could do this (using express here as an example)

import express from 'express'
import { ApolloServer } from 'apollo-server-express'

const app = express()

const server = new ApolloServer({
    playground: {
        endpoint: `http://${your_domain_here}:${your_port_here}/graphql-playground`,
    },
})

server.applyMiddleware({
    app,
    path: '/api/graphql',
})

app.listen(your_port_here, () => {
    console.log(`Serving graphql api on /api/graphql and playground on /graphql-playground!`)
})

where you’d replace your_domain_here and your_port_here with your own variables, naturally. The shape of endpoint can be found here: https://github.com/prisma/graphql-playground#properties.