passive-yellow

search params appear in `_strictSearch` but not in `search`

Im encountering a problem where my search params show up in the URL as expected, but wont be available using Route.useSearch(). Using the devtools i can see that they appear in the parent routes search, but only appear in the /page route under _strictSearch. Anyone knows how this could happen?

export const Route = createFileRoute(
  "/x/$projectId/_layout/page"
)({
  component: MyComponent,
  validateSearch: zodValidator(
    z.object({
      foo: fallback(z.string().optional(), "foo").default("foo"),
      bar: fallback(z.string().optional(), "bar").default("bar"),
      baz: fallback(z.string().optional(), "baz").default("baz")
    })
  ),
});

function MyComponent() {
  const search = Route.useSearch();
  console.log("search", search);

  return null;
}

export const Route = createFileRoute(
  "/x/$projectId/_layout/page"
)({
  component: MyComponent,
  validateSearch: zodValidator(
    z.object({
      foo: fallback(z.string().optional(), "foo").default("foo"),
      bar: fallback(z.string().optional(), "bar").default("bar"),
      baz: fallback(z.string().optional(), "baz").default("baz")
    })
  ),
});

function MyComponent() {
  const search = Route.useSearch();
  console.log("search", search);

  return null;
}

6 Replies

extended-salmon•4mo ago

can you please create a complete example by forking one of the router examples on stackblitz ?

passive-yellowOP•4mo ago

i tried creating an example, but im unable to reproduce it. so i guess im just looking for any guesses what could potentially be going wrong. from looking at it _strictSearch includes all search params and search only contains the ones that passed validation?

extended-salmon•4mo ago

should be the other way round. btw strict search is not public API so ideally you should not worry about that usually

passive-yellowOP•4mo ago

hm, then its even weirder to me i found the culprit, it was caused by a sibling routes (/x/$projectId/_layout/page-b) search middleware. how can that even affect another route? 😕 the middleware in question, which is part of /x/$projectId/_layout/page-b(aka sibling route)

search: {
    middlewares: [
      ({ search, next }) => {
        const result = next(search);
        Object.keys(result).forEach(key => {
          if (!Object.keys(searchSchema.shape).includes(key)) {
            delete result[key as keyof typeof searchSchema.shape];
          }
        });

        return result;
      }
    ]
  },

search: {
    middlewares: [
      ({ search, next }) => {
        const result = next(search);
        Object.keys(result).forEach(key => {
          if (!Object.keys(searchSchema.shape).includes(key)) {
            delete result[key as keyof typeof searchSchema.shape];
          }
        });

        return result;
      }
    ]
  },

why does this seemingly run on /x/$projectId/_layout/page?

extended-salmon•4mo ago

a search middleware runs for links pointing from one route to another you should not manipulate the passed in value directly return a modified copy i guess that's the issue here

passive-yellowOP•4mo ago

dang, yea that fixed it thanks for the help 🙂

Gaming

Programming

search params appear in `_strictSearch` but not in `search`

Did you find this page helpful?