Is wrong use a parametrized function to createBrowserRouter?

[predofrazao]

I need some context's values in some of my router loaders and I can't find a properly way to consume it since the loader isn't a hook, so what I did was:

1. Moved my RouterProvider from main.tsx to App.tsx;
2. Consumed my Context in App.tsx;
3. Created "router" function, that receives the user role and returns "createBrowserRouter" passing to each loader the "role" param (this is because I separated the function in another file);

It worked just fine, excepet that if I use navigate(-1) to go to the previous page, some strange behaviors happens, like call the loader multiple times with the "role" param as undefined and then updated to the properly value. After using another approach to go to the previous page, I didn't noticied any other problems.

// main.tsx

import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import React from "react";
import ReactDOM from "react-dom/client";
import { HelmetProvider } from "react-helmet-async";
import App from "./App";
import { localStorageKeys, queryClient } from "./app/configs";
import { Toaster } from "./components/ui/toaster";
import "./index.css";
import { AuthProvider } from "./services/providers/authProvider";
import { ThemeProvider } from "./services/providers/themeProvider";
import { UserProvider } from "./services/providers/userProvider";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <HelmetProvider>
        <ThemeProvider defaultTheme="system" storageKey={localStorageKeys.THEME}>
          <AuthProvider>
            <UserProvider>
              <App />
            </UserProvider>
          </AuthProvider>
        </ThemeProvider>
      </HelmetProvider>

      <Toaster />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>
);

// src/router/index.tsx

import { AuthLayout, RootLayout, SettingsLayout } from "@/layouts";
import PermissionLayout from "@/layouts/PermissionLayout";
import DashboardPage from "@/routes/dashboard";
import OTPPage from "@/routes/otp";
import AccountPage from "@/routes/settings/account";
import GroupCreatePage from "@/routes/settings/groups/create";
import GroupReadPage from "@/routes/settings/groups/read";
import GroupUpdatePage from "@/routes/settings/groups/update";
import SignInPage from "@/routes/sign-in";
import { grupoReadLoader, grupoUpdateLoader } from "@/services/loaders/grupo";
import { settingsLoader } from "@/services/loaders/settings";
import { GroupEnterpriseManagementProvider } from "@/services/providers/groupEnterpriseManagementProvider";
import { Role } from "@/types";
import { createBrowserRouter } from "react-router-dom";

const router = (isSignedIn: boolean, role: Role) =>
  createBrowserRouter([
    {
      element: <AuthLayout />,
      children: [
        {
          index: true,
          path: "sign-in",
          element: <SignInPage />,
        },
        {
          path: "otp",
          element: <OTPPage />,
        },
      ],
    },
    {
      element: <RootLayout />,
      children: [
        {
          index: true,
          element: <DashboardPage />,
        },
        {
          path: "settings",
          element: <SettingsLayout />,
          loader: settingsLoader(isSignedIn, role),

          children: [
            {
              index: true,
              element: <AccountPage />,
            },
            {
              element: <PermissionLayout allowedRoles={["OWNER"]} />,
              children: [
                {
                  path: "groups",
                  element: <GroupReadPage />,
                  loader: grupoReadLoader(isSignedIn, role),
                  children: [
                    {
                      path: "create",
                      element: <GroupCreatePage />,
                    },
                    {
                      path: ":id",
                      element: (
                        <GroupEnterpriseManagementProvider>
                          <GroupUpdatePage />
                        </GroupEnterpriseManagementProvider>
                      ),
                      loader: grupoUpdateLoader(isSignedIn, role),
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  ]);

export default router;

// App.tsx

import { RouterProvider } from "react-router-dom";
import router from "./router";
import { useAuth, useUser } from "./services/hooks";

const App = () => {
  const { isSignedIn } = useAuth();
  const { role } = useUser();

  return <RouterProvider router={router(isSignedIn, role)} />;
};

export default App;

[sergiodxa]

You will create a new router instance on each render of App, if you have any unexpected render it will trigger every loader again.

The router instance is recommended to be created once when the app loads, if you need to pass the auth status and user role, it's better to get it in the loaders directly by moving them to outside React.

[predofrazao]

I would like to do that, but it's authentication and user datas that comes from api after login, that is, to even get that datas, the user is already doing actions in a route. Beside this, I need those datas in all my application, so I think the Context makes senses here.

Maybe I'm misunderstanding the loaders or any React Router logic? Here is a example of one of my loaders

import { queryClient } from "@/app/configs";
import { Role } from "@/types";
import { empresaFindAllQueryOptions } from "../queries/empresa";
import { grupoFindAllQueryOptions } from "../queries/grupo";
import { setorFindAllQueryOptions } from "../queries/setor";
import { usuarioFindAllQueryOptions } from "../queries/usuario";

function settingsLoader(isSignedIn: boolean, role: Role) {
  return () => {
    if (!isSignedIn || role === "MEMBER") {
      return null;
    }

    if (role !== "OWNER") {
      return Promise.all([queryClient.prefetchQuery(usuarioFindAllQueryOptions())]);
    }

    return Promise.all([
      queryClient.prefetchQuery(grupoFindAllQueryOptions()),
      queryClient.prefetchQuery(empresaFindAllQueryOptions()),
      queryClient.prefetchQuery(setorFindAllQueryOptions()),
      queryClient.prefetchQuery(usuarioFindAllQueryOptions()),
    ]);
  };
}

export { settingsLoader };

[sergiodxa]

Do the login against the API in a route action function, if you use TanStack Query as a separate store you could use the QueryClient directly in your loaders to get the auth status and user role, the data is already outside React

[predofrazao]

You're a genius, I could move back my RouterProvider to main and use QueryClient to retrieve the data. Thank you!

The problem now is when a page reload happens. At first, the data in query cache will be undefined what will make the loader return null and cause an error when I try to consume the data that is awaited by route. I'm also a bit confused why the loader is called before I even return the children in the provider that it's parent of RouterProvider.

[sergiodxa]

At first, the data in query cache will be undefined what will make the loader return null and cause an error when I try to consume the data that is awaited by route

If you use queryClient.fetchQuery({ queryKey, queryFn }) then it will run your queryFn in case the key is not already in the TanStack Query cache, this way on a first load it will do the fetch to know the auth status and user role.

Another nice benefit is that if two or more loaders fetch the same query it will only really call queryFn once so it's deduped.

I'm also a bit confused why the loader is called before I even return the children in the provider that it's parent of RouterProvider

Once the router instance is created, it already can know the URL and start running loaders, so RR do it immediately, this way it's not blocked by anything else, so you don't have to wait for React to render the RouterProvider to get the data.

[predofrazao]

At first, the data in query cache will be undefined what will make the loader return null and cause an error when I try to consume the data that is awaited by route

If you use queryClient.fetchQuery({ queryKey, queryFn }) then it will run your queryFn in case the key is not already in the TanStack Query cache, this way on a first load it will do the fetch to know the auth status and user role.

Another nice benefit is that if two or more loaders fetch the same query it will only really call queryFn once so it's deduped.

Worked perfectly! Instead of fetchQuery I used ensureQueryData just to avoid unnecessary fetch and wrapped it in a try...catch. Thank you very much, you really helped me a lot.