Graphql-playground: Express Playground Not Using Provided Subscription Endpoint

[ryan-gilb]

This issue pertains to the following package(s):

• [ ] GraphQL Playground - Electron App
• [x] GraphQL Playground HTML
• [x] GraphQL Playground
• [x] GraphQL Playground Express Middleware
• [ ] GraphQL Playground Hapi Middleware
• [ ] GraphQL Playground Koa Middleware
• [ ] GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

macOS High Sierra Version 10.13.3

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

graphql-playground Version 1.4.5 (1.4.5.2716)
graphql-playground-middleware-express Version 1.5.7

What is the expected behavior?

A WebSocket connection to a provided subscription endpoint (ie ws://localhost:4000/subscriptions) should be established successfully.

What is the actual behavior?

Playground attempts to establish a WebSocket connection to a different endpoint than the one provided (perhaps a default / fallback endpoint) and fails.

As you can see in the screenshot above, a WebSocket connection is trying to be established to ws://localhost:4000/graphql, but that's not the endpoint I specified.

What steps may we take to reproduce the behavior?

Clone relevant tutorial code from Apollo blog post (https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-server-side-e51c32dc2951):

git clone https://github.com/apollographql/graphql-tutorial.git
cd graphql-tutorial
git checkout t6-end
cd server && npm install
npm install graphql-playground-middleware-express

Add the following code to server.js:

server.use(
  '/playground',
  expressPlayground({
    endpoint: '/graphql',
    subscriptionsEndpoint: 'ws://localhost:4000/subscriptions',
  }),
);

Don't forget to import:

import expressPlayground from 'graphql-playground-middleware-express';

Start the server:

npm start

Go to http://localhost:4000/playground and check the console.

[Ben305]

I have exactly the same problem, also related to https://github.com/graphcool/graphql-playground/issues/462.

I tried to debug into this by running the development commands mentioned in the README.md. Unfortunately, a Javaascript error occured (GraphQLPlayground not defined or something like that)

[lumosdang]

Found bug:

https://github.com/graphcool/graphql-playground/blob/d77a514aa615593a017e882dc741c80d4ad4e17a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx

Line: 97 -> 105

Please fix!

[danieljvdm]

any plans to fix this?

[realironnam]

In my case
I'm using apollo-server-express 2.0.0
I add config

 playground: {
    subscriptionEndpoint: `ws://${IP_Address}:${PORT}`
  }

to ApolloServer.
it's working properly

[huv1k]

It should work in the latest version, if its still problem please reopen.