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.

[paynecodes]

I understand this issue is about the AppLoadContext type, but can someone share how do you actually augment the context object at runtime? I'm struggling to find it without dropping down to a custom server.

[gustavopch]

On RR7, you should just need to add this to a .ts or .d.ts in your project:

declare module 'react-router' {
  interface AppLoadContext {
    something: string
  }
}

If you're using "moduleResolution": "nodenext", you'll also need this patch:

diff --git a/node_modules/react-router/package.json b/node_modules/react-router/package.json
index bdaf663..a3eb8b7 100644
--- a/node_modules/react-router/package.json
+++ b/node_modules/react-router/package.json
@@ -24,7 +24,7 @@
   "exports": {
     ".": {
       "node": {
-        "types": "./dist/development/index.d.ts",
+        "types": "./dist/development/index.d.mts",
         "module-sync": "./dist/development/index.mjs",
         "default": "./dist/development/index.js"
       },

If none of this work for you, then there's something else going on in your project and I'll suggest you create a repro with https://remix.new or https://reactrouter.com/new.

[paynecodes]

@gustavopch Thanks for the suggestion. I'm able to get the types to work correctly using a .d.ts file. I'm just unable to find where I can set the context values at runtime (other than when using a custom server).

[gustavopch]

Ah, I understand now. I only have experience using Express. I think you're basically supposed to use a custom server for anything other than very trivial demos.