apollo-client-nextjs: useSuspenseQuery not sending cookies on Server Side query

We have encountered the same issue and it is so frustrating. Basically it blocks SSR support for hooks (unless we use a really smart but still hacky solution above). I have created a discussion in the Next.js repo, hopefully it will gain some attention.

pass it as props to a Client Component (your ApolloProviderWrapper)

Forgive me if I’m missing something obvious, but if you have an HTTP-only cookie that holds a sensitive credential, and then pass it to a client component, don’t you risk exposing it to client-side code and introducing an XSS vulnerability?

Is the thinking here that unless you’re actually rendering the cookie value it shouldn’t show up in any part of the browser payload? Edit: looks like props passed to client components can show up in the browser payload, even if they’re not used directly:

self.__next_f.push([1,"c:I{\"id\":\"(app-client)/./src/app/org/Name.tsx\",\"chunks\":[\"app/org/page:static/chunks/app/org/page.js\"],\"name\":\"\",\"async\":false}\nb:[[\"$\",\"h1\",null,{\"children\":[\"Hello, \",\"Michael Bluth\",\"!\"]}],[\"$\",\"$Lc\",null,{\"secret\":\"MY_SUPER_SECRET_VALUE\"}]]\n"])

Here’s what I did, make a new env variable name it anything you’d like but don’t start it with “NEXT_PUBLIC_” (otherwise that will be bundled in browser) for instance I chose : ENCRYPTION_KEY="12345678"

Now before passing your cookies to a child client component encrypt it using that key in your layout file, in your client component (ApolloWrapper) decrypt it only if typeof window === "undefined" and attach it.

Since no one will have access to your encryption key all your cookies will be encrypted and decrypted safely on the server side, but remember to add some random data into your object before encryption otherwise it might still be easy to crack.

It’s not the best we could do but it’s probably the best we can do, if NextJS team added some global request object for the server side, we didn’t have to deal with all these non-sense.

That’s incredibly hacky, but also a great solution - well done!

import { setContext } from '@apollo/client/link/context';

const forwardCookieLink = setContext(async () => {
  return import('next/headers').then(({ cookies }) => {
    return {
      headers: {
        cookie: cookies()
          .getAll()
          .map(({ name, value }) => `${name}=${value}`)
          .join(';'),
      },
    };
  });
});

return new NextSSRApolloClient({
    // use the `NextSSRInMemoryCache`, not the normal `InMemoryCache`
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            // in a SSR environment, if you use multipart features like
            // @defer, you need to decide how to handle these.
            // This strips all interfaces with a `@defer` directive from your queries.
            new SSRMultipartLink({
              stripDefer: true,
            }),
            forwardCookieLink,
            httpLink,
          ])
        : httpLink,
  });

@rval I’d love to give you a better answer, but this seems like an architectural oversight on the side of Next.js - we won’t be able to give you any better advice until they come up with a better way of doing this.

Maybe open an issue over there, and if they come up with something better, please report back here? I’d love to hear about that 😃

pass it as props to a Client Component (your ApolloProviderWrapper)

Forgive me if I’m missing something obvious, but if you have an HTTP-only cookie that holds a sensitive credential, and then pass it to a client component, don’t you risk exposing it to client-side code and introducing an XSS vulnerability?

Is the thinking here that unless you’re actually rendering the cookie value it shouldn’t show up in any part of the browser payload? Edit: looks like props passed to client components can show up in the browser payload, even if they’re not used directly:

self.__next_f.push([1,"c:I{\"id\":\"(app-client)/./src/app/org/Name.tsx\",\"chunks\":[\"app/org/page:static/chunks/app/org/page.js\"],\"name\":\"\",\"async\":false}\nb:[[\"$\",\"h1\",null,{\"children\":[\"Hello, \",\"Michael Bluth\",\"!\"]}],[\"$\",\"$Lc\",null,{\"secret\":\"MY_SUPER_SECRET_VALUE\"}]]\n"])