6.4 - Where to put our AppProviders?

[kevinfairclough]

Hi

We have quite a few AppProviders where do we put them ? Around the RouterProvider or inside the RouterProvider ?

And how do we access data from contexts in loaders ?

Thanks
Kevin

[supersnager]

I think your question is related to #9327

[kevinfairclough]

Thanks for the reply, Yep very similar

[ryanflorence]

If the provider doesn't need router/data information, you can put it on the outside:

<SomeProvider>
  <RouterProvider router={router} />
</SomeProvider>

Or if the context needs routing/data information, put it in the root route element.

const router createBrowserRouter([
  path: '/',
  element: <Root />
  children: [/* ... */]
]);

function Root() {
  const data = useLoaderData();
  return (
    <SomeProvider data={data}>
      <Outlet />
    </SomeProvider>
  )
}

[kevinfairclough]

Thanks for the reply, yeah we have metadata that needs to be loaded before the app can function. The parallel loaders are great in the main however I need the root loader to wait then the rest can be in parallel.

[supersnager]

@kevinfairclough Maybe my solution will be helpful to you.
I'm using it to defer loading data until I'm sure the auth token exists.
You can return a Promise from the loader and resolve it when your metadata is ready.
But how do you know the metadata is ready if the loader can't use hooks?
It's simple - use Redux. Pass a store instance to the loader (you need a function that creates a loader), or import it and subscribe to the store:

import store from "./myReduxStore";

const dataLoader = () => {
  return new Promise((resolve) => {
    const unsubscribe = store.subscribe( async () => {
    const currentState = store.getState();
     if (current.state.metadata) {
      const data = await loadData();
      // don't forget to unsubscribe
      unsubscribe();
      resolve(data);
     }
  })
  )
}

Of course, the metadata needs to be put into the store when it is ready.

Instead of Redux you can you any public-subscribe library or even native custom events.