How to get referer on backend in context

[paymog]

I'm creating a websocket client using NextJS with the following:

    createClient({
        url: settings?.graphql?.wsUri,
        retryAttempts: 5,
        // more or less copied directly from https://github.com/enisdenjo/graphql-ws#retry-strategy
        retryWait: async () => {
          await waitForHealthCheck();

          // after the server becomes ready, wait for a second + random 100 - 200 ms timeout
          // (avoid DDoSing) and try connecting again, but only in production
          const delay = isProduction ? 100 + Math.random() * 100 : 10;
          await new Promise((resolve) => setTimeout(resolve, delay));
        },
     })

and on the backend I'm making a websocket server like so (some code omitted for general clarity):

useServer(
    {
      schema,
      context: async (ctx, msg, args) => {
        const context = {};

        if (ctx.extra.request.headers.referer) {
          console.log('found referer for websocket', ctx.extra.request.headers.referer);
        }

        const cookies = ctx.extra.request.headers.cookie?.split(';') || [];

        for (let i = 0; i < cookies.length; i++) {
          const cookie = cookies[i];
          const [key, value] = cookie.trim().split('=');
          if (key === JWT_COOKIE_KEY) {
            context.user = await getUserWithToken({ token: value });
            break;
          }
        }

        return context;
      },
    },
    wsServer,
  );

I'm finding that the backend never logs found referer for websocket and when I inspect the socket creation in the browser I see that no referer is being sent as a header:

However, I do see a referer being sent as a header for the regular graphql requests:

Is there a way to configure the client to send the referer as a header?

[enisdenjo]

Setting custom headers is not possible in browsers.

You can do so in Node though - for that you can consult the "Client usage in Node with custom headers" recipe.

[paymog]

Got it, thanks for the info and super quick response!