Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not working with nested route in RRv7? #24

Open
s-cochrane opened this issue Feb 27, 2025 · 0 comments
Open

Not working with nested route in RRv7? #24

s-cochrane opened this issue Feb 27, 2025 · 0 comments

Comments

@s-cochrane
Copy link

We have a Users page with a data grid of users and then a child route of that page for the view form that fetches some additional data for a single user. We would like to cache the Users grid data so that we don't have to re-fetch the entire Users list when we open that child form. This scenario doesn't seem to be working for some reason as it's still fetching that entire Users list. The commented out code below works in this scenario, but the active code does not. Is there something I'm missing?

export const loader = customLoader({
  allowedRoles: ALLOWED_ROLES,
  loaderFn: async ({ request }: Route.LoaderArgs) => {
    const apiClient = createServerApiClient(request);
    const [users, userTypes, regions] = await Promise.all([
      apiClient.users.get(),
      apiClient.users.userTypes.get(),
      apiClient.regions.get(),
    ]);

    return { users, userTypes, regions };
  },
});
// let cachedData: any;
// export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
//   if (cachedData) {
//     console.log('Returning cached data');
//     return cachedData;
//   }

//   cachedData = await serverLoader();
//   return cachedData;
// }
// clientLoader.hydrate = true;

export const clientLoader = (args: Route.ClientLoaderArgs) =>
  cacheClientLoader(args as any);
clientLoader.hydrate = true;

export default function Users(props: Route.ComponentProps) {
  // const { users, userTypes, regions } = props.loaderData;
  const { users, userTypes, regions } = useCachedLoaderData();
  return (
    <PageWrapper>
      <UsersTable
        users={users as UserListItem[]}
        userTypes={userTypes as UserType[]}
        regions={regions as Region[]}
      />
      <Outlet />
    </PageWrapper>
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant