Apollo-server: Change playground URL because of useGETForHashedQueries of apollo-link-persisted-queries.

[frederikhors]

I'm using Apollo Server 2, with apollo-server-express and https://github.com/apollographql/apollo-link-persisted-queries.

Using option:

useGETForHashedQueries: set to true to use the HTTP GET method when sending the hashed version of queries (but not for mutations). GET requests require apollo-link-http 1.4.0 or newer, and are not compatible with apollo-link-batch-http.

Now I have some GET requests on my

localhost:3000/graphql

with query string:

ex.: localhost:3000/graphql?operationName=Query&variables=%7B%7D&extensions=%7B%22persistedQuery%22%3A%7B%22version%22%3A1%2C%22sha256Hash%22%3A%22cef1bfa9a5e9f

Is this the correct behaviour?

Can we change the Playground path URL? How?

I didn't find anything on this. It would be awesome to change it, in example to: localhost:3000/playground.

Is it possibile?

[brianschardt]

Is this possible. I need this too.

[jasonpaulos]

Hi @frederikhors, thanks for originally opening this issue. You can change the endpoint that apollo-server uses to serve the playground by specifying the path option in ApolloServer.applyMiddleware, documented here: https://www.apollographql.com/docs/apollo-server/api/apollo-server/#apolloserverapplymiddleware

If this does not answer your question, please respond and I (or someone else) will be happy to answer or re-open this issue. Thanks!

[robertu7]

@jasonpaulos The path option in ApolloServer.applyMiddleware looks change both the endpoint of GraphQL API and the playground, not playground only.

[robertu7]

Set playground: false to disable built-in playground then add another route is working fine for me now:

import {
  renderPlaygroundPage,
  RenderPageOptions as PlaygroundRenderPageOptions
} from '@apollographql/graphql-playground-html'

app.get('/playground', (req, res, next) => {
  const playgroundRenderPageOptions: PlaygroundRenderPageOptions = {
    endpoint: '/graphql'
  }
  res.setHeader('Content-Type', 'text/html')
  const playground = renderPlaygroundPage(playgroundRenderPageOptions)
  res.write(playground)
  res.end()
  return
})