T
TanStack•3w ago
fascinating-indigo

zod validateSearch without redirecting

I'm running into an issue where the outer route does: 
export const Route = createFileRoute("/groups")({
  beforeLoad: () => ({
    queries: {
      summary: something(),
    },
  }),
  loader: async ({ context: { queryClient, queries } }) => {
    return queryClient.ensureQueryData(queries.summary)
  },
export const Route = createFileRoute("/groups")({
  beforeLoad: () => ({
    queries: {
      summary: something(),
    },
  }),
  loader: async ({ context: { queryClient, queries } }) => {
    return queryClient.ensureQueryData(queries.summary)
  },
and the inner route does: 
export const Route = createFileRoute("/groups/$groupId")({
  params: {
    parse: ({ groupId }) => ({ groupId: Number(groupId) }),
  },
  validateSearch: (search) => searchSchema.parse(search),
export const Route = createFileRoute("/groups/$groupId")({
  params: {
    parse: ({ groupId }) => ({ groupId: Number(groupId) }),
  },
  validateSearch: (search) => searchSchema.parse(search),
The zod schema is a looseObject with a bunch of default() fallbacks: 
const searchSchema = z.looseObject({
  numbers: z.array(z.number()).default([1, 2, 3]),
  other: z
    .array(z.enum(...))
    .default(...),
const searchSchema = z.looseObject({
  numbers: z.array(z.number()).default([1, 2, 3]),
  other: z
    .array(z.enum(...))
    .default(...),
When I navigate to the page without any search params, it works fine and I get immediately redirected (?) to a URL that has all the search params that have zod .default() specified explicitly - I am fine with this behavior. But when I navigate (through a specific URL, in a new tab) to this page with just one of the schema parameters specified, the page crashes in the outer route's loader function. Upon inspection, context.queries ends up being undefined. Any ideas why this happens? My workaround is to do this for validateSearch: 
  validateSearch: (search) => {
    searchSchema.parse(search);
    return search;
  },
  validateSearch: (search) => {
    searchSchema.parse(search);
    return search;
  },
This prevents the route component replacement/redirect but still detects parsing errors like it should
4 Replies
fascinating-indigo
fascinating-indigoOP•3w ago
oh and obviously, when I use the search params in my component, I need to parse them again with zod to have the defaults apply
stormy-gold
stormy-gold•3w ago
Is there any error messages?
stormy-gold
stormy-gold•3w ago
it works fine and I get immediately redirected (?) to a URL that has all the search params that have zod .default() specified explicitly
https://tanstack.com/router/latest/docs/framework/react/guide/search-params#:~:text=Another%20common%20use%20case%20is%20to%20strip%20out%20search%20params%20from%20links%20if%20their%20default%20value%20is%20set.%20TanStack%20Router%20provides%20a%20generic%20implementation%20for%20this%20use%20case%20via%20stripSearchParams%3A
Search Params | TanStack Router React Docs
Similar to how TanStack Query made handling server-state in your React and Solid applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications. 🧠 If you ar...
stormy-gold
stormy-gold•3w ago
Upon inspection, context.queries ends up being undefined. Any ideas why this happens?
do you have any reproductions?

Did you find this page helpful?