gradual-turquoise

validateSearch resets router context

Hi, currently I'm trying to use the validateSearch to get search params inside my loader.

const searchSchema = z.object({
  includeExpired: fallback(z.boolean(), false).default(false),
});

const Route = createFileRoute(
  '/$locale/$departmentId/staff',
)({
  component: RouteComponent,

  context: () => ({ title: 'Staff' }),

  validateSearch: zodValidator(searchSchema),

  loaderDeps: ({ search: { includeExpired } }) => ({
    includeExpired,
  }),

  loader: async ({
    context: { queryClient },
    params,
    deps: { includeExpired },
  }) => {
    // artificial timeout to see loader
    await new Promise(r => setTimeout(r, 2000)); 

    return {
      staff: await queryClient.ensureQueryData(
        staffQueryOptions.list(params.departmentId, {
          includeExpired,
        }),
      ),
    };
  },
});

function RouteComponent() {
  const data = Route.useLoaderData();

  return <UserList users={data.staff} />;
}

const searchSchema = z.object({
  includeExpired: fallback(z.boolean(), false).default(false),
});

const Route = createFileRoute(
  '/$locale/$departmentId/staff',
)({
  component: RouteComponent,

  context: () => ({ title: 'Staff' }),

  validateSearch: zodValidator(searchSchema),

  loaderDeps: ({ search: { includeExpired } }) => ({
    includeExpired,
  }),

  loader: async ({
    context: { queryClient },
    params,
    deps: { includeExpired },
  }) => {
    // artificial timeout to see loader
    await new Promise(r => setTimeout(r, 2000)); 

    return {
      staff: await queryClient.ensureQueryData(
        staffQueryOptions.list(params.departmentId, {
          includeExpired,
        }),
      ),
    };
  },
});

function RouteComponent() {
  const data = Route.useLoaderData();

  return <UserList users={data.staff} />;
}

My Root-Route looks like this:

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
  me: TMe;
  departments: TDepartmentList;
  title: string;
}>()({
  beforeLoad: async ({ context: { queryClient } }) => ({
    me: await queryClient.ensureQueryData(userQueryOptions.me),
    departments: await queryClient.ensureQueryData(departmentQueryOptions.list),
  }),

  component: RootComponent,
});

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
  me: TMe;
  departments: TDepartmentList;
  title: string;
}>()({
  beforeLoad: async ({ context: { queryClient } }) => ({
    me: await queryClient.ensureQueryData(userQueryOptions.me),
    departments: await queryClient.ensureQueryData(departmentQueryOptions.list),
  }),

  component: RootComponent,
});

At some point the router-context seems to be cleared, but only if I use the validateSearch function and call the page without search param (like /en/12345/staff). It works fine, when: 1. I call the page with the search param (like /en/12345/staff?includeExpired=false) 1. I do not use validateSearch Any ideas how I can get it to work, calling the page without the search param (because it should be defaulted by the validator) and using the validator?

2 Replies

gradual-turquoiseOP•7mo ago

Does anyone have an idea? Noone? 😦

frail-apricot•7mo ago

i think i know this bug will have a look

Gaming

Programming

validateSearch resets router context

Did you find this page helpful?