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

deep-jade

4/3/2024

Best Practices for Using tanstack-react-query with GraphQL in a Monorepo Structure

Hey 👋🏽 , I am using tanstack-react-query in a monorepo. I have a package called shared-features. This package contains features, which uses react-query. I'm using GraphQL, so I can't just use a defaultQueryFn. I need a way to inject a query-fn. Here's my current setup at the main-app, which should consume the shared-features-package. ```js...

future-harlequin

4/2/2024

`useInfiniteQuery` stalls at 'pending' status in NextJS App

Hi everyone, I've been trying to get a custom hook to work for a while now. The hooks is just a wrapper around useInfiniteQuery which helps me get some data which I want to render out on the screen. Here's what I'm currently trying: ```typescript export const useGetLodgesInfinite = (payload?: LodgeService.GetLodgesPayload) => {...

optimistic-gold

3/31/2024

When my useQuery is in error state, it seems to auto refetch.

Is this an accurate assumption? What is the interval time at which it refetches? How can this be controlled?

unwilling-turquoise

3/30/2024

data not getting updated immediately

hey everyone! im using react query to fetch data. But when i update some data on backend(supabase) then the updated data is only seen once i refresh the app. invalidatequeries not working and in log also the updated data coes after refreshing cananyone help on this...

harsh-harlequin

3/30/2024

useForm defaultvalues

So useFrom provides a way to populate the form with default values the problem is that when we use usequery it does not returns a promise so we cant really await that and i tried to wrap in new promise constructor that does not work either.. so how can i await the react query inside a function so when the data is available i will be able to populate the form https://www.react-hook-form.com/api/useform/#defaultValues...

foreign-sapphire

3/29/2024

What data strategy should I use?

I have another situation, similar to my last post, but in a different application. The application has more than one List screen, each with it's own paginated list of Item's. The Item in question is the same for each screen, but each screen is querying our backend with different filters. There is also one Details screen that takes in an ID for an Item and displays it. This is my current data strategy:...

flat-fuchsia

3/28/2024

Is it possible to call a mutation inside of a Next.js server component?

I want to mutate data on our GraphQL backend but the component I'm in is a server component inside of a server component and I can't change it to a client component because you can't have client stuff inside server stuff. Is it possible to run a mutation inside of a server component? For queries, I use queryClient.fetchQuery but there doesn't appear to be a similar method on queryClient....

stormy-gold

3/28/2024

Refetch mutation after user action.

Hi ! I have a useMutation to get datas and display it on a Table. I would like to refetch my datas without havin to refresh de page. but i don't understand how can i use my queryClient to trigger the refetch....

inland-turquoise

3/28/2024

Is there a way to persist data like `useInfiniteQuery` does, but for parallel queries?

I send few parallel requests to get info about n days, but if number of results is not enough I'd like to make another fetch (for another n days), and persist data from previous fetch. Is that possible somehow?

ratty-blush

3/28/2024

data from useInfiniteQuery hook returning undefined despite the API correct returning it

The data property from the useInfiniteQuery is returning as undefined even with the response returning the correcta data. Does anyone know the reason?

wise-white

3/27/2024

im using react query 3. how can i get the data for a set of queries or the is loaded/successful

im using react query 3. how can i get the data for a set of queries or the is loaded/successful .. but i need to match just the begining of the key because the rest of it is dynamic.

noble-gold

3/27/2024

Knowing the current page of `useInfiniteQuery`

We're implementing a text search interface that lists up to 10 results from a starting timestamp and query, so we can bi-directionally search. Is there a good way of knowing what our current page is? I've skimmed the docs and probably missed something but the only thing that comes to mind is a local state variable.

narrow-beige

3/27/2024

Implementing Data Polling with Stale Data in Next.js 14 using React Query

Hey everyone! 👋 Let's delve into a scenario: In the app I'm developing, there's a flight details page designed to display real-time flight information. The challenge is that this data needs to be updated every few seconds....

foreign-sapphire

3/26/2024

queryKey works as string but not with number

Hi guys! I've a query key: detail: (id: number) => ['decks', 'item', id], When I make an edit mutation I got a result from the server, where id is number. So i use setQueryData with it....

solid-orange

3/26/2024

Failing to integrate react-query devtool triggers with tanstack-router

Hi friends : D I posted this question first on the tanstack-router question board and it was suggested I might have more luck here I would like to be able to trigger the rendering of the errorComponents and pendingComponents by clicking on the corresponding triggers in the react-query dev tools but I'm getting mixed results. ...

modern-teal

3/25/2024

Avoid firing useQuery on every render

Hi! So I have a useQuery for getting a list of items and let's say this list is then put into a checklist. Now my problems is, every time I change a checkbox state, the page rerenders and it fires the useQuery again. How would I go about limiting the useQuery here? Thank you! Note: Not sure if makes a difference, but I'm using Tanstack Table and the checkbox is to select the row....

other-emerald

3/25/2024

Suggestion for accessing useQuery data

Context: We are looking forward to migrate our async data handling layer of useContext + useReducer to react-query. Currently we are in react v17 which means we have use react-query v4 We have an page which has header section (with high level info) and side tabs. Each tab will have multiple api calls (both parallel and dependent ones) and also multiple components which might only interest in specific data from specific api....

optimistic-gold

3/25/2024

How to initiate search params from initial api response without triggering re-fetch?

1. I fetch initial data using useQuery and no search params that are passed down as args and part of queryKey 2. Endpoint returns initial parameters. 3. I add these initial parameters as search params to the URL 4. I retrieve these params via useSearch from the router to show UI based on it it 5. Since search params also feed the useQuery and now that params exist, queryKeys changed, and data is fetched again...

correct-apricot

3/25/2024

fetch "get" data in form submit

Hi, I don't understand how I can retrieved data in my submit function. I have to validate that some data still exist upon submission by calling a get api and see if the object is still there....

other-emerald

3/24/2024

invalidateQueries / setQueryData post mutation not triggering the rerender of all consumers

When I invalidateQuery or setQueryData post mutation only component that does the mutation getting the rerender. other components are not rerending. https://codesandbox.io/p/sandbox/react-query-not-rerendering-on-data-change-fx3fw7?file=%2Fsrc%2Ftodo.tsx I am not able to trigger rerender for all the consumers of the data....

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