TanStackT
TanStack•6mo ago•
7 replies
conventional-black

Handling loading states when tanstack router and query used together

I am using Tanstack Router and Tanstack Query. I have a page (say index) like this.
<div>
    <SearchComponent>
    <TableComponent>
</div>

The route code is excluded for brevity.
In the SearchComponent, I have an input and a button. When the button is clicked, the value of the input is put into the url like this.
navigate({
    to: ".",
    search: () => ({query: inputValue})
})

That works correctly and when clicked, I can see the value in the url. Now, using that value, I want to query some data with tanstack query. So I did this in the component
    const {query} = Route.useSearch()
    const {data, isFetching} = useQuery({
        queryKey: [query]
    })
}

I can see the data in the devtool, so it works. I want to show the loading on the search button so I use isFetching to render some icons and disable the search button. However, the problem is I want to be able to trigger the query again and again with the same query input. But since the search params is not changing, the route is not rerendering. So the query is not triggering. How can I achieve it?
Was this page helpful?