How to error handle 401 results for react-query in nextjs

[wslp12]

I'm using React Query and prefetching from rsc.

In the normal react(csr), I used useErrorBoundary in the queryClient to return the error true if it was an axiosError, not an error if it was a Zod error.

some think like that

// root Provider
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      useErrorBoundary: (error) => {
        // if zod error
        if (error instanceof ZodError) {
          // some alert show 
          return false;
        }
        // if other error ( like axiosError 401)
         return true;
      },
      onError(err) { // axios Error
        if (err instanceof AxiosError) {
          if (err.response?.status === 401) {
            // redirect 
          }
        }
      },
    },
  },
});

//  useQuery (custom - hook)
const useSomeQuery = () => {
  const { data } = useQuery({
    queryKey: ['some'],
    queryFn: api,
  });

  //  zod schema 
  const result = schema.parse(data);
  return { data: result };
};

// call query
function  Some() { 
// no undefined 
const {data} = useSomeQuery();
}

// using Some Function
function App() {
 return <ErrorBoundary>
  <Suspense>
    <Some />
  </Suspense>
</ErrorBoundary>
}

The reason why I worked like this is because There was no suspenseQuery at the time

Let's get back to the point
Currently, I am using nextjs 14 and using react-query v5.

Prefetching method is being used as per document.

Below is the page(rsc) where you prepetching

export default function Page() {
const queryClient = new QueryClient({
    queryCache: new QueryCache({
      onError: () => redirect("/"),
    }),
  });

  await queryClient.prefetchQuery({
    queryKey: ["some"],
    queryFn: api,
  });
return <Hydrate ...><SomeComponent /></Hydrate>
}

// queryFn api
async function api() {
  const result = await fetch(somePath, {
    method: "GET",
    next: {
      revalidate: 20,
    },
  });

  if (result.status === 401) {
    // 401 error throw 
    throw new FetchError(result.status, "fetch error 401");
  }

  const jsonData = await result.json();
  return jsonData;
}

The problem above is that redirect does not work.
( client component only showing zod Error, this is perfectly ok because api response undefined)
My api successfully throw an exception to 401, and the queryClient in page.tsx(rsc) successfully caught the error, and now all it has to do is redirect

redirect is not working and I don't know why..
It's not a solution to the above problem

I wonder how the server component should handle the redirection for 401..

call redirect
result error

Error: NEXT_REDIRECT
    at getRedirectError (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:11039:19)
    at Module.redirect (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:11049:11)
    at Object.onError (/some-path/.next/server/chunks/[root of the server]__435afd._.js:1087:253)
    at Object.onError (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:8810:45)
    at reject (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:8421:29)
    at /some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:8462:17
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  digest: 'NEXT_REDIRECT;replace;/;false',
  mutableCookies: p {
    _parsed: Map(2) { 'ac' => [Object], 'ar' => [Object] },
    _headers: HeadersList {
      cookies: [Array],
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    }
  }
}
Error: NEXT_REDIRECT
    at getRedirectError (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:11039:19)
    at Module.redirect (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:11049:11)
    at Object.onError (/some-path/.next/server/chunks/[root of the server]__435afd._.js:1087:253)
    at Object.onError (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:8810:45)
    at reject (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:8421:29)
    at /some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:8462:17
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  digest: 'NEXT_REDIRECT;replace;/;false',
  mutableCookies: p {
    _parsed: Map(2) { 'ac' => [Object], 'ar' => [Object] },
    _headers: HeadersList {
      cookies: [Array],
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    }
  }
}
 ⨯ node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect.js (52:19) @ getRedirectError
 ⨯ unhandledRejection: Error: NEXT_REDIRECT
    at getRedirectError (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:11039:19)
    at Module.redirect (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:11049:11)
    at Object.onError (/some-path/.next/server/chunks/[root of the server]__435afd._.js:1087:253)
    at Object.onError (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:8810:45)
    at reject (/some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:8421:29)
    at /some-path/.next/server/chunks/node_modules__pnpm_a85090._.js:8462:17
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  digest: 'NEXT_REDIRECT;replace;/;false',
  mutableCookies: p {
    _parsed: Map(2) { 'ac' => [Object], 'ar' => [Object] },
    _headers: HeadersList {
      cookies: [Array],
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    }
  }
}

[TkDodo]

not sure what this has to do with react-query? Wouldn't you get the same result if you did:

try {
  const data = await api()
} catch {
  redirect("/")
}

idk, maybe redirect is just not something you can do within a server component? But that's really a next specific question

[TkDodo]

seem like redirect should work though:

• https://nextjs.org/docs/app/api-reference/functions/redirect#example

please still try your example if it is reproducible without react query

[wslp12]

yes your right

import { redirect } from "next/navigation";

async function fetchWrapper() {
  const apiResult = await fetch("https://localhost/api/some", {
    method: "GET",
  });
  console.log(apiResult.status); // 401

  if (apiResult.status === 401) {
    throw new Error("401");
  }
  const data = await apiResult.json();
  return data;
}

export default async function Page() {
  try {
    const data = await fetchWrapper();
  } catch (error) {
    //  work  fine
    redirect("/");
  }

  return <main>now showing.</main>;
}

vercel/next.js#59227 (comment)
I got the answer above

So the bottom line is
Within the onError function of tanstack/query
Something in the redirection interfered with the action
I'm checking whether it's an error of zod or something else

As you say, tanstack/query just seems to carry the error.
I will continue to try to reproduce the error
Thank you so much for your answer

[TkDodo]

ah right, so what they want is to have an error thrown during rendering. In that case, I think this should work:

await queryClient.fetchQuery({
  queryKey: ["some"],
  queryFn: async () => {
    try {
      return await api()
    } catch {
      redirect('/')
    }
  }
})

the difference here is that redirect throws, which will put the query in error state. prefetchQuery catches and discards errors, but fetchQuery does not, so the error from redirect would be re-thrown during rendering by next.

[wslp12]

oh. that so awesome !