How to load data with react router dom v6 and handling errorpage?

Client SDKs
,
3

Hey @Conny_Gu :wave: !

This is a great question, and to be frank, we (the Apollo Client team) are still figuring out a good recommendation ourselves. Below are my personal thoughts on the subject and the Apollo Client team may ultimately have a different recommendation in the future.

Those new APIs are super neat and solve a ton of problems that have plagued react apps in the past (request waterfalls for nested routes, for example). If you want to take advantage of these new APIs, you’ll have to abandon the hooks approach since loader is just a function that gets executed by React Router when a route is about to transition. Hooks just don’t work here. That means you’ll have to use client.query directly to fetch results in the loader function. This has the advantage that you don’t have to wait for the component to mount before fetching that data, and React Router can optimize loading several requests in parallel for nested routes (something that was VERY difficult in versions prior to v6).

The disadvantage here is that since you’re no longer using useQuery, you won’t receive automatic cache updates if new data is written to the cache for any data used by your query. In this case, you might consider setting up a useQuery hook in your route component that uses a cache-only fetch policy. This avoids the network request, but allows your component to receive cache updates from that point forward.

This might look something like this (caution NOT TESTED):

// Root.tsx
import { gql } from '@apollo/client';
import { Outlet, Link } from "react-router-dom";

const QUERY = gql`
  query { ... }
`;

export async function loader() {
  const { data } = await client.query(QUERY);

  // Return value is thrown away since we are now relying on the cache for the data
  return {};
}

export default function RootRoute() {
  const { data } = useQuery(QUERY, { fetchPolicy: 'cache-only' })

  return <div>{...}</div>
};

This definitely adds a touch of complexity, but gets you the “best of both worlds” (assuming cache updates are important to you).

Ultimately its up to you to decide what kind of UX you want to provide in your app. There are a ton of UX advantages to using the new React Router APIs, but at the cost of nicely using Apollo’s hooks. There is nothing saying you have to use the new loader APIs so you might determine you want to load data the “old fashioned way” in the component like you always have, but just be aware this could introduce request waterfalls for nested routes.

I’ll reiterate, the Apollo Client team may ultimately decide on a different recommendation. We may also look at finding ways to build a tighter integration between frameworks like Remix, Next.js and React Router which might alleviate any of the awkwardness of using Apollo Client with these new paradigms without the use of hooks. Definitely something we will be exploring!

5 Likes