[question] example config urql client with subscription connections?

[beebase]

I'm trying to set up a urql client that connects to hasura server via http and websocket (subscriptions).
Is there any working example somewhere?
Thanks.

[coco98]

Moving this to our github discussions page for further conversations! (@praveenweb have you come across any examples?)

[Svarto]

Looking for the same, @beebase did you get anything working?

[beebase]

No, haven't found anything sofar.

[Svarto]

@beebase alright I got it to work, see below for a working example with hasura subscriptions and urql:

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) {
        clearInterval(wait);
        reject();
      }
    }, 1000);
  });
};

[beebase]

Thanks so much for this. I turned to (bloated) apollo client but I prefer urql.

1. I noticed this 'public" thing too in the client. Was driving me nuts cause I couldn't find any error log.
2. I also had to use an await for getAuthToken() for same reason. However, my production build (snowpack, vite) complained about await not supported on root level. (Totally different story)

Anyway thanks for the snippet.👍

[shilohchis]

is there any update for this? subscriptions-transport-ws will not maintain anymore by apollo and soon they'll archive it
apollographql/apollo-server#6058

[DoisKoh]

Yea, I'm having trouble getting this to work as well (svelte + sveltekit + hasura + urql + graphql-ws)

[EternalDeiwos]

I am still looking for a solution for hasura + urql + graphql-ws. Anyone got this working?