Graphql-playground: Subscriptions are sent to HTTPS endpoint and behave like queries

[marktani]

This issue pertains to the following package(s):

• [x] GraphQL Playground - Electron App

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

Mac OS X Sierra

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

1.5.4.

What is the expected behavior?

Running a subscription sets up an active WS connection that listes to events.
Whenever an event is fired, the Playground shows the related data according to the subscription query.

What is the actual behavior?

Running a subscription sends a HTTPS request, which gets an immediate response. No active listening happens.

What steps may we take to reproduce the behavior?

prisma init test
cd test
prisma deploy
prisma playground

subscription {
  user(where: {
    mutation_in: [CREATED, UPDATED, DELETED]
  }) {
    mutation
    node {
      id
      name
    }
    updatedFields
    previousValues {
      id
    }
  }
}

[nikolasburk]

Thanks for reporting this Nilan! As a temporary workaround, I've found that it often helps to start a subscription on the database layer (which seems to work reliably). So, e.g. for a Post model, it could look like this:

subscription {
  post {
    node {
      id
      title
    }
  }
}

[bblumberg]

I ran into the same bug, and when I try the workaround, I get 2 listeners, but I only get a notification from the database, but not the application on changes. Is this expected behavior? Thx. I am using your example code with no modifications other than the address of the database

[timsuchanek]

Fixed in the latest version. Please let us know if you still have that issue, then we reopen it!

[captDaylight]

@timsuchanek I updated prisma@^1.9.0, prisma-binding@^2.1.0 and [email protected] and still seeing this issue.

[marktani]

What's your Playground version, @captDaylight?

[captDaylight]

Whatever version is coming with the [email protected], I'm running the command graphql playground. Is there another way to tell?

[marktani]

Is it an electron app or the in browser Playground?

If it's the in-browser Playground, you can click the cogwheel in the top right:

[captDaylight]

It's in browser and served up on localhost:3000/playground when I run yarn dev from terminal. Hitting the cog wheel shows me only general settings:

{
  "general.betaUpdates": false,
  "editor.theme": "dark",
  "editor.reuseHeaders": true,
  "request.credentials": "omit",
  "tracing.hideTracingResponse": true
}

[marktani]

Are you using graphql-yoga, or any other GraphQL Server that packages GraphQL Playground? If yes, what version?

Here is a picture that shows the Playground settings and the version string 1.7.0 in the bottom right corner:

[captDaylight]

I'm following along to the subscriptions tutorial and found this issue based on the bug noted in section 3.3. There's no mention of graphql-yoga in the tutorial but looking in package.json I see that running the yarn dev command as it instructs ends up calling graphql playground. So it seems that the playground instance is coming from graphql-cli.

[marktani]

The tutorial uses graphql-yoga which exposes GraphQL Playground.

The version that is currently used is old, so it exposes an old GraphQL Playground version. Please upgrade the version of graphql-yoga to the latest one. You might need to adjust some code as well.

[captDaylight]

upgraded to "graphql-yoga": "^1.14.10", then ran yarn dev to start the playground again. Still getting the null subscription data though and the playground settings from cog wheel still look like my reference above.

Not the end of the world, the work around is works for me. I don't want you to have to spin your wheels helping me get it up to speed. :)

[marktani]

I'll reopen this, because you're experiencing this on the latest version still. Thanks for your feedback! 🙂