graceful-beige

Search param from loader data

Hi, I'd like to use language id data that I receive within loader as a search param langId so it's available globally to children. What would be the best approach here? Thanks

13 Replies

correct-apricot•6d ago

don't get the question . more context ?

fascinating-indigo•6d ago

when you return data from loader, it is available either with: Route.useLoaderData or useLoaderData({ from: 'your-route-path' }) afaik loader data will not be added to the context for what you want to do (exposing response data to children via context), here's what i do (more or less):

async beforeLoad() => {
  const res = await fetch(...)
  return myZodSchema.parse(await res.json())
}

async beforeLoad() => {
  const res = await fetch(...)
  return myZodSchema.parse(await res.json())
}

on the good side: it fetches the data, the zod schema parse it, return it typed. so it will be properly typed and added to context. on the bad side: beforeLoad always executes for all route change. this was told to me by @TkDodo 🔮 not so long ago. this will probably spam your server if you don't implement caching or an independent store (zustand, jotai, tanstack store) and matching logic. if you use tanstack-query, you can cache the query to limit the cost of running this function again and again, and use manual cache invalidation to re-run it manually.

graceful-beigeOP•6d ago

Hey, y_nk, thanks for response, but I think I'm after something different. I'll try to explain. @Manuel Schiller, basically, currently I get the server data in the loader (say it's language object) and in the route component I get it from the query cache and pass it as props (<OtherComponent langId={language.id}/>. What I want is, when the all the data is loaded and ready, before the route component renders, to set a search param in that route, so that I can read the langId from the url instead of passing it everywhere. do I need to useEffect inside the route component to navigate then?

correct-apricot•5d ago

you can throw a redirect from a loader to set the search param

graceful-beigeOP•5d ago

doing this causes the app to freeze

correct-apricot•5d ago

probably doing an infinite redirect then?

graceful-beigeOP•5d ago

looks like that. am I not using redirect correctly? because I need to navigate to the same route, but with search params

genetic-orange•5d ago

You need to do it not infinitely 😂 Like there is no condition around the last redirect so it will always redirect...

graceful-beigeOP•5d ago

makes sense😆 do I need to use loaderDeps to check if there's search param? I'm trying to do that, but because these params are used as global (with retainSearchParams) typescript is complaining

wise-white•4d ago

If they exist globally then they should be defined in the root route and will then be available globally by the types. If they are used "globally" in a specific area of the app, you can move these down to the most relevant route. The types will only give you intellisense for something that is defined in the merged schema for the route you are at.

graceful-beigeOP•4d ago

that was the issue, thanks. as I understand i still have to provide from to useSearch (or strict: false) to get type safety?

wise-white•4d ago

Those two, or use “getRouteApi” to get the hook with “from” prebound are the three options :frannodders:

graceful-beigeOP•4d ago

great. thank u very much :tanstack:

Gaming

Programming

Search param from loader data

Did you find this page helpful?