{"id":4492,"date":"2024-11-21T13:11:14","date_gmt":"2024-11-21T18:11:14","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4492"},"modified":"2024-11-21T13:11:15","modified_gmt":"2024-11-21T18:11:15","slug":"tanstack-router-data-loading-2","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/tanstack-router-data-loading-2\/","title":{"rendered":"Loading Data with TanStack Router: react-query"},"content":{"rendered":"\n

TanStack Query<\/a>, commonly referred to as react-query, is an incredibly popular tool for managing client-side querying. You could create an entire course on react-query, and people have, but here we\u2019re going to keep it brief so you can quickly get going.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Introducing TanStack Router<\/a>\n <\/li>\n
  2. \n Loading Data with TanStack Router: Getting Going<\/a>\n <\/li>\n
  3. \n Loading Data with TanStack Router: react-query<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    Essentially, react-query allows us to write code like this:<\/p>\n\n\n

    const<\/span> { data, isLoading } = useQuery({\n  queryKey<\/span>: [\"task\"<\/span>, taskId],\n  queryFn<\/span>: async<\/span> () => {\n    return<\/span> fetchJson(\"\/api\/tasks\/\"<\/span> + taskId);\n  },\n  staleTime<\/span>: 1000<\/span> * 60<\/span> * 2<\/span>,\n  gcTime<\/span>: 1000<\/span> * 60<\/span> * 5<\/span>,\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The queryKey<\/code> does what it sounds like: it lets you identify any particular key for a query. As the key changes, react-query is smart enough to re-run the query, which is contained in the queryFn<\/code> property. As these queries come in, TanStack tracks them in a client-side cache, along with properties like staleTime<\/code> and gcTime<\/code>, which mean the same thing as they do in TanStack Router. These tools are built by the same people, after all.<\/p>\n\n\n\n
    There’s also a\u00a0useSuspenseQuery<\/code>\u00a0hook which is the same idea, except instead of giving you an isLoading value, it relies on Suspense, and lets you handle loading state via Suspense boundaries.<\/p>\n\n\n\n
    We’ll move on and cover the setup and integration with Router, but we’ll stay high level to keep this post a manageable length.<\/p>\n\n\n\n
    Setup<\/h2>\n\n\n\n
    We need to wrap our entire app with a QueryClientProvider<\/code> which injects a queryClient (and cache) into our application tree. Putting it around the RouterProvider<\/code> we already have is as good a place as any.<\/p>\n\n\n
    const<\/span> queryClient = new<\/span> QueryClient();\n\nconst<\/span> Main: FC = ()<\/span> =><\/span> {\n  return<\/span> (\n    <><\/span>\n      <QueryClientProvider<\/span> client<\/span>={queryClient}<\/span>><\/span>\n        <RouterProvider<\/span> router<\/span>={router}<\/span> context<\/span>={{<\/span> queryClient<\/span> }} \/><\/span>\n      <\/QueryClientProvider<\/span>><\/span>\n      <TanStackRouterDevtools<\/span> router<\/span>={router}<\/span> \/><\/span>\n    <\/><\/span><\/span>\n  );\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Recall from before that we also passed our queryClient to our Router’s context like this:<\/p>\n\n\n
    const<\/span> router = createRouter({ \n  routeTree, \n  context<\/span>: { queryClient }\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    And:<\/p>\n\n\n
    type<\/span> MyRouterContext = {\n  queryClient: QueryClient;\n};\n\nexport<\/span> const<\/span> Route = createRootRouteWithContext<MyRouterContext>()({\n  component: Root,\n});<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This allows us access to the\u00a0queryClient<\/code>\u00a0inside of our loader functions via the Router\u2019s context. If you’re wondering why we need loaders at all, now that we’re using react-query, stay tuned.<\/p>\n\n\n\n
    Querying<\/h2>\n\n\n\n
    We used Router’s built-in caching capabilities for our tasks. For epics, let’s use react-query. Moreover, let’s use the\u00a0useSuspenseQuery<\/code>\u00a0hook, since managing loading state via Suspense boundaries is extremely ergonomic. Moreover, Suspense boundaries is exactly how Router’s\u00a0pendingComponent<\/code>\u00a0works. So you can use\u00a0useSuspenseQuery<\/code>, along with the same pendingComponent we looked at before!<\/p>\n\n\n\n
    Let’s add another (contrived) summary query in our epics layout (route) component.<\/p>\n\n\n
    export<\/span> const<\/span> Route = createFileRoute(\"\/app\/epics\"<\/span>)({\n  component: EpicLayout,\n  pendingComponent: ()<\/span> =><\/span> <div>Loading epics route ...<\/div>,\n});\n\nfunction EpicLayout() {\n  const context = Route.useRouteContext();\n  const { data } = useSuspenseQuery(epicsSummaryQueryOptions(context.timestarted));\n\n  return (\n    <div>\n      <h2>Epics overview<\/<\/span>h2>\n      <div>\n        {data.epicsOverview.map(epic<\/span> =><\/span> (\n          <Fragment key={epic.name}>\n            <div>{epic.name}<\/div>\n            <div>{epic.count}<\/<\/span>div>\n          <\/Fragment>\n        ))}\n      <\/<\/span>div>\n\n      <div>\n        <Outlet \/>\n      <\/div>\n    <\/<\/span>div>\n  );\n}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    To keep the code somewhat organized (and other reasons we’ll get to) I stuck the query options into a separate place.<\/p>\n\n\n
    export<\/span> const<\/span> epicsSummaryQueryOptions = (timestarted<\/span>: number<\/span><\/span>) =><\/span> ({\n  queryKey: [\"epics\"<\/span>, \"summary\"<\/span>],\n  queryFn: async<\/span> () => {\n    const<\/span> timeDifference = +new<\/span> Date<\/span>() - timestarted;\n    console<\/span>.log(\"Running api\/epics\/overview query at\"<\/span>, timeDifference);\n    const<\/span> epicsOverview = await<\/span> fetchJson<EpicOverview[]>(\"api\/epics\/overview\"<\/span>);\n    return<\/span> { epicsOverview };\n  },\n  staleTime: 1000<\/span> * 60<\/span> * 5<\/span>,\n  gcTime: 1000<\/span> * 60<\/span> * 5<\/span>,\n});<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    A query key, and function, and some cache settings. I’m passing in the timestarted value from context, so we can see when these queries fire. This will help us detect waterfalls.<\/p>\n\n\n\n
    Let\u2019s look at the root epics page (with a few details removed for space).<\/p>\n\n\n
    type SearchParams = {\n  page: number;\n};\n\nexport const Route = createFileRoute(\"\/app\/epics\/\")({\n  validateSearch(search: Record<string, unknown>): SearchParams {\n    return {\n      page: parseInt(search.page as string, 10) || 1,\n    };\n  },\n  loaderDeps: ({ search }) => {\n    return { page: search.page };\n  },\n  component: Index,\n  pendingComponent: () => <div>Loading epics ...<\/div>,\n  pendingMinMs: 3000,\n  pendingMs: 10,\n});\n\nfunction Index() {\n  const context = Route.useRouteContext();\n  const { page } = Route.useSearch();\n\n  const { data: epicsData } = useSuspenseQuery(epicsQueryOptions(context.timestarted, page));\n  const { data: epicsCount } = useSuspenseQuery(epicsCountQueryOptions(context.timestarted));\n\n  return (\n    <div className=\"p-3\">\n      <h3>Epics page!<\/h3>\n      <h3>There are {epicsCount.count} epics<\/h3>\n      <div>\n        {epicsData.map((e, idx) => (\n          <Fragment key={idx}>\n            <div>{e.name}<\/div>\n          <\/Fragment>\n        ))}\n        <div className=\"flex gap-3\">\n          <Link to=\"\/app\/epics\" search={{ page: page - 1 }} disabled={page === 1}>\n            Prev\n          <\/Link>\n          <Link to=\"\/app\/epics\" search={{ page: page + 1 }} disabled={!epicsData.length}>\n            Next\n          <\/Link>\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/span>Code language:<\/span> plaintext<\/span> (<\/span>plaintext<\/span>)<\/span><\/small><\/pre>\n\n\n
    This barely scratches the surface of Query. If you\u2019ve never used it before, be sure to check out\u00a0the docs<\/a>.<\/p>\n\n\n\n