feat: support loader/action requestContext on the client

[marbemac]

Addresses this request: #9856

This change allows the end user to pass requestContext into the browser router, just like they can when calling the static router query handlers. Not sure if ya'll are willing to consider this change (or if where I put the options makes sense, etc), but it was simple so I figured I'd open it. Or if that middleware proposal is being worked on and supersedes this.

It doesn't involve React.Context, nor does it require rendering.

It allows for isomorphic data loader functions. A good example is the react-query use case - on the server the queryClient needs to be created per request and passed in (can't do singleton, so the existing static router requestContext functionality is perfect for this). However, then we're left with loaders that are broken on the client, since they're expecting queryClient in the requestContext object. With this change, we can now pass the queryClient in when creating the browser router.

Example react-query use case:

// in the client entry:

const queryClient = new QueryClient();

const router = createBrowserRouter(routes, {
    // same as the existing server functionality.. 
    // Now that we can pass requestContext on the client as well, the loader functions
    // can work as-is in both server/client contexts
    requestContext: { queryClient },
});

// mount the app 

I'm not very familiar with the react-router codebase, so I may have missed some areas that need further adjustment.

[changeset-bot]

⚠️ No Changeset found

Latest commit: dc9b014

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[remix-cla-bot]

Hi @marbemac,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at hello@remix.run.

Thanks!

- The Remix team

[brophdawg11]

Thank you for the PR! I do think this will be handled by the upcoming middleware proposal, so going to hold off on this until we see how that shakes out 👍

[marbemac]

No problem, very excited to see how middleware shakes out! Even more excited for the client loaders proposal 🙏.