Graphql-playground: Error in creating WebSocket connection

[eliperelman]

Hello! I am getting an error in generating a WebSocket connection, specifically:

Uncaught DOMException: Failed to construct 'WebSocket': The URL 'undefined' is invalid.

I've done a little source-diving, and it appears to be a mismatch between the output to SubscriptionClient of subscriptions-transport-ws and the input to WebSocketLink from apollo-link. It seems that SubscriptionClient has a url property, but WebSocketLink is looking for uri:

https://github.com/apollographql/subscriptions-transport-ws/blob/0da748556bc24ec972dd27afc840e6d63b661b2e/src/client.ts#L112

https://github.com/apollographql/apollo-link/blob/f2124e60dc3720226fd4a88402435fa96835221d/packages/apollo-link-ws/src/webSocketLink.ts#L13

https://github.com/apollographql/apollo-link/blob/f2124e60dc3720226fd4a88402435fa96835221d/packages/apollo-link-ws/src/webSocketLink.ts#L42

Does this seem like a bug, or am I missing something else here?

---

This issue pertains to the following package(s):

• [ ] GraphQL Playground - Electron App
• [ ] 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

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

v1.5.7

What is the expected behavior?

No errors in WebSocket connection.

What is the actual behavior?

Error in creating a WebSocket connection.

What steps may we take to reproduce the behavior?

Unknown yet.

[eliperelman]

I set a breakpoint right before the creation of WebSocketLink, and injected the following into the console:

subscriptionClient.uri = subscriptionClient.url

And this makes the error go away.

[nelsonBlack]

experiencing same problem as @eliperelman , was a fix done ?

[nuragic]

Dunno what the hell is happening there, but the instanceof check is failing (even if we pass an instance of SubscriptionClient), hence it enters on the other branch of the if, resulting in an error
because the instance is treated as configuration, so the uri param is obviously undefined there... 😕

Also it's really strange because my code was working before, then I fresh cloned the repo re-installed everything and 💥 ...

🤔

[nuragic]

It should be closed once https://github.com/apollographql/apollo-link/pull/832 got merged. Thanks!

[adrian-baker]

No sign of that pull request being merged, is there a workaround ?

[nuragic]

@adrian-baker Yes. As mentioned in https://github.com/apollographql/apollo-link/issues/773, if you create the link instance in this way it works:

const link = new WebSocketLink({
  uri: YOUR_URI,
  options:  YOUR_OPTIONS,
});

BTW, I checked the status on that PR and it contained one conflict... I've just rebased and pushed it again, now it seems that a review has been automatically requested.

[adrian-baker]

I'm not creating the link in my own code though, I'm just using the <Playground/> component.

I seem to have been able to avoid the problem, based on the hint in this comment, I've added to package.json:

  "resolutions": {
    "subscriptions-transport-ws": "0.9.14",
    "apollo-link-ws": "1.0.8",
    "graphql": "14.0.2"
  }

[imad-mn]

Thanks @adrian-baker !!! It helped me by just yarn add apollo-link-sw

[rrrix]

In case anyone else is here in 2020 or beyond, you need to add these three packages to your package.json if you don't have them already:

apollo-link-ws
graphql

The versions don't need to be pinned (at least, not yet) - I'm using the latest of everything.