T
TanStack•16mo ago
genetic-orange

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
stormy-gold
stormy-gold•16mo 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.
genetic-orange
genetic-orangeOP•16mo 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 ...
genetic-orange
genetic-orangeOP•16mo ago
adding this code fix error 
  defaultPreload: 'intent',
  defaultPendingMinMs: 0,
  defaultPreload: 'intent',
  defaultPendingMinMs: 0,
or updating to 1.50.0 also helps
stormy-gold
stormy-gold•16mo ago
you should always try to update to the latest version in case you encounter a bug, we fix them fast and release often 😁

Did you find this page helpful?