passive-yellow

zod .catch() in validateSearch create infinity loop

Hey I have this route:

export const paginationSearchSchema = z.object({
  page: z.number().catch(1),
  perPage: z
    .union([
      z.literal(_10_RESULTS_PER_PAGE_),
      z.literal(_15_RESULTS_PER_PAGE_),
      z.literal(_25_RESULTS_PER_PAGE_),
    ])
    .catch(_10_RESULTS_PER_PAGE_),
});

export const Route = createFileRoute('/_authorized/app/users')({
  validateSearch: paginationSearchSchema,
  component: Users,
  beforeLoad: ({ search, context }) => {
    context.queryClient.ensureQueryData(getUsersQueryOptions(search));
  },
});

export const paginationSearchSchema = z.object({
  page: z.number().catch(1),
  perPage: z
    .union([
      z.literal(_10_RESULTS_PER_PAGE_),
      z.literal(_15_RESULTS_PER_PAGE_),
      z.literal(_25_RESULTS_PER_PAGE_),
    ])
    .catch(_10_RESULTS_PER_PAGE_),
});

export const Route = createFileRoute('/_authorized/app/users')({
  validateSearch: paginationSearchSchema,
  component: Users,
  beforeLoad: ({ search, context }) => {
    context.queryClient.ensureQueryData(getUsersQueryOptions(search));
  },
});

for some reason adding .catch() in schema make infinity loop and I do not know exactly why this happen. after some debbuging in found that deleting beforeLoad function in __root.tsx file make this inifnity loop disappear here is my __root.tsx

export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
  {
    beforeLoad: !getAuth().token
      ? undefined
      : async ({ context: { queryClient } }) => {
          const { token, user } = getAuth();

          if (!user && token) {
            const { data: user } =
              await queryClient.ensureQueryData(getUserData);
            useStore.getState().auth.setUser(user);
          }
        },
    component: GlobalLayout,
  },
);

export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
  {
    beforeLoad: !getAuth().token
      ? undefined
      : async ({ context: { queryClient } }) => {
          const { token, user } = getAuth();

          if (!user && token) {
            const { data: user } =
              await queryClient.ensureQueryData(getUserData);
            useStore.getState().auth.setUser(user);
          }
        },
    component: GlobalLayout,
  },
);

Anyone know why this happen? I would be very gratefull 🙌 Thanks for reading

4 Replies

genetic-orange•13mo ago

please you provide a minimal complete example by forking one of the existing router examples on stackblitz , e.g. https://tanstack.com/router/latest/docs/framework/react/examples/basic-file-based

React TanStack Router Basic File Based Example | TanStack Router Docs

An example showing how to implement Basic File Based in React using TanStack Router.

passive-yellowOP•13mo ago

this is my issue: https://github.com/TanStack/router/issues/2031

GitHub

Blank screen / loads indefinitely when using validateSearch and loa...

Describe the bug A bug occurs when using the validateSearch method with a custom schema created with zod in the latest version of tanstack/router. Specifically, the bug manifests when the route is ...

passive-yellowOP•13mo ago

adding this code fix error

  defaultPreload: 'intent',
  defaultPendingMinMs: 0,

  defaultPreload: 'intent',
  defaultPendingMinMs: 0,

or updating to 1.50.0 also helps

genetic-orange•13mo ago

you should always try to update to the latest version in case you encounter a bug, we fix them fast and release often 😁

Gaming

Programming

zod .catch() in validateSearch create infinity loop

Did you find this page helpful?