Hasura subscriptions and urql example

[Svarto]

Hi all, just sharing below a working example of urql and hasura subscriptions. I couldn't find this documented anywhere and an open discussion on the hasura repo looking for one. So thought I would just share it here for documentation and reference if anyone comes after me wanting to set this up!

import { SubscriptionClient } from "subscriptions-transport-ws";
import {
  createClient,
  dedupExchange,
  fetchExchange,
  subscriptionExchange,
} from "urql";

const subscriptionClient = new SubscriptionClient(wsUrl, {
  reconnect: true,
  lazy: true,
  connectionParams: awaitJWT,
});

export const client = createClient({
  exchanges: [
    devtoolsExchange,
    dedupExchange,
    CacheExchange,
    retryExchange(retryOptions),
    fetchExchange,
    subscriptionExchange({
      forwardSubscription(operation) {
        return subscriptionClient.request(operation);
      },
    }),
  ],
  url: graphqlUrl,
  fetchOptions: () => {
    const token = auth.getJWTToken();
    return {
      headers: { authorization: token ? `Bearer ${token}` : "" },
    };
  },
});

A couple of gotchas I worked through:

1. There is a bug in hasura permissions for subscriptions where the hasura console actually tries to access a subscription with the x-hasura-role PUBLIC instead of USER, even if specified. Opening up permissions for the public user, even with checking x-hasura-user-id for permission solves this. On the client side I didn't encounter this so it is a weird one. Error message was:
   {
   "extensions": {
   "path": "$.selectionSet.user_unread_notifications",
   "code": "validation-failed"
   },
   "message": "field "user_unread_notifications" not found in type: 'subscription_root'"
   }
2. For me, the JWT token was resolving to null on app start and then updated to the correct JWT token. This meant that a subscription request was sent out before the JWT token was done loading, this created an error and it was patchy if the connection could be recovered. That is why I wrote the below awaitJWT function that returns a promise until the JWT token is fully "resolved" and available.

const awaitJWT = async () => {
  return await new Promise((resolve, reject) => {
    let timeWas = new Date();
    let wait = setInterval(() => {
      if (auth.getJWTToken()) {
        clearInterval(wait);
        resolve({
          headers: {
            authorization: `Bearer ${auth.getJWTToken()}`,
          },
        });
      } else if (new Date() - timeWas > 10000) {
        // Abort if JWT token is not resolved within 10 seconds of app start
        clearInterval(wait);
        reject();
      }
    }, 1000);
  });
};

[JoviDeCroock]

Hey,

Great work on integrating Hasura! 🙌

As a tip you can avoid this awaitJWT scenario by using something like the authExchange or if your use case is smaller an asyncFetchOptionsExchange.

[jgoux]

Hey @JoviDeCroock, as far as I understand, the authExchange isn't suitable for dealing with subscriptions right? Or could this configuration could be simplified : https://gist.github.com/jgoux/168c6d5dfbe9fb02ad5b7190a5895e24 ?

[JoviDeCroock]

That looks all right, the ws-client is initialized in advance hence why we don't really have control over the connectionParams 😅 for safety I'd wrap your createClient and createWSClient in a useMemo else it will run if there's a top-down render 😅

[jgoux]

Nice catch, thanks! Have a great week-end. ;)

[beebase]

I'm getting an error with this example snippet.

"subscriptions are not supported over HTTP, use websockets instead"

Hasura token authenication is working ok, it's the hasura server that's complaining.
With apollo client (using same headers) I've got subscriptions working, so I'm not sure what could be causing this error.

urql.js (create client)

import { createStorage } from "@/js/localStorage"
export const sToken = createStorage("urql-sToken", "")
sToken.useLocalStorage()
import { SubscriptionClient } from "subscriptions-transport-ws";
import { devtoolsExchange } from '@urql/devtools';
import {
  createClient,
  dedupExchange,
  fetchExchange,
  subscriptionExchange,
} from "@urql/svelte";
import { GQL_WS_HOST, GQL_HTTP_HOST } from "@/js/constants"
import { get } from "svelte/store"

const f = "urql.js"
const token = get(sToken) || ""  // from svelte local storage
const oHeaders = { authorization: token ? `Bearer ${token}` : "" }
console.log(f, 'oHeaders', oHeaders)
const subscriptionClient = new SubscriptionClient(GQL_WS_HOST, {
  reconnect: true,
  lazy: true,
  connectionParams: {
    headers: oHeaders
  },
});

export const urqlClient = createClient({
  exchanges: [
    devtoolsExchange,
    dedupExchange,
    // CacheExchange,
    // retryExchange(retryOptions),
    fetchExchange,
    subscriptionExchange({
      forwardSubscription(operation) {
        return subscriptionClient.request(operation);
      },
    }),
  ],
  url: GQL_HTTP_HOST,
  fetchOptions: () => {
    return {
      headers: oHeaders
    };
  },
});

client call

import { urqlClient } from "@/js/urql"
import { pipe, subscribe } from 'wonka';

  pipe(
    urqlClient.query(sSubscribeUser, { id: _idSessionUser }),
    subscribe(result => {
      console.log('result', result); 
    })
  );

client log

oHeaders:{authorization: "Bearer 9be5cfa4-df9d-4cec-a1bc-a162f8739f9d"}
...
result:
 data: undefined
 error.message: "[GraphQL] subscriptions are not supported over HTTP, use websockets instead"

[JoviDeCroock]

You have to use urqlClient.executeSubscription

[beebase]

Is there an example call somewhere in the docs?

[JoviDeCroock]

Nope that is indeed missing but it should generally be good to just replace query with executeSubscription or subscription https://formidable.com/open-source/urql/docs/api/core/#clientsubscription

Query is used for query operations.

import { urqlClient } from "@/js/urql"
import { pipe, subscribe } from 'wonka';

  pipe(
    urqlClient.subscription(sSubscribeUser, { id: _idSessionUser }),
    subscribe(result => {
      console.log('result', result); 
    })
  );

[beebase]

urqlClient.subscription works for me (svelte environment)

urqlClient.executeSubscription gave me
svelte.js:698 Uncaught (in promise) TypeError: Cannot read property 'toString' of undefined

Thanks for your pointers!