TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

optimistic-gold

7/20/2024

Infinite Query making redundant calls?

My infinite query seems to be making redundant calls after the initial call (see attached video and images). If anyone has any ideas about why this would be, I would appreciate it. Thanks....

rival-black

7/20/2024

Infinite query with maxPages scrolling

In my react-native app I have a list of posts supplied by an InifiniteQuery. When maxPages isn't set, it works as it should. Scroll to the bottom of the list -> new posts are fetched -> list gets longer -> I can scroll more. But when maxPages is set, there's an issue. ...

vicious-gold

7/20/2024

Tanstack Query + useRouter (Next Navigation)

Hey guys, I'm trying to redirect users to /helloworld if res.status equals 401. However, it shows the children content before redirecting, causing a layout shift.

rising-crimson

7/19/2024

Invalidate query functionality

It is not very clear to me how the method works exactly. My question is, does it mark the query as invalid and then the other methods dont fetch it again or does it first execute it bring the date upfront and then delete it? Does it also raise a flag when it invalidates a query?...

fair-rose

7/19/2024

Debugging tips for missing response with msw mocks

I am trying to set up mocks with Orval and MSW for a React Native app. I have the server running with the handlers from Orval, and I can console log to tell myself that my request is being intercepted and that some reasonable mock data is being returned via HttpResponse. However, the actual response that react-query seems to get is nothing; when I use the dev tools the query state.data is an empty string. I'm sure I've misconfigured something, but I've kind of reached my debugging boundaries. Ar...

fair-rose

7/19/2024

How to handle a function dependency of the query/mutation function?

Given a query or mutation where the query/mutation function depends itself on another function, will the query/mutation always run with the most up-to-date function? Should this be managed somehow? E.g., ```typescript const myFunc = useMyFunc(); const mutation = useMutation({...

probable-pink

7/19/2024

Tanstack useInfiniteQuery hooks missing last page and hasNextPage return false

hello there I am using useInfiniteQuery for infinite scrolling, from backend I am getting data in this formate when I hit this querry. ```js // function to get data ...

exotic-emerald

7/18/2024

useQuery don't not call under async method

here the useQuery call ```ts const { status } = useQuery({ queryKey: ['events'],...

like-gold

7/17/2024

useQueries question

Hi gang, I'm looking for some guidance with UseQueries: I'm using useQueries to combine queries that I have already defined custom hooks for. It seems that I can get away with only specifying queryKey in the queries array of useQueries. The function seems to map the queryFn already defined for each queryKey. However the documentation for useQueries is a bit sparse so Im unsure if this is an acceptable pattern. Should I instead redefine the function for each entry in queries?...

other-emerald

7/16/2024

Query reload QueryFn problem

Hello friends, how are you, I am presenting an update failure when using useQuery in the queryFn. I am using react native with Expo. Changing the 'queryFn' function completely is supposed to reset the useQuery and resubmit the request, but it doesn't. continue with the old function 'That's if I have the function in an external file'. but if I have the function in the same react component, the function is updated but with some kind of delay, example: function 1 says hello word, and function 2 say...

secure-lavender

7/16/2024

Enabled prop

   queryFn: () => fetchLiveMemePrice(slerf?.price!, raydiumPoolAddress!),
    enabled: !!slerf?.price && !!raydiumPoolAddress,

   queryFn: () => fetchLiveMemePrice(slerf?.price!, raydiumPoolAddress!),
    enabled: !!slerf?.price && !!raydiumPoolAddress,

vs...

optimistic-gold

7/15/2024

Testing react query with Suspense and react testing library

I have a simple test like this ``` const { user, debug } = await setup( <Suspense fallback={<div>loading</div>}>...

stormy-gold

7/15/2024

Persist data and network error

Hello guys, I wanted to use my custom asyncQueryClientPersister as a offline system for my mobile app. It seems to works, except that the first time the request fail, it will work and get last data fetched, but if I try again, it will then remove the stored data because last response is a network error and it seems to erase older data's. Is there a way to prevent this ? Or any other idea to make my app offline ? (I'm using Capacitor to run my JS website as a web app)...

correct-apricot

7/15/2024

queryClient.getQueryData returns undefined when page refresh

Hey guys i encountered the weird issue with queryClient.getQueryData which returns undefined when I refresh the page. But i can see the cache data in localstorage. and the other thing is its working fine when i run with localhost connecting the soruce. but when it builds its undefined on page refresh

const queryClient = new QueryClient();
 const articleStories = queryClient.getQueryData(['home-data']);

React query version is ^4.29.7...

extended-salmon

7/14/2024

I have the ID in the function, but I can't call useQuery inside a function? What is the correct way

Hi, could any angel help me structure this solution, I'm using a multi-try application, when I click on a new company, I'm calling handleClick, I need to remove all the queriesKey from the old company, but I'm having trouble when searching for the new ones data, I can't do this outside the react component, esotu providing a code snippet

fascinating-indigo

7/14/2024

How do you handle undefined or missing useQuery results with Typescript?

I have this pattern in my components all the time: ```jsx const MyComponent = () => { const { data, isLoading } = useQuery( ... );...

harsh-harlequin

7/13/2024

`await queryClient.refetchQueries` resolves too early

I want to run a mutation that unfortunately has to be async, because it makes a new page that we want to navigate to ASAP. So currently, I await mutateAsync, and await queryClient.refetchQueries for the appropriate query key. However, the promise for refetchQueries resolves before the refetch is actually complete - why is that? The promise resolves while the refetch is not finished, and my page tries to redirect to a page that has no data yet (bad). Here is my sample code:...

genetic-orange

7/13/2024

Global error handling & Localization

Hi there! I have a question related to global error handling and localization. Since the QueryClient is created "outside" of react for stability (currently I'm using useState to persist it on potential re-renders), my normal approach of using my useTranslations hook for translations is not viable without re-creating the QueryClient. ...

genetic-orange

7/12/2024

Alter error object returned from queries

Hi there! I'm trying to implement localized errors, by throwing errors from the server containing translation keys. Currently I just have a custom hook, like useErrorMessage (see attached image) for handling this. I'm wondering if it is possible to configure the QueryClient in a way so that all my queries are automatically returning a new property like, I18nErrorMessage, that is the result of running my custom hook?...

like-gold

7/12/2024

Refetch after invalidate doesn't respect the enabled false

In react query v5 I'm facing the same problem described here https://github.com/TanStack/query/issues/1965. After a mutation I'm calling the query invalidation function with refetch type 'all' and it is calling the queryFn even if it's disabled. it is someone else facing the same issue?...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs