How to handle Auth in SSR mode? (next nextjs 13)

[franleplant]

cross posting vercel/next.js#53620

Hi! I'm testing urlq to run some pretty basic tests with RSC, SSR and Browser rendering.

I'm using @urql/next as suggested here https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#nextjs

The RSC works pretty easily doing something like

const _res = await getClient().query(query, {});

Behind the scenes I'm getting the auth token from cookies() and sticking it into the urlq request headers to handle auth.

Now, on the client rendering (both SSR and Browser rendering), I am pretty sure it is trying to do the request on both sides (actually I had to turn on and off urlq's suspense mode to see them in action), I get stuck with this auth thing.

When the request is done in the browser, I see it including the auth cookie as you would expect by the rules of the browser, but when the request is done in SSR mode I cannot find a way of getting that cookie / token from the current next.js request and use it in the urlq request I'm trying to make. Of course cookies() doesn't work because this is client code even if it's being rendered in the server.

This seems to be a pretty common use case that I figure it would be pretty straight forward but I cannot figure it out.

Any ideas would be highly appreciated.

[isy]

I'm also highly interested in this issue. When using @urql/next in a Client Component, it runs in SSR, but you can't pass authentication information such as cookies through cookies() or headers().

To circumvent this issue, I've created a custom hook as follows, but I feel it's a very terrible solution.

export function useClientQuery<Data = any, Variables extends AnyVariables = AnyVariables>(args: UseQueryArgs<Variables, Data>) {
  const [isRendered, setIsRendered] = useState(false);

  const pause = useMemo(() => {
    if (args.pause) {
      return !isRendered || args.pause;
    }
    return !isRendered
  }, [isRendered, args.pause])

  const response = useQuery({ ...args, pause })

  useEffect(() => {
    setIsRendered(true);
  } ,[]);


  return response
}

Having options in @urql/next to suppress SSR, or options in Client Component to suppress SSR, would be extremely useful.

[franleplant]

You actually can set ssr:false. I believe is in the client configuration (on mobile now)

[isy]

@franleplant

I couldn't find an option to set ssr:false.

Is this method using the legacy next-urql package's withUrqlClient, or is it a different option?