stormy-gold

Search Params: manually update search params

Hi all. I just wanted to ask if anybody managed to update the search params manually from a onSubmit function of a Form? I've used react-routers useSearchParams which returns a tuple of the routes searchparams state and a setter for it. After the form submit I've used the input fields string to replace the searchparams - and I've got a use effect which checks for changes on the search param for re-rendering, but I'm re-rendering in place display component instead of a full page reload. I can't find a similar way to do this in Tanstack Router. Any info would go a long way.

11 Replies

continuing-cyan•6mo ago

https://tanstack.com/router/latest/docs/framework/react/guide/search-params#writing-search-params

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. Why not just...

stormy-goldOP•5mo ago

@Manuel Schiller :catJAM: Spot on - I just missed the navigate button section. But that solved my issue.

await navigate({
      search: () => ({}),
    });

await navigate({
      search: () => ({}),
    });

search is TS erroring out. Any ideas? nevermind found the culprit 😄

continuing-cyan•5mo ago

needs to="." see the docs 😆

stormy-goldOP•5mo ago

what about this:

await navigate({
  reloadDocument: false,
  search: () => ({ chargeNumber: Number(currentBatch.chargeNumber) }),
});

await navigate({
  reloadDocument: false,
  search: () => ({ chargeNumber: Number(currentBatch.chargeNumber) }),
});

? this seems to do what I expect 😄 Although my use case is a bit crazy 😄

continuing-cyan•5mo ago

what do you expect? reload document is by default false

stormy-goldOP•5mo ago

the thing is that since I added that I don't get double rendering. 'cos the thing is that I've got a page which has an input field for searching a API. I can either navigate to the page from another page where I set the searchparams and then use a useEffect to get that data as the search input field value. I can also change the input field value and I propagate the inputs value to the search params. Or I can click on one rendered item in the page component which triggers a params update and based on that I do the API call. And I've got 2 APIs that get triggered and a state that depending if the search got trigerred by a clicked item or by the search form.

continuing-cyan•5mo ago

no idea what you do here 🤪 useEffect sounds wrong TBH maybe look into the select function of useSearch

stormy-goldOP•5mo ago

well I use the useEffect to check if searchParams have a specific key and only if that key is present in the params I trigger a API call and set an internal state which is used as the value on the input field. but the select function only returns the SelectedSearchSchema - which I can understand as it returns the defined schema for the route right? I mean the type from the validateSearch? Oh I get what you mean... Dooh. But I still have to update the searchParams using the navigate function right?

const searchParams = route.useSearch();

const searchParams = route.useSearch();

I use the getRouteApi to get the route object or are you referring to useSearch -> search: (searchParam) => getTheData(searchParam) and then use the return as the data?

continuing-cyan•5mo ago

not sure what that means useSearch({select:...}) allows you to control when your component rerenders. as you only subscribe to particular changes of your search params maybe not relevant here at all just mentioning it since you wrote about rerendering

stormy-goldOP•5mo ago

I think I've got it 😄 Would be easier and maybe a bit more clear if the search params could be directly overwritten as with react-router 😄

continuing-cyan•5mo ago

what do you mean?

Gaming

Programming

Search Params: manually update search params

Did you find this page helpful?