graphql / graphql-playground

🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)
MIT License
8.76k stars 731 forks source link

Remove the requirement for the GraphQL server to implement a websocket endpoint #575

Open andheiberg opened 6 years ago

andheiberg commented 6 years ago

This issue pertains to the following package(s):

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

OSX 10.12.6

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

This commit 32c873a660463bc06f921906e1d0bcb48d1b05e0

What is the expected behavior?

Playground should be able to connect to GraphQL servers that don't offer a websocket endpoint (support subscriptions).

Websockets are not part of the formal spec and it's entirely valid to write servers that don't support them.

I would expect to be able to write GQL queries in playground and have them executed against such a GraphQL server.

What is the actual behavior?

It errors rather spectacularly on first load as seen in the screenshots below. The app appears completely broken.

On a refresh the UI loads, but console errors are still abundant. Furthermore the app fails to fetch the schema using an inspection query so there is no typeahead support.

Queries can however be submitted and responses are returned.

What steps may we take to reproduce the behavior?

$ git clone <the repo>
$ yarn
$ cd packages/graphql-playground-react
$ yarn install
$ yarn start

Open http://localhost:3000/ and enter the url of a GraphQL server that doesn't support websockets.

screenshot 2018-02-18 12 44 12 screenshot 2018-02-18 12 44 21
kachkaev commented 6 years ago

I guess I'm facing the same here. After deploying a graphql-yoga with disabled subscriptions and with Playground, I'm seeing 500 in my reverse-proxy logs any time someone opens https://example.com/graphql/. Despite that subscriptions are completely off, Playground is still trying to establish a connection with a socket, which obviously does not exist:

screen shot 2018-04-10 at 09 52 55

I looked at the source code of the deployed Playground to confirm that it's not an issue on the GraphQL Yoga's end. Looks like it is not, because there is no single mentioning of the word subscription on the page. Here is how GraphQLPlayground gets initialized there:

GraphQLPlayground.init(root, {
 "endpoint": "/graphql/",
 "version": "1.4.3",
 "canSaveConfig": false
})

Here is where an exception is originating from, if it helps:

screen shot 2018-04-10 at 10 00 33
kachkaev commented 6 years ago

The same error happens in development – I just have not noticed it earlier since it is not showing up in any logs.

screen shot 2018-04-10 at 10 08 27 screen shot 2018-04-10 at 10 09 22
timsuchanek commented 6 years ago

Thanks for reporting! Is this still happening for you in the latest version? We switched to lazy connection initialization which should make the ws error go away.

cantino commented 5 years ago

I'm also running into this issue. How does one disable the subscriptions endpoint?

yoshiakis commented 5 years ago

@cantino Thank you for reporting! Can you tell me which version of GraphQL Playground you are using?

cantino commented 5 years ago

I was on latest playground and latest graphql.

yoshiakis commented 5 years ago

@cantino Would you provide with the logging information which the browser console shows to know what is exactly happening to you?

cantino commented 5 years ago

image

  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "@sentry/webpack-plugin": "^1.6.2",
    "airbnb-prop-types": "^2.8.1",
    "apollo-cache-inmemory": "1.1.5",
    "apollo-cache-persist": "^0.1.1",
    "apollo-client": "^2.2.0",
    "apollo-link": "^1.0.7",
    "apollo-link-context": "^1.0.3",
    "apollo-link-error": "^1.1.7",
    "apollo-link-http": "^1.3.2",
    "apollo-link-state": "^0.4.2",
    "apollo-upload-client": "^8.0.0",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.5",
    "common-tags": "^1.7.2",
    "file-loader": "^1.1.11",
    "graphql": "^14.3.1",
    "graphql-playground-react": "^1.7.20",
    "ignore-loader": "^0.1.2",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.17.5",
    "lodash-es": "^4.17.4",
    "mdi-react": "^2.1.19",
    "moment": "^2.19",
    "prop-types": "^15.5.10",
    "query-string": "^6.3.0",
    "ramda": "^0.25.0",
    "react": "^16.2.0",
    "react-apollo": "^2.1.9",
    "react-dom": "^16.2.0",
    "react-fout-stager": "^2.0.1",
    "react-helmet": "^5.2.0",
    "react-hot-loader": "^3.1.3",
    "react-markdown": "^3.6.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-sortable-hoc": "^0.6.8",
    "recompose": "^0.30.0",
    "redbox-react": "^1.5.0",
    "webpack": "^4.1.1",
    "worker-loader": "^2.0.0"
  }
yoshiakis commented 5 years ago

@cantino I think it is the bug of apollo-link-ws. Haven't you installed the same or different versions of subscriptions-transport-ws twice? Please check out #600 and this issue.