403 questions
0
votes
0
answers
66
views
Using Tanstack Query with Tanstack DB: Instant update when deleting and adding
I am new to everything here, I need help if this will load fast.
The Problem: When i am using normal API Calls, it takes a while to update the UI of the changes. I’m currently working implementing ...
- 1
-1
votes
1
answer
384
views
What is the use case for TanStack Start useServerFn hook
I am currently exploring TanStack Start (with React).
At What are Server Functions? page we have example of server function that can be used with useQuery (from TanStack Query, to fetch data from ...
- 41.2k
0
votes
0
answers
31
views
Tanstack Query: Multiple chained POST calls with rollback
I have an issue where I need to make 3 chained POST calls using Tanstack Query.
POST with query 1
If query 1 fails, stop
If query 1 succeeds, make POST query 2
If query 2 fails, rollback query 1
If ...
- 11
0
votes
1
answer
85
views
How can I have a delay until useQuery/refetch have returned the data
I am developping an iOs/Android App with React Narive.
I am using useQuery (TanStack Query v5) to send the username and an hashed password to my database and it return the user ID if the email/...
- 11
0
votes
0
answers
37
views
Can a Tanstack query function return the results of another query function?
We're in an awkward situation needing to consume an API endpoint that is not built correctly. It returns pages of (unsortable) records without revealing beforehand how many pages there are in total.
...
- 438
0
votes
1
answer
164
views
Can Tanstack/React Query handle dynamic parallel queries that are computed based on earlier queries?
I see that Tanstack Query supports parallel queries in a certain way that is dynamic, per this page: https://tanstack.com/query/latest/docs/framework/react/guides/parallel-queries#:~:text=each%...
- 438
-1
votes
2
answers
117
views
React hook form + react query. Sync defaultValues on refetch without clobbering dirty fields, and hard-reset after submit [closed]
Context
I’m using React Hook Form together with React Query. The parent component fetches data with a query, derives defaultValues, and passes them into the form.
Parent component:
export const ...
0
votes
0
answers
20
views
React Query Cache Not Updating After File Upload - Manual Invalidation Required
Problem
After uploading new trade files through an "Upload New File" dialog, the trade reconciliation table shows stale data from the previous upload instead of the updated data. The table ...
- 35
0
votes
1
answer
87
views
problem with Hooks and Components: Error Invalid hook
I’m building a react native app using expo and I created a component called FlightList.tsx that fetches flight data using a custom hook useFlightList.tsx (which internally uses React Query’s useQuery)....
2
votes
0
answers
65
views
TanStack query local storage full
We are using TanStack query (Vue) for storing a lot of states in the local storage.
But what happens if the local storage is full?
Will it just discard the oldest query if we store a new query?
0
votes
0
answers
97
views
How to use queryClient.prefetchQuery/usePrefetchQuery to cache next set of results in TanStack Query in React?
I am creating a dating app's swiping page in React using TanStack Query. When swiping on the last user in a batch of profiles received from the database, the user has to wait for the next batch to be ...
- 11
0
votes
1
answer
142
views
TanStack Query useMutation is not return isSuccess true after success response
I have an authentication system. calling Api's using tanstack query.
When logging in, signing up, and verifying email using the link, everything works fine. However, when I check the mutation's ...
0
votes
1
answer
136
views
RefetchInterval, and QueryKey Changing, will this cause two network requests?
Really need some help understanding the nuances and effects of how refetchInterval, and queryKeys interact with each other.
Currently, I have a UI that is stuck on loading state. I suspect it is ...
- 131
0
votes
2
answers
52
views
How to make react-query wait till input data used in request is resolved with other API call?
I am using tanstack-query and have dependent queries to do:
const { resourceId } = useGetResourceId(); // resourceId: number | null
const { data, loading, error } = useGetResourceData(resourceId);
...
- 4,339
0
votes
0
answers
206
views
Implementing Tanstack Query default query function with common api hook
I am new to React and TanStack and i try to write a React SPA (TypeScript) which shows up a data table after a successful login.
The project uses TanStack Query V5, axios for data fetching and React ...
2
votes
1
answer
82
views
how to manage jotai atoms effectively to prevent circular dependency when using joati on frontend, with react-query?
I am trying to create a sort of complex react/jotai game with a next.js frontend server router connected to an express/node.js backend server.
I keep getting circular dependency issues.
I tried using ...
- 23
0
votes
0
answers
39
views
react-table get column head title
I am using @tanstack/react-table React Table in a Next.js application. Want to show a list of columns to select from to display in the display
However, the columns displayed are the column IDs ...
- 9,922
0
votes
1
answer
203
views
Put query into isPlaceholderData with QueryClient methods (while using keepPreviousData)
I have a query that uses placeholderData: keepPreviousData. This means the
query is in a hard loading state, with no placeholder data, on initial mount.
Then, when the queryKey changes, it goes into a ...
- 1,321
0
votes
1
answer
72
views
React-query isRefetching is triger loader in RefreshControl at first mount screen
In my react-native project, I use tanstack react-query: https://tanstack.com/query/latest/docs/framework/solid/reference/useQuery#isrefetching-boolean
Why is isRefetching executed if I don't call ...
- 458
0
votes
0
answers
72
views
How to pass extra data to tanstack useMutation?
I have several requests to add and change data:
const updateRwStationsQuery = (id: string, data: RwStationDto) => {
return apiInstance<RwStationDto>(`/rwstations/${id}`, {
method:...
- 160
0
votes
0
answers
32
views
How to modify current data with new value from result of separate API calls using React Query
Current Situtaion
Part of my ReactJS app has a social section where users can post messages and reply to other messages.
I have an API call that returns a list of posts, each post contains an id, ...
- 13
0
votes
0
answers
228
views
Vite + TanstackRouter + SSR
How to Properly Hydrate a TanStack Router + Vite SSR App Without Using TanStack Start?
I'm trying to implement server-side rendering (SSR) in a TanStack Router + Vite React project without using ...
1
vote
1
answer
97
views
How can I handle 404 error when prefetching data with usePrefetchQuery?
I use an infinite list for which I prefetch data on the app startup. Everything works great except for when I hit 404 error if, for example, I manually change the url to a wrong one. Then the whole ...
- 263
0
votes
2
answers
119
views
How to refetch from a client component with useQuery
I have a client component that fetches the list of project and a dialog box that creates a project but I cant update the project list unless I have to do a manual refresh on the browser.
The flow is:
...
- 1,874
0
votes
1
answer
70
views
React Tanstack Query cache update
React Query not updating my list on first render
My list is not updating when i come back after updating my list , but my api is returning updated data
export default function App() {
const [id] = ...
- 136
0
votes
1
answer
120
views
Unknown timeout error when refetching a query
I am having a dumb moment. I use Tanstack Query and Ky in my app to make requests and inject jwt tokens in them. Every time a request hits a 403 error, the request gets resent after acquiring a new ...
- 263
4
votes
0
answers
263
views
How to test useSuspenseQuery hook
Recently I read about new hook useSuspenseQuery provided in @tanstack/react-query v5.
Previously I have used useQuery and have written unit tests on it.
I am trying to write unit tests on ...
0
votes
1
answer
119
views
How to invalidate a query with specific parameters using queryClient.invalidateQueries in React Query v5
I’m using React Query to manage my queries, and I have a scenario where I need to invalidate a query with specific parameters.
useQuery({
queryKey: ["users", { page: 2, pageSize: 20 }],
queryFn: ()...
0
votes
0
answers
34
views
React Tanstack Query useInfiniteQuery network issue
I have a React app with a profile outlet route, where the index is the 'products'. I also have a similar route called 'savedProducts'. The difference is that the 'products' page lists by outletparam (...
0
votes
0
answers
162
views
Troubleshooting createTRPCOptionsProxy with Server Components and Context Passing
How does createTRPCOptionsProxy work in server components?
I'm creating a context that passes the hono context to createTRPCContext in order to obtain the HTTP headers, since I need to forward those ...
0
votes
0
answers
23
views
Infinite query fetchNextPage modifies first page's data
I have a mutation where I append a comment to the first page (pages[0]). In my onMutate, I cancel any ongoing refetches (if we're not fetching a subsequent page) and then refetch in onSettled
Mutation:...
- 105
0
votes
0
answers
51
views
Electron Vite dist build not referencing dynamically imported form-data package required by Axios for dist build
Im building an Electron App with Vite that uses Axios. It seems that Axios requires a dynamically imported package called form-data. When running my built .exe portable after Ive built it I get the ...
- 809
0
votes
0
answers
48
views
How to avoid infinite scroll loops in a table?
I'm working on a React project using Tanstack Table to manage the state of the table and Tanstack query to manage the fetching of data from the server.
In my query, I load every 10 emails at a time, ...
0
votes
0
answers
44
views
"Error: No QueryClient set" when using TanStack Query in a component package across repositories in Next.js
I have a Next.js application (main-app) that imports and uses UI components (widgets) and API hooks from a separate repository (abc-widgets).
These widgets internally use API hooks that rely on ...
1
vote
0
answers
173
views
Using tanstack query for async task management
This stack overflow post talks about the when to use the mutation hook vs the useQuery hook. The gist of it was:
If you're reading data: useQuery
If you're creating/updating/deleting data: ...
- 11
0
votes
1
answer
364
views
implement simple pagination in Nextjs 15X
I am Vue developer for years ,
now I am trying to learn Reactjs and Nextjs.
and I am implementing user list page that include pagination ,
I have some problem with that
this is my code :
"use ...
- 1,658
0
votes
1
answer
49
views
React Query Caching
With my site I am using Tanstack react-query. Now caching seems to work when navigating between pages and I can confirm that by checking the network log and no extra calls are made.
Now is it fair to ...
- 408
0
votes
0
answers
75
views
React Query Stuck in Loading State on 406 Not Acceptable Response with Axios
I'm using React Query (@tanstack/react-query) to fetch RDF data from an API with Axios, but when the API returns a 406 Not Acceptable response, the query remains in a loading state indefinitely ...
- 117
3
votes
0
answers
387
views
useInfiniteQuery fails on React Native with "observer.getCurrentResult is not a function" error in @tanstack/react-query ^5.66.3 or higher
When using useInfiniteQuery in React Native environments (Android and iOS), the app crashes with the error: "observer.getCurrentResult is not a function (it is undefined)". This error does ...
- 11
0
votes
1
answer
204
views
how to use React Query (TANStack) in next js server components?
A lot of people are saying that use React Query for efficient data retrieval. But to use useQuery hook I have to make every component "client component" then what would be the purpose of SSR ...
0
votes
0
answers
122
views
Show useQuery is still polling when either initial fetch or refetch?
I am using v4 of useQuery to poll and re-poll an endpoint until the correct data is fetched, or until a max re-poll count has been met.
However, I'm not sure how I can most effectively that the ...
- 6,466
0
votes
1
answer
122
views
Unnecessary re-rendering and API calls using Tanstack table and Tanstack Query
I'm using React with @tanstack/react-table and react-query to implement a paginated table with server-side filtering and sorting. I'm encountering an issue where selecting a date filter sometimes ...
0
votes
1
answer
288
views
Why is react-query invalidation bleeding across tabs?
I have 2 instances of storybook running an application locally. I have 2 tabs open on localhost:6006 and localhost:6007, and I log in as a different user on each.
I do things in 1 tab that ...
- 830
0
votes
1
answer
902
views
Canceling a react-query mutation
I have a mutation that comprises of a sequence of long-running actions:
useMutation({
mutationFn: async () => {
await firstTask()
await secondTask()
await thirdTask()
},
...
})
I ...
- 43.5k
3
votes
2
answers
768
views
Handling two cache keys for the same data in react-query
I have a Project type in my app. I need to be able to access it via two separate async function:
getProductBySlug
getProductById
At the root of the page I use the URL to derive the slug and query ...
- 43.5k
2
votes
1
answer
798
views
Adding Tanstack react-query to laravel 11 reactjs inertia project
Any idea how to add tanstack react-query to laravel 11 reactjs project?
The apps.jsx looks like this
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) =...
- 2,440
0
votes
1
answer
442
views
Next js react query v5 useSuspenseQuery, 401 unathorized
I want to use useSuspenseQuery along with next js so that I can take advantage of the built-in React feature.
But when using useSuspenseQuery, it gives an error img
query
const { data, isLoading } = ...
- 1
1
vote
1
answer
123
views
Does the refetch interval timer begin at the start of a request or after the request completes?
If refetchInterval is set to 10 seconds in useQuery, and a given request takes 2 seconds to complete, will the next request be initiated 10 seconds after the start of the previous request, or 10 ...
- 13
0
votes
1
answer
398
views
React Query in Expo wont refetch
I'm building an Expo React Native app using Expo Navigation (Stack Navigator) and React Query. When navigating between screens (e.g., from Home to Test screen and back), I need to refetch data when ...
- 119
1
vote
0
answers
94
views
Why Does My PATCH Request Occasionally Fail with Status Code 0
Problem Statement
I'm experiencing intermittent failures with a PATCH API request that runs every 20 seconds in a React application. The failures return status code 0 and seem to persist for a long ...
- 11