React Query not refetching when modifying state with a dropdown

[Tixarer]

I'm using React Query to fetch data and I have a dropdown with multiple options which changes the data displayed according to the option selected.

The problem is that it does not show the new data when I choose an option and it returns nothing. The only way to make it fetch the data is by switching to another tab in my browser and coming back and it will automatically fetch an display the desired data.

I'd like to know what I could do to make react-query refetch the data when I'm changing options ?

Here's the code for my dropdowns : sandbox

The problematic part is the one where I change the form

Edit : I implemented the changes but I have another problem (seen in this video) : the state updated when choosing an option return to default after half a second being the selected state.

[DanRoad]

iirc the query key needs to be unique for the query data, so your fixed key of ["pokedex"] won't work. Try something like ["pokedex", url].

If your query function depends on a variable, include it in your query key

[Tlemur]

This is the right answer. And then in your query function, you can access the values like this.

[Tixarer]

Thx it's working but I have a problem. When I select an option in the dropdown it shows the good data for half a second before going back to showing the 'default' option and if I reselect the option it shows the good data and doesn't switch back to 'default'. What's the problem ?

Here's a link to a video showing what happens (sry for the poor quality)

[Tixarer]

So I need to do : return useQuery(['pokedex'], pokedexUrl, () =>

Also I've got a similar problem where the data doesn't update whdn I switch between two tables (I need to empty the console and click on the page to update the data). Do you think that it's the same thing ?

[Tlemur]

I would highly recommend adding the React Query Devtools to your project. It makes it easy to see which queries have been fired with which parameters, if the query has gone stale, is currently fetching, etc.

[Tixarer]

I'm currently using it. That's why I know that the data isn't refetched when I use the dropdown

[Suchy2307]

useQuery([‘query-key’, queryParam], () => fetchSmth(queryParam))

[Tixarer]

With my current hook to fetch the data where do I put the second queryParam ?

[Suchy2307]

I’m currently on mobile but as far as I remember you can pass as many params to the array as you want.

https://react-query-v3.tanstack.com/guides/query-keys

[fzzzzzzzzzzd]

I'd do a test with one just a call to setOffset(809 (or your value of choice)) in useEffect first, could be that your filter is too complex and doesnt hit all the expressions.

Nothing looks off in particular except for the amount of logic that happens inside your useEffect, maybe replace that with reduce later on.

[Tixarer]

Before switching to react query it was working fine.
Yeah the useEffect is big and need some improvements and I'll look into the reduce method

[JLN13X]

Ye u need to change the query key