React Router 6 Loaders with RTK Query

[spacepolice10]

Hello Redux community. Has anyone successfully implemented RTK Query data fetching with features like React Router loader (or Tanstack Router loader)?

Should I manually initiate queries, access cache inside loader and return cached data there to use inside route component? Can I use manual cache retrieval in parallel with hooks, so the data stays up to date and independent from preloaded info?

<Route 
    path=‘some_route’ 
    element={<Data />} 
    loader={() => {
dispatch(api.endpoints.getData.initiate()$
dispatch(api.endpoints.getData.select()(state).unwrap().then((data) => data)
}}
/>

function Data() {
    const initialData = useLoaderData()
    const data = useGetData()
}

The idea is to get initial set of information via loader and then work with hooks as is is intended (query and mutate data). I am afraid that if I preload data it will live in cache forever or immediately replaced by the data from hook or it will generated unnecessary http requests. Any ideas and advices are welcome. Thanks in advance

[markerikson]

None of us have tried it, but yes, that's what I've roughly imagined that you'd want to do.

The data should stay in cache as long as specific components subscribe to those cache entries.

[phryneas]

That said, you can also unwrap the result of initiate and should probably also unsubscribe the subscription that initiate call creates.

Also, it's probably an option to have the loader just initiate (and immediately unsubscibe after success) and use the hook in the component, which would at that point be prepopulated but also allows access to refetch etc.

[phryneas]

Relevant discussion link: TkDodo/blog-comments#84 (comment)

[FabianFrank]

@phryneas Thank you, this was very helpful.

You are very welcome to write a RTK Query module that just adds these.

Did I understand this correctly as such a module could be a welcome contribution to RTK query? Maybe as part of an example?

I was able to cobble a module together as you suggested in the blog comments:

import { ToolkitStore } from "@reduxjs/toolkit/dist/configureStore"
import { CoreModule } from "@reduxjs/toolkit/dist/query/core/module"
import { reactHooksModule } from "@reduxjs/toolkit/dist/query/react"
import {
    Api,
    BaseQueryFn,
    buildCreateApi,
    coreModule,
    EndpointDefinitions,
    Module,
} from "@reduxjs/toolkit/query"
export const loaderModuleName = Symbol()
export type LoaderModule = typeof loaderModuleName

type LoaderParams = { readonly [key in string]: string | undefined }

const defaultParams = (args: {
    request: Request
    params: LoaderParams
    context?: any
}) => {
    return Object.keys(args.params).length === 0 ? undefined : args.params
}

declare module "@reduxjs/toolkit/dist/query/apiTypes" {
    export interface ApiModules<
        BaseQuery extends BaseQueryFn,
        Definitions extends EndpointDefinitions,
        ReducerPath extends string,
        TagTypes extends string
    > {
        [loaderModuleName]: {
            endpoints: {
                [K in keyof Definitions]: {
                    loader(
                        store: ToolkitStore,
                        paramsFN?: (args: {
                            request: Request
                            params: LoaderParams
                            context?: any
                        }) => LoaderParams
                    ): (args: {
                        request: Request
                        params: { readonly [key in string]: string | undefined }
                        context?: any
                    }) => any
                }
            }
        }
    }
}

export const loaderModule = (): Module<LoaderModule> => ({
    name: loaderModuleName,
    init(api, options, context) {
        // initialize stuff here if you need to

        return {
            injectEndpoint(endpoint, definition) {
                const { initiate } = api.endpoints[endpoint] as any

                const anyApi = api as any as Api<
                    any,
                    Record<string, any>,
                    string,
                    string,
                    LoaderModule | CoreModule
                >

                anyApi.endpoints[endpoint].loader = (
                    store,
                    paramsFN: (args: {
                        request: Request
                        params: LoaderParams
                        context?: any
                    }) => LoaderParams | undefined = defaultParams
                ) => {
                    return async (args: {
                        request: Request
                        params: LoaderParams
                        context?: any
                    }) => {
                        const params = paramsFN(args)
                        const p = store.dispatch(initiate(params))
                        await p
                        p.unsubscribe()
                        return null
                    }
                }
            },
        }
    },
})

export const loaderCreateApi = buildCreateApi(
    coreModule(),
    reactHooksModule(),
    loaderModule()
)

the resulting loaders can then be used as follows with react-router:

export const router = createBrowserRouter([
    {
        path: "/",
        element: <Homepage />,
        errorElement: <ErrorPage />,
        loader: yourApi.endpoints.getSomeData.loader(store),
    },

Then when <Homepage /> renders const { data } = useGetSomeDataQuery() has a primed cache and the data is available on the first render pass , which is what react-router solves with loaders.

There are a few things things I am not super happy with:

1. Using currying to pass the store. It seems like there might be a better way to access the store (so that the loader can call store.dispatch()) from within a module. Do you have some guidance on that?
2. For the loader to work as intended the arguments passed to yourApi.endpoints.getSomeData.initiate() and useGetSomeDataQuery() have to be the same, otherwise there's no cache hit. This creates a bit of a foot gun, because if you are careless the query just runs twice without any preloading benefits, i.e. the end result is worse than ignoring loaders in this first place. This is also why defaultParams has to ensure undefined is passed and not {}. My main idea for overcoming this is a helpful comment / a good example.

Any suggestions/pointers are very welcome, combined with @rtk-query/codegen-openapi this is really amazing, you can generate all front-end fetching/caching/etc. boilerplate automatically and can just write React UI right away. I'm amazed how far redux (toolkit) has come.

[FabianFrank]

Another issue with this is that the type of the arguments for initiate() doesn't carry through to the parameters for the loader. I have to admit it's not immediately obvious how I'd get to those types.

[MadaShindeInai]

https://codesandbox.io/s/rr6-4-rtk-auth-cdbtow
Provided an example of React app, that using RR6.4+ 'loader' to make initial request with both RTKQuery and createAsyncThunk.
As this requests require auth - implemented ProtectedRoutes flow inside 'loader'. ( to check this try to go directly to /test or / when you are on /auth).
Also added condition as example how to prevent excess requests for cases when shouldRevalidate do not fit your reqirements.

[ChristophP]

Would prefetching be a good solution to this?
https://redux-toolkit.js.org/rtk-query/usage/prefetching#trigger-function-behavior
(Not sure if prefetching already Existed when the discussion here happened).

Seems to me like the main issue with dispatching the query withing the loader of react router is thst you have to get a bit tricky to properly unsubscribe or live with the fact that it won't get unsubscibed ever.

I couldn't really find this information in the docs but the way I understood it is that prefetch would run the query and thus prime the cache WITHOUT adding a subscription. Thus making it a great fit for this loader scenario.
Can anyone confirm that is actually the case?

[IAluI]

No. The subscription is created see

[SylvainFaure]

Hello!
I write here as I'm not sure if it's an issue and how to deal with it.
I have a dashboard bootstrapped with create-react-app with RTK query and React router v6.21.3.
I mainly use the method described in this article and it works fine 90% of the time.

However in some situations I have a very annoying bug that I am not able to reproduce, and that is that loader is trigger, API calls made, data is ok, but my page doesn't re-render with the refreshed data.
The flow is:

• in my page there are various form (I'm not using the component provided by react-router)
• on submit I trigger the useSubmit hook which calls my router action
• on the action I dispatch a patch or post call handled by RTK Query
• in this call, I invalidate the associated tags to be sure the data will be refetched
• the associated loader is triggered
• in my loader I have several promises, only a few of them will be refetched by my form
• when I log the results at this point in my loader all my data is updated
• my page is not re-rendered with fresh data (normally provided by useLoaderData)

I'm not sure what I am missing, but it doesn't seems to be a react-router issue, more a RTK Query one.
If I use the forceRefetch param on any of these calls the page is updated normally, but that's not the behavior I would expect if I handle correctly the invalidation right?

Here is a simplified version of my loader:

import { BaseLoader } from 'router/BaseLoader'
import { api } from 'services/api'

export class Loader extends BaseLoader {
  detailLoader = async ({ params, request }) => {
    const promises = [
      this._loader(api.endpoints.fetchFullProfile, request),
      this._loader(api.endpoints.fetchEntity, request, {
        entity: 'rooms',
        id: params.id
      }),
      this._loader(api.endpoints.fetchEntity, request, {
        entity: 'activities',
        id: params.id
      }),
      this._loader(api.endpoints.fetchEntity, request, {
        entity: 'participants',
        id: params.id
      })
    ]
    const [profile, rooms, activities, participants] =
      await Promise.all([...promises])

    return {
      profile,
      activities,
      participants,
      rooms
    }
  }
}

Could you please help me or redirect me toward the right place to solve my problem?
Thank you!
Sylvain

[TheHorusHawk]

I had a similar issue which was solved after I registered the middleware of the slice. Have you checked the middleware registration?

[codeart1st]

There is another little downside with the dispatch(api.endpoints.getData.initiate()) approach in loader in combination with useQuery Hook to access the data.
If the data fetching fails e.g. with HTTP 500, you get two requests and propably with a error middleware two different error messages.
Is it possible to control useQuery not to refetch after the same request already get an error?

Edit: I will give https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#bailing-out-of-error-re-tries a try
Edit2: Nope, retry strategy is for totally different scenarios
Edit3:

I think its good to use https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#usequerystate instead of useQuery if you initiate fetching in react router loader functions. This helps wie duplicated error fetches.

[ChristophP]

Ah ok. Cool trick with the skipToken. 👍

[ChristophP]

Still too bad though that one has to add a second hook call just because loaders don't allow for cleanup logic

[ChristophP]

I was thinking of doing something like this to allow cleanup to keep everything in the loader

const loaderFunc = async () => {
  // fetch and add a subscription
  const queryResult = await api.endpoints.getFancyStuff.initiate({ forceRefetch: true });

  // listen to next route change to remove the subscription when navigating away
  const unsubscribeFromRouter = router.subscribe(() => {
    queryResult.unsubscribe();  // remove RTK Query subscription
    unsubscribeFromRouter(); // stop listening to route changes
  });

  // return no data since components can access data via useQueryState()
  return null;
}

I haven't tested this but what I like about it is that you can keep all the subscription management logic in the loader.
The downside is that router.subscribe() is not an officially documented API of react-router

[codeart1st]

RTK 2.2 (released yesterday) export more types.

type QueryHooks<QueryArg, ResultType, BaseQuery extends BaseQueryFn> = {
  useQueryState: TypedUseQueryState<ResultType, QueryArg, BaseQuery>
  useQuery: TypedUseQuery<ResultType, QueryArg, BaseQuery>
}

export const useLoaderQuery = <QueryArg, ResultType, BaseQuery extends BaseQueryFn>(
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  apiEndpointQuery: ApiEndpointQuery<any, any> & QueryHooks<QueryArg, ResultType, BaseQuery>,
  arg: QueryArgFrom<QueryDefinition<QueryArg, BaseQuery, string, ResultType>>
): TypedUseQueryHookResult<ResultType, QueryArg, BaseQuery> => {
  const { error, isError } = apiEndpointQuery.useQueryState(arg)
  return {
    ...apiEndpointQuery.useQuery(isError ? skipToken : arg),
    error,
    isError
  } as TypedUseQueryHookResult<ResultType, QueryArg, BaseQuery>
}

Don't know how to get rid of the last cast as TypedUseQueryHookResult<ResultType, QueryArg, BaseQuery> but now it's simpler

const { data, error, isError, isLoading } = useLoaderQuery(fancyApi.endpoints.fancyMethod, args)

A better solution would be a new option for the useQuery Hook to skip previous error states.

[codeart1st]

Improved the custom hook a bit

type QueryHooks<QueryArg, ResultType, BaseQuery extends BaseQueryFn> = {
  useQueryState: TypedUseQueryState<ResultType, QueryArg, BaseQuery>
  useQuerySubscription: TypedUseQuerySubscription<ResultType, QueryArg, BaseQuery>
}

export const useLoaderQuery = <QueryArg, ResultType, BaseQuery extends BaseQueryFn>(
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  apiEndpointQuery: ApiEndpointQuery<any, any> & QueryHooks<QueryArg, ResultType, BaseQuery>,
  arg: QueryArgFrom<QueryDefinition<QueryArg, BaseQuery, string, ResultType>>
): TypedUseQueryHookResult<ResultType, QueryArg, BaseQuery> => {
  const queryStateResults = apiEndpointQuery.useQueryState(arg)
  const querySubscriptionResults = apiEndpointQuery.useQuerySubscription(arg, {
    skip: queryStateResults.isError
  })
  return useMemo(
    () => ({
      ...queryStateResults,
      ...querySubscriptionResults
    }),
    [queryStateResults, querySubscriptionResults]
  )
}

[ChristophP]

Hi there,
since this topic still seems to be somewhat unsolved, I wanted to share my recent progress for a solution.
react-router 6.23 came out with a new data strategy API which I used to implement something that I think solved the problem of unsubscribing.
Feedback welcome: remix-run/react-router#11527