Express Playground Not Using Provided Subscription Endpoint

This issue pertains to the following package(s):

• GraphQL Playground - Electron App
• GraphQL Playground HTML
• GraphQL Playground
• 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.

[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

[lumosdang]

Found bug:

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

Line: 97 -> 105

Please fix!