GraphiQL Explorer error message for subscriptions after switching to graphql-ws

[fabiangfd]

Hi,

I am using the latest Ariadne 0.19 and just switched from the deprecated subscriptions-transport-ws protocol to graphql-ws for my GraphQL subscriptions. The change went smoothly for my client application, but now GraphiQL explorer displays the following error message, when I try to test a subscription via GraphiQL:

{
  "errors": [
    {
      "message": "Your GraphiQL createFetcher is not properly configured for websocket subscriptions yet. Please provide subscriptionUrl, wsClient or legacyClient option first.",
      "stack": "Error: Your GraphiQL createFetcher is not properly configured for websocket subscriptions yet. Please provide subscriptionUrl, wsClient or legacyClient option first.\n    at https://unpkg.com/graphiql/graphiql.min.js:2:737044\n    at https://unpkg.com/graphiql/graphiql.min.js:2:567238\n    at onClick (https://unpkg.com/graphiql/graphiql.min.js:2:638040)\n    at HTMLUnknownElement.callCallback (https://unpkg.com/react-dom@17/umd/react-dom.development.js:3942:16)\n    at Object.invokeGuardedCallbackDev (https://unpkg.com/react-dom@17/umd/react-dom.development.js:3991:18)\n    at invokeGuardedCallback (https://unpkg.com/react-dom@17/umd/react-dom.development.js:4053:33)\n    at invokeGuardedCallbackAndCatchFirstError (https://unpkg.com/react-dom@17/umd/react-dom.development.js:4067:27)\n    at executeDispatch (https://unpkg.com/react-dom@17/umd/react-dom.development.js:8273:5)\n    at processDispatchQueueItemsInOrder (https://unpkg.com/react-dom@17/umd/react-dom.development.js:8305:9)\n    at processDispatchQueue (https://unpkg.com/react-dom@17/umd/react-dom.development.js:8318:7)"
    }
  ]
}

Here is how I initialize my GraphQL ASGI-App:

from ariadne.asgi import GraphQL
from ariadne.asgi.handlers import GraphQLTransportWSHandler
from ariadne.explorer import ExplorerGraphiQL

graphql = GraphQL(
    schema,
    debug=True,
    context_value=get_context_value,
    websocket_handler=GraphQLTransportWSHandler(),
    explorer=ExplorerGraphiQL(title="My API Explorer", explorer_plugin=True),
)

[kevinvalk]

Same here, but I do not think it is due to GraphQLTransportWSHandler because when I switch to ExplorerApollo or Playground it all works wonderful. So maybe just configuration of GraphiQL?

[iblislin]

A quick hack:

--- ariadne/explorer/templates/graphiql.html.orig
+++ ariadne/explorer/templates/graphiql.html
@@ -70,6 +70,7 @@
     <script>
       var fetcher = GraphiQL.createFetcher({
         url: window.location.href,
+        subscriptionUrl: `${(window.location.protocol === 'https:' ? 'wss' : 'ws')}://${window.location.host}${window.location.pathname}`,
       });

       function AriadneGraphiQL() {