Using errorElement with react-query

[robcaldecott]

I am trying this library with react-query to see if it is possible to move the loading and error states of a query component into the router in order to simplify the code (by easily sharing pending/error components across the app.)

While the pendingElement works a treat I just cannot get errorElement to work. In my example I am calling fetchQuery in the route loader which is calling fetch and throwing an exception, but the errorElement is never triggered.

Either this is a bug or I am missing something here.

https://codesandbox.io/s/kind-smoke-hubvm7?file=/src/App.tsx:2066-2076

In this example just click on a post. This will throw an exception but it does not cause the error to render and instead just attempts to render the actual element instead.

I guess I'm looking for the best practices here when using react-query. Should we stick to handling errors in our query components? Should we handing the pending state in both the router and our components to cover all bases?

Any here is some code:

import "./styles.css";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import {
  ReactLocation,
  Router,
  Outlet,
  MakeGenerics,
  useMatch,
  Link
} from "@tanstack/react-location";

type Post = {
  id: string;
  title: string;
  body: string;
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchIntervalInBackground: false,
      retry: false
    }
  }
});

const location = new ReactLocation<
  MakeGenerics<{ Params: { postId: string } }>
>();

function Posts() {
  const query = useQuery<Post[]>(["posts"], () =>
    fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
      response.json()
    )
  );

  return (
    <>
      {query.isLoading && <div>Loading...</div>}
      {query.isSuccess && (
        <ul>
          {query.data.map((post) => (
            <li key={post.id}>
              <Link to={`/${post.id}`}>{post.title}</Link>
            </li>
          ))}
        </ul>
      )}
    </>
  );
}

async function fetchPost(postId: string) {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}`
  );
  // Spoof an error
  throw response;

  return response.json();
}

function PostDetails() {
  const {
    params: { postId }
  } = useMatch();
  const query = useQuery<Post, Response>(["post", postId], () =>
    fetchPost(postId)
  );

  return (
    <>
      <Link to="/">Home</Link>
      {query.isSuccess && <div>{query.data.body}</div>}
    </>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router
        location={location}
        routes={[
          {
            path: "/",
            element: <Posts />
          },
          {
            path: ":postId",
            element: <PostDetails />,
            loader: ({ params: { postId } }) => {
              return (
                queryClient.getQueryData(["post", postId]) ??
                queryClient.fetchQuery(["post", postId], () =>
                  fetchPost(postId)
                )
              );
            },
            pendingElement: <div>Loading post...</div>,
            pendingMs: 300,
            // This does not appear
            errorElement: <div>Oops!</div>
          }
        ]}
      >
        <Outlet />
      </Router>
    </QueryClientProvider>
  );
}

[johanobergman]

I have a super bare bones application which basically just does this:

let routes = [{
  path: '/',
  element: 'app',
  errorElement: 'error',
  loader: async () => {
    throw new Error('Something went wrong!')
  }
}]

and it shows app instead of error on version 3.7.4. It looks like a bug.

[robcaldecott]

Is that a bug @tannerlinsley ?

[tannerlinsley]

Looks like a bug Tanner Linsley

…

On Mar 25, 2022, 12:48 PM -0600, Rob Caldecott ***@***.***>, wrote: Is that a bug @tannerlinsley ? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>