adverse-sapphire

How to do a correct redirect using queryOptions when the api returns an error i.e 404

On first image i try to catch the error 404 and redirect but I it will do an infinite loop. Then i try to remove that approach and instead check the user on the _dashboard loader and throw a redirect when user is null. The problem with 2nd approach is it doesn't trigger it. The error from the response will be triggered first (3rd image attached:tanner:)

8 Replies

other-emerald•5mo ago

don't throw a redirect in a component instead, use navigate from useNavigate

adverse-sapphireOP•5mo ago

export const Route = createFileRoute("/_dashboard")({
  loader: async ({ context }) => {
    const { data: userData } = await context.queryClient.fetchQuery(useGetCurrentUserQuery());
    const { data: servicesData } = await context.queryClient.fetchQuery(useGetAllServicesQuery());

    const navigate = useNavigate();

    if (!userData.success) {
      navigate({ to: "/" });
    }

    return {
      user: userData.user,
      services: servicesData.services,
    };
  },
});

export const Route = createFileRoute("/_dashboard")({
  loader: async ({ context }) => {
    const { data: userData } = await context.queryClient.fetchQuery(useGetCurrentUserQuery());
    const { data: servicesData } = await context.queryClient.fetchQuery(useGetAllServicesQuery());

    const navigate = useNavigate();

    if (!userData.success) {
      navigate({ to: "/" });
    }

    return {
      user: userData.user,
      services: servicesData.services,
    };
  },
});

adverse-sapphireOP•5mo ago

I updated my code. but the error component was triggered before it can redirect

other-emerald•5mo ago

please provide a complete minimal example, e.g. by forking one of the existing stackblitz examples

xenial-black•5mo ago

return <Redirect to=“/“ /> should work

adverse-sapphireOP•5mo ago

I tried to use the same as this one. https://stackblitz.com/github/tanstack/router/tree/main/examples/react/basic-react-query-file-based?embed=1&theme=dark&preset=node&file=src/routes/__root.tsx. When failed to fetch or returns 404 from the server. It will redirecto index page not return a PostNotFoundError.

StackBlitz

Router Basic React Query File Based Example - StackBlitz

Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz

other-emerald•5mo ago

can you please provide your failing code?

adverse-sapphireOP•5mo ago

 const token = req.cookies[cookieName];

  let returnResponse = {
    success: false,
    message: 'No token found',
    user: null,
  };

  if (!token) {
    return res.status(404).json(returnResponse);
  }

 const token = req.cookies[cookieName];

  let returnResponse = {
    success: false,
    message: 'No token found',
    user: null,
  };

  if (!token) {
    return res.status(404).json(returnResponse);
  }

  if (!user) {
        returnResponse.message = 'User not found';
        return res.status(404).json(returnResponse);
      }

  if (!user) {
        returnResponse.message = 'User not found';
        return res.status(404).json(returnResponse);
      }

I am using express as backend. If there is no token or no user found in the database when loading the app. It should redirect to index page. does this route notFoundComponent will be triggerd by return not found from route loader and can use <Navigate /> ?

notFoundComponent: () => {
    return <p>This setting page doesn't exist!</p>
  },

notFoundComponent: () => {
    return <p>This setting page doesn't exist!</p>
  },

Gaming

Programming

How to do a correct redirect using queryOptions when the api returns an error i.e 404

Did you find this page helpful?