prefetchQuery need access to session

[jinsley8]

I am prefetching data with Next.js pages router but the query functions need access to the session. Should I be passing the session to the queries or can the queryClient get access somehow?

Each query function calls an endpoint which results in a 401 error if there is no session so the prefetch results in an error then the query on the client has access to the session and finally loads the data.

import { GetServerSideProps } from 'next';
import { getServerSession } from 'next-auth/next';
import { useSession } from 'next-auth/react';

import { QueryClient, dehydrate } from '@tanstack/react-query';

export const getServerSideProps: GetServerSideProps = async (ctx) => {
    const queryClient = new QueryClient();
    const session = await getServerSession(ctx.req, ctx.res, authOptions);

    if (session) {
        // Session is available here <--------------
        await queryClient.prefetchQuery(['latest-confirmed-tasks'], getLatestConfirmedTasks);
        await queryClient.prefetchQuery(['latest-pending-tasks'], getLatestPendingTasks);
        await queryClient.prefetchQuery(['latest-cancelled-tasks'], getLatestCancelledTasks);
    }

    const extraProps = {
        session,
        dehydratedState: dehydrate(queryClient),
    };

    return await checkUserSessionProtected(ctx, extraProps, session);
};

// api/tasks/latest
// called by query functions

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    switch (req.method) {
        case 'GET':
            try {
                const session = await getServerSession(req, res, authOptions);
                
                // Fails here when called using prefetchQuery <--------------
                if (!session) {
                    return res.status(401).json({ error: 'You must be authenticated. Please sign in.' });
                }

              ....
            } catch (err) {
                return res.status(500).json({ error: 'Error finding tasks' });
            }

        default:
            res.status(405).send({ error: 'Method not allowed' });
            break;
    }
}

[nmaties]

@jinsley8 did you ever fix this? I have the same issue.

I logged the req.headers and req.cookies in the getServerSideProps and they are different than the ones from the route itself.

Basically, the cookies and the headers are not passed at all.

[CodeMarcin]

I got same issue, and fix that.

You must provide a header to server side fetch.

I write something like this:

helper for wretch utils/wretch.ts

import { headers } from "next/headers";
import wretch from "wretch";

export const wretchWithHeader = async () =>
  wretch(`${process.env.BASE_PATH}`)
    .headers(headers()) //<- this is important
    .errorType("json")
    .resolve((r) => r.json());

now in my case: app/[locale]/userprofile/page.tsx

 await queryClient.prefetchQuery({
    queryKey: ["profile", id],
    queryFn: async () =>
      (await wretchWithHeader()).get(`/api/user/${id}/profile`),
  });

and in client component: components/profile/Profile.tsx

const { data } = useQuery({
  queryKey: ["profile", id],
  queryFn: async () => await wretch().get(`/api/user/${id}/profile`).json(),
});

Note that in client component i just use wretch not wretch wretchWithHeader because is client side fetch so the header is allerdy sent.

In api file you must pass AuthOptions to getServerSession:

import { authOptions} from "@/utils/auth";
 const session = await getServerSession(authOptions);

it works me on localhost, but someone write "Using headers: headers() might give you some error when deploying to vercel. I got this error ReadonlyHeadersError: Headers cannot be modified.."

i can't deploy this code to vercel right now but... i think somethink like this will work on prod:

import { headers } from "next/headers";
import wretch from "wretch";

export const wretchWithHeader = async () => {
const headersList = headers();
const cookie = headersList.get('cookie');
return   wretch(`${process.env.BASE_PATH}`)
    .headers( {'Cookie': cookie})
    .errorType("json")
    .resolve((r) => r.json());
}

or similar

[nmaties]

Thank you @CodeMarcin!
I think that the guys from TanStack will come up with their solution for this but in the meantime what you did works great.

[jinsley8]

I figured it out, I added withCredentials to the axios instance then passed the cookie to the request on server side.

It now passes the cookie with the request from the server to API route.

// apiClient.ts
const baseConfig: AxiosRequestConfig = {
    baseURL: API_DOMAIN,
    withCredentials: true,
    headers: {
        'Content-Type': 'application/json',
    },
};

const apiClient = axios.create(baseConfig);

function getAuthSession(
    ...args:
        | [GetServerSidePropsContext['req'], GetServerSidePropsContext['res']]
        | [NextApiRequest, NextApiResponse]
        | []
) {
    return getServerSession(...args, authOptions);
};

// page.ts
export const getServerSideProps: GetServerSideProps = async (ctx) => {
    const queryClient = new QueryClient();
    const session = await getAuthSession(ctx.req, ctx.res);

    if (session) {
        if (ctx.req.headers.cookie) {
            // pass cookie
            apiClient.defaults.headers.Cookie = ctx.req.headers.cookie;
        }

        await Promise.all([
            queryClient.prefetchQuery(queries.tasks.all(0, { field: 'createdAt', sort: 'desc' })),
            queryClient.prefetchQuery(queries.notifications.all(session.user.id)),
        ]);
    }

    const extraProps = {
        session,
        dehydratedState: dehydrate(queryClient),
    };

    // this is just a custom role checker
    return await checkUserSessionProtected(ctx, extraProps, session);
};