How to access cookies in Next.js when using SSR

[linucks]

I'm using the with-next example from the github repository.

I need to query a graphql endpoint (Wordpress in this. case) where I'm logged in. I therefore need to attach credentials to the request. I've installed js-cookie and have amended the code in app/non-rsc/layout.tsx to include the code to get the cookie:

'use client';

import Cookies from 'js-cookie';
import { useMemo } from 'react';
import {
  UrqlProvider,
  ssrExchange,
  cacheExchange,
  fetchExchange,
  createClient,
} from '@urql/next';

export default function Layout({ children }: React.PropsWithChildren) {
  const token = Cookies.get('wp-auth-token');
  const [client, ssr] = useMemo(() => {
    const ssr = ssrExchange({
      isClient: typeof window !== 'undefined',
    });
    const client = createClient({
      url: 'http://mywordpress/wp/index.php?graphql,
      exchanges: [cacheExchange, ssr, fetchExchange],
      suspense: true,
     fetchOptions: () => {
        return {
          headers: { authorization: token ? `Bearer ${token}` : '' },
          credentials: 'include'
        };
      },
    });

    return [client, ssr];
  }, []);

  return (
    <UrqlProvider client={client} ssr={ssr}>
      {children}
    </UrqlProvider>
  );
}

When this code runs on the server as part of the SSG run, the token is undefined and I don't get the authenticated content.

I've tried various ways to get the token on the server, but in next getting cookies is an async operation, so at best I get a promise I can't resolve as Layout.tsx is a client component and so not async.

Any suggestions would be greatly appreciated.