Next js react query v5 useSuspenseQuery, 401 unathorized

Question

I want to use useSuspenseQuery along with next js so that I can take advantage of the built-in React feature.

But when using useSuspenseQuery, it gives an error img

query

const { data, isLoading } = useSuspenseQuery({
        queryKey: ["user"],
        queryFn: () => {
            return (userService.getUserById(Number(id)))},
    });

axios interceptor

axiosWithAuth.interceptors.response.use(
    (config) => config,
    async (error) => {
        const originalRequest = error.config;

        if (
            (error?.response?.status === 401 ||
                errorCatch(error) === "jwt expried" ||
                errorCatch(error) === "jwt must be provided") &&
            error.config &&
            !error.config._isRetry
        ) {
            originalRequest._isRetry = true;
            try {
                const { accessToken } = await authService.getNewTokens();

                originalRequest.headers[
                    "Authorization"
                ] = `Bearer ${accessToken}`;
                
                return axiosWithAuth.request(originalRequest);
            } catch (error) {
                if (errorCatch(error) === "jwt expired") removeFromStorage();
            }
        }

        throw error;
    }
);

query with axios

  async getUserById(userId: number) {
        const response = await axiosWithAuth<IUserTg>({
            url: API_URL.user(`/${userId}`),
            method: "GET",
        });
        return response.data;
    }

When switching between pages (when routing), it does not give such an error, but if you refresh the page itself, it will give

if you use use Query, then everything works as it should (but I need useSuspenseQuery) if you disable authorization verification on the server, then everything works fine, without errors (but I need the request to be authorized)

Nicholas Dullam · Accepted Answer · 2025-02-05 18:40:00Z

0

This is likely due to Next attempting to pre-render the Suspense boundary, despite the useSuspenseQuery falling under a client component (https://nextjs.org/docs/app/building-your-application/rendering/client-components) -- since the pre-render attempt is missing the client's headers/cookies, it is presumably failing your authorization.

Some notes on Suspense behavior with useSuspenseQuery can be found here: https://tanstack.com/query/latest/docs/framework/react/guides/ssr#a-quick-note-on-suspense.

answered Feb 5 at 18:40

Nicholas Dullam

5502 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next js react query v5 useSuspenseQuery, 401 unathorized

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related