Graphql-playground: Websocket handshake has wrong headers

[bublig737]

Hello gentlemen! Can i use websocket connection with aws lambda and graphQL playground?
What i use:
NodeJS 8.10
GraphQL 14.3.1
Serverless
AWS Lambda

My websocket server is a Lambda function that uses API Gateway V2 with specific endpoint wss://xxx.com

I try to use endpoint wss://xxx.com with graphql subscription by playground:

how i defined the playground:

import lambdaPlayground from 'graphql-playground-middleware-lambda'
export default lambdaPlayground({
   endpoint: '/dev/graphql',
   subscriptionEndpoint: 'wss://xxx.com',
})

Then after open my playground i try to subscribe any subscription
And I getting the following Error when i use on of the any subscription:

{
  "error": "Could not connect to websocket endpoint wss://xxx.com. Please check if the endpoint url is correct."
}

I was try to change the browser and it works in Firefox and does not cathcing this error and working kind of really subscribtions but it has not receives the data from my socket.
For find the problem i has run the apollo socket client and subscribe by his to the my endpoint and it is works! Then I started looking for the diference and found it:

as i understood Websocket graphql connection actually passing in two stages(requests):
1) websocket handshake
2) connection

On the first stage requests from playground and apollo has one different header:
Playground has header: "Sec-WebSocket-Protocol": “graphql-ws”
Apollo does not have this header

And it is all diferences

So, then i can try to remove this header from playground request and i can not to do it anyway.
Readed the documentation of playground and observed where uses subscriptionEndpoint field from constructor i try to put the header "Sec-WebSocket-Protocol": null into headers constructor fields. It is not works… header "Sec-WebSocket-Protocol" does not be sets but another headers do it. So, i dont know what im doing wrong. I need to launch my subscriptions in playground for tests. Please help me ;)

[AlpacaGoesCrazy]

Might be related https://forums.aws.amazon.com/thread.jspa?messageID=883536&tstart=0

[jdrydn]

Yes, it is related, but if the Playground could omit that header then we could use the Playground to test our websocket connections? Or is there an example where we can override headers such as this?

[guerrerocarlos]

Hello, I created a fork that does not include any header during the WebSocket handshake, (so it works with AWS Lambda Websockets) to use it add cdnUrl with https://guerrerocarlos.github.io/graphql-playground/packages/ and an empty version to the ApolloServer constructor:

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: {
    cdnUrl: 'https://guerrerocarlos.github.io/graphql-playground/packages/',
    version: '',
  }
 });

[jim-hill-r]

Any update on this? I am running into this issue as well.