afraid-scarlet

What method should i use to clean up the data before ovewrite it? trying with setQueryData to null.

Hello . I have a react and node project , and i encountered a problem by applying filters to my data , first i obtain general products for my page to render , then i want to apply filters to those products, and clean the previous products and only display the new ones.
I tried that by using the setQueryData to null and then setting the data to the one i needed, and it works in a weird way, cause the first time i click the button it renders me the right products but also the previous ones , and when i click it again , it works perfectly, it deletes the products i got on my first render and only shows me the filtered ones. ¿ What method should i use to clean up the data before ovewrite it? I have tried refetchQueries,invalidateQueries,cancelQueries, but none of those works (I know i´m probably not using them correctly, i´m new using reactQuery). Or is it a better way to do what i want ? To set the new queryData ("productos") to just the new ones for the first click. I would love to put a codesanbox example, unfortunately i´m having a lot of problems trying to do that. } I´m sorry for the language errors , english is not my native language. Thanks a lot to the guy that told me to put here the questions and i'm sorry if i'm making a mistake again. If more code is needed for understaing the problem, please let me know , thanks

11 Replies

like-gold•3y ago

the filters should be part of your queryKey, then you likely won't have that problem

afraid-scarletOP•3y ago

Hi, thanks for the quick response. This is how i got the queryKey , i´m using infinityScrolling . The problem is that , the first time , the filters are undefined, the first set of products i get them from a function called obtenerProductos , the filtered products i get them from a funcion called enviarFiltros. the filters are only defined after i submit a form in my page

afraid-scarletOP•3y ago

Those are my two functions

flat-fuchsia•3y ago

I don't understand why you need to clear the cache before calling setQueryData. setQueryData should completely overwrite the cache to the new value already? Also as TkDodo mentioned, it would be easier if the filters would be part of the keys. You can conditionally call obtenerProductos or enviarFiltros inside your queryFn:

useInfiniteQuery({
  queryKey: ["productos" , filters],
  queryFn: ({ pageParam = 1 }) => !!filters ? enviarFiltros(filters, pageParam) : obtenerProductos(pageParam) ,
  getNextPageParam: //...same
});

useInfiniteQuery({
  queryKey: ["productos" , filters],
  queryFn: ({ pageParam = 1 }) => !!filters ? enviarFiltros(filters, pageParam) : obtenerProductos(pageParam) ,
  getNextPageParam: //...same
});

filters can be stored in a state and that state can be updated when the form is submitted (instead of using a mutation). If you don't include the filters in the key, then the results are not cached and you loose a lot of the benefits of using tanstack query.

afraid-scarletOP•3y ago

Ohh okay. If i do that, i won´t be needing my mutationFiltros method, right?

flat-fuchsia•3y ago

yeah it shouldn't be needed anymore

afraid-scarletOP•3y ago

Oh okay , i will try and let you guys know what happens haha Thank you so much for your response

afraid-scarletOP•3y ago

Hello! I try what you told me @julien

afraid-scarletOP•3y ago

And the first time it renders the page , the function it executes is enviarFiltros .

afraid-scarletOP•3y ago

Oh okay , now that i think about it, i think is the way i´m setting the initial state Omg , yeah , it worked. @julien men you saved my life Thank you so much , believe me i just felt my soul coming back to my body , i was stuck with that for almost a week

flat-fuchsia•3y ago

Glad it worked! 🙂

Gaming

Programming

What method should i use to clean up the data before ovewrite it? trying with setQueryData to null.

Did you find this page helpful?