T
TanStack•11mo ago
robust-apricot

useSearch with validateSearch in _layout

I have the following routing structure 
- post
   |- $postId
        |- _layout.tsx
        |- _layout
             |- index.tsx
- post
   |- $postId
        |- _layout.tsx
        |- _layout
             |- index.tsx
in _layout.tsx I use <Outlet/> to render what index.tsx is rendering. And I also do search validation for the foorBar search param. 
  validateSearch: ({
    fooBar,
  }: {
    fooBar: string;
  })=> {
    if (!fooBar) {
      throw new Error('fooBar is required');
    }
    return { fooBar };
  },
  validateSearch: ({
    fooBar,
  }: {
    fooBar: string;
  })=> {
    if (!fooBar) {
      throw new Error('fooBar is required');
    }
    return { fooBar };
  },
Then inside my component, I do 
const { fooBar } = useSearch({ from: '/post/$postId/' });
const { fooBar } = useSearch({ from: '/post/$postId/' });
And I get Property 'fooBar' does not exist on type '{}'. However, if I do the following, it's inferred correctly. 
const { fooBar } = useSearch({ from: '/post/$postId/_layout' });
const { fooBar } = useSearch({ from: '/post/$postId/_layout' });
Do I make a mistake here, or is this how it should be? Because I can access the path params without any issues with /post/$postId when using useParams
1 Reply
exotic-emerald
exotic-emerald•11mo ago
can you please provide a complete minimal example?

Did you find this page helpful?