React-Query v3 to Latest Version Migration: Issues Encountered

[mohamad-msalme]

Issue 1: Handling 401 Error in useSuspenseQuery
I'm in the process of upgrading from React-Query v3 to the latest version. In my application, I'm using useSuspenseQuery to handle data fetching, particularly for authentication checks. However, I encountered an issue regarding error handling, specifically with HTTP status code 401 (Unauthorized).

Previously, in React-Query v3, I could utilize useErrorBoundary to catch errors. However, this functionality is not available in the latest version. Instead, I've implemented an ErrorPage component to handle such errors and redirect the user to the login page using Navigate from react-router-dom.

While this solution works, in development mode, I'm seeing the red error screen indicating an uncaught error, even though the redirection to the login page is successful. I'm unsure if this issue will persist in production.

Issue2:: useSuspenseQuery Not Refreshing Data After Logout
Description:
After logging out and attempting to access a protected route, which redirects to the login page upon authentication failure, subsequent login attempts result in stale data being fetched. It appears that useSuspenseQuery is caching the previous failed authentication result, leading to errors even after successful login.

Steps to Reproduce:
Log out from the application.
Attempt to access a protected route, triggering an authentication request.
Upon authentication failure, get redirected to the login page.
Log in successfully.
Despite successful login, encounter errors due to stale data fetched by useSuspenseQuery.

what I want to achive I want useSusspanseQuery to hit the backend for every time without using the cached data

// ProtectedRoute.tsx
import React from 'react';
import { IsAuthQuery } from 'services/isAuth';
import { useSuspenseQuery } from '@tanstack/react-query';

interface ProtectedRouteProps {
  authenticatedElement: React.ReactNode;
}

export const ProtectedRoute = ({
  authenticatedElement,
}: ProtectedRouteProps) => {
   useSuspenseQuery(IsAuthQuery());
  return authenticatedElement ;
};

// ErrorPage.tsx
import React from 'react';
import { isAxiosError } from 'axios';
import { Navigate, useRouteError } from 'react-router-dom';
import { Typography, Container, Grid, Button } from '@mui/material';

const ErrorPage = () => {
  const _error = useRouteError();
  let message = 'Something went wrong';
  if (isAxiosError<{ errors: { message: string }[] }>(_error)) {
    if (_error.response?.status === 401) {
      return <Navigate to={'/login'} />;
    }
    message = _error.response?.data.errors?.[0]?.message ?? message;
  }
  
  // Render error page UI
};

// Routes.ts
import React from 'react'

import { AuthLayout } from 'pages/auth'
import { ProtectedRoute } from 'providers/ProtectedRoute'
import { PROTECTED_PAGES } from './ProtectedPages'
import { DashboardLayout } from 'pages/dashboard/Layout'
import { Navigate, createBrowserRouter } from 'react-router-dom'

import SignIn from 'pages/auth/pages/sign-in'
import SignUp from 'pages/auth/pages/sign-up'
import ErrorPage from 'pages/ErrorPage'
import ForgetPassword from 'pages/auth/pages/forget-password'

export const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <ProtectedRoute
        authenticatedElement={<Navigate to={'/home/arrivals'} />}
      />
    ),
    errorElement: <ErrorPage />
  },
  {
    element: <AuthLayout />,
    children: [
      {
        path: 'login',
        element: <SignIn />
      },
      {
        path: 'signup',
        element: <SignUp />
      },
      {
        path: 'forgetpassword',
        element: <ForgetPassword />
      }
    ]
  },
  {
    element: (
      <ProtectedRoute
        authenticatedElement={<DashboardLayout />}
      />
    ),
   errorElement: <ErrorPage />,
    children: PROTECTED_PAGES.map(({ path, loader, element, children }) => ({
      path,
      loader,
      element: element,
      children: children
    }))
  }
])

[TkDodo]

Previously, in React-Query v3, I could utilize useErrorBoundary to catch errors. However, this functionality is not available in the latest version.

It was just renamed to throwOnError. Please read the migration guides

It appears that useSuspenseQuery is caching the previous failed authentication result

Just as with normal queries, resolved Promises will be cached and rejected Promises will lead to an error. Caching wise, there is no difference between suspense and non-suspense querying

[mohamad-msalme]

thank you in advance @TkDodo