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

absent-sapphire

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. ...

continuing-cyan

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.

ugly-tan

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?...

sensitive-blue

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...

absent-sapphire

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({...

rare-sapphire

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 ...

stormy-gold

7/18/2024

useQuery don't not call under async method

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

continuing-cyan

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?...

adverse-sapphire

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...

wise-white

7/16/2024

Enabled prop

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

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

vs...

other-emerald

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>}>...

complex-teal

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...

rival-black

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

extended-salmon

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( ... );...

ratty-blush

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:...

deep-jade

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. ...

deep-jade

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?...

rising-crimson

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?...

extended-salmon

7/11/2024

Make an offline app

Hello, I have a Capacitor mobile app, and I decided to use react-query for it's cache system (and for many other things), but I'm still new with that library and I'm not sure on how it will behave and how should I use it. My goal is to make my app available offline, by showing the last data fetched. So I found a way to use a CordovaSQLite driver to make an asyncStoragePersister, to save the data in a safe and sustainable way....

noble-gold

7/11/2024

typescript type when I pass an onSuccess callback to my custom hook

Hey guys, I have this custom hook and I want to be able to pass a onSuccess callback to it, but I don't know which type should I use here ? I have done this but if the type returned from the function change i will have to change the type, is there some more opitmal? ```tsx export const usePatchCampaign = ({ onSuccess, }: {...

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