Questions tagged [tanstackreact-query]

use this tag for questions related to https://github.com/tanstack/query

tanstackreact query is async state management for JS/TS and related frameworks. For more details please check here

72 questions
0
votes
0 answers

tanstack react query one step behind in updating the screen when queryClient.invalidateQueries is used onSuccess

Trying to build a simple CRUD proof of concept app with GoHighLevel v.1 API at the backend. during Insert and Delete it is updating the screen but one step behind. I mean, when Item1 is deleted it deletes the item from the backend but does nothing…
Da Moose
  • 111
  • 1
  • 14
0
votes
1 answer

Race condition with React Query

I'm trying to create a Todo app with react query and I'm facing race condition issues. I have a Todo page, the user update/create new todo, and clicks save. the save process can take something like 3 seconds depends on the user internet…
0
votes
1 answer

How do I keep TanStack useQuery from refetching data when it returns results from its cache?

I have a web site that uses TanStack's useQuery hook to get data and an API to provide that data. Recently, my API hit a breakpoint while I was debugging it. This happened prior to my API returning its response but I noticed that my web site had…
Bernard Hymmen
  • 825
  • 1
  • 7
  • 14
0
votes
1 answer

Conditional Use of a React Hook

I am attempting to wrap useQuery to centralize my use of it. However, the issue I am running into is the queryFn is built at runtime, so when wrapped in my custom hook, I have to conditionally return the hook's promise based on whether the queryFn…
steventnorris
  • 5,656
  • 23
  • 93
  • 174
0
votes
1 answer

How to reset form to initial values after the React Router v6 action

I create a client side routing with new React Router v6.4 features: action and loader I use React Query (aka TanStack) for async state menagment and redux for simple state management. And Formik to control form. How can I return the form to its…
0
votes
1 answer

React: How to send multiple post requests depending on each promise resolved and send all resolved data after all requests are resolved(SOLVED)

I want to send multiple post requests with one click. Every post request will be sent after the previous one is resolved (whether it's right or wrong). Then I need to collect all resolved responses in an array and finally send that array. Note: I'm…
0
votes
1 answer

Getting error on page refresh using @tanstack/react-query

I have this React app (using Remix.run) and I'm trying to fetch some data. When I come from the main page into my sub-page, everything works fine, I get the data fetched, but when I refresh the sub-page while inside it, I get the error Cannot set…
0
votes
0 answers

React connection with Strapi API call doesn't work correctly with React Query

In the following code I use the plugin react-query to make an API call to strapi. When I open the application it doensn't work at first and I get the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'data') When I…
JosineD58
  • 27
  • 5
0
votes
2 answers

props not passing to api via React query

I am trying to use react query to call an api but am unable to pass props to the api url. the props get consoled but do not pass to the api endpoint //useData.js import { useQuery } from "@tanstack/react-query"; import Error from…
0
votes
1 answer

Why is my React query in Next.js with tanstack/react-query still making API requests before the staleTime is up?

Im testing react-query and SSR from nextjs to prefetch data only when the staleTime is gone. But after testing it, every 20 seconds a new get request is done to the API, even if the the staleTime is more than 20 seconds. I don't really understand…
0
votes
2 answers

useQuery runs 4 times instead of 1 and then stops with an error message, in react

I'm using useQuery inside a custom hook, called usePostData. this is the custom hook code: import { useQuery } from "@tanstack/react-query"; import axios from "axios"; const usePostData = (queryKey, endPoint, object) => useQuery( [queryKey], …
0
votes
2 answers

How to use the react-query result inside the QueryOptions

I want to use the result of a react-query v3 useQuery statement to possibly stop refetching, depending on the result. Therefore I'd use the response data object in the QueryOptions to determine the enabled value: const { isLoading, data } =…
cachius
  • 1,743
  • 1
  • 8
  • 21
0
votes
1 answer

React query isLoading and isFetching Issue when localStorage value is updating

I am creating a cart page for an ecommerce site. I am using redux for state management and react-query for data management. I am new in redux and react-query. I am facing some problem while updating localStorage. Redux initially setting cartItem…
0
votes
1 answer

Unable to disable react-query when variable is truthy

I'm trying out react-query on a NextJS project but somehow I can't control when it runs (partially). No request goes out but it still shows up as an entry on the react-query dev tools: const { data, status } = useQuery({ queryKey: ['user',…
dokgu
  • 4,957
  • 3
  • 39
  • 77
0
votes
0 answers

Type error when using Tanstack Query's useQueries()

I am having trouble with the useQueries functionality of Tanstack Query (formerly known as React Query). This example from the documentation (using some example data: let users = [{ id: 1 }, { id: 2 }, { id: 3 }];) const userQueries = useQueries({ …
Hedvig
  • 41
  • 5