v7: How to use context in Route.LoaderArgs

[nbudin]

Hi community! I'm attempting to use the new type-safe routing features in the react-router v7 prereleases. I'd like to use the context argument in my loaders to pass an instance of an Apollo client that loaders can share, to avoid redundant queries in nested routes.

I haven't been able to figure out a way to augment the type of the context field in Route.LoaderArgs. It seems like this ambient type declaration file should work:

import { ApolloClient, NormalizedCacheObject } from '@apollo/client';

declare module 'react-router' {
  interface AppLoadContext {
    client: ApolloClient<NormalizedCacheObject>;
  }
}

And indeed, when I inspect the type of the context field in a loader, it seems to be the AppLoadContext type from the react-router module. But the declaration above seems to have no effect. I've already verified that the ambient type definition file is in fact being loaded and has an effect in the route module by defining a global type and attempting to use it, which works fine.

Has anyone managed to make this work? If so, I'd love to hear how you did it. Thanks!

[sergiodxa]

I had this issue on 7.0.0-pre.5, but if you upgrade to 7.0.0-pre.6 it works again, seems they fixed it somehow.

[nbudin]

Awesome, thanks Sergio! I just tried it and it worked for me.