Stack Overflow
Stack Overflow

Questions tagged [react-query]

React Query is hooks-based library for integrating data fetching into React function components

TanStack Query provides powerful asynchronous state management, server-state utilities and data fetching for the web.

Installation

npm install @tanstack/react-query
pnpm add @tanstack/react-query
yarn add @tanstack/react-query

Links

1510 questions
152
votes
9 answers

React-Query: How to useQuery when button is clicked

I am new to this react-query library. I know that when I want to fetch data, with this library I can do something like this: const fetchData = async()=>{...} // it starts fetching data from backend with this line of code const {status, data,…
Leem.fin
  • 40,781
  • 83
  • 202
  • 354
67
votes
12 answers

"Error: No QueryClient set, use QueryClientProvider to set one"

I was trying React Query and got this at the start of my React app. import React from 'react' import { useQuery } from "react-query"; const fetchPanets = async () => { const result = await fetch('https://swapi.dev/api/people') return…
Jamal
  • 879
  • 1
  • 10
  • 14
56
votes
9 answers

What is the main difference between React Query and Redux?

currently I am using redux in different projects for state management. A few days back, I listened about react-query which is also used for state management and provides caching and async fetching. I am trying to figure out the main difference…
Sanan Ali
  • 2,349
  • 1
  • 24
  • 34
48
votes
2 answers

Conditionally calling an API using React-Query hook

I am using react-query to make API calls, and in this problem case I want to only call the API if certain conditions are met. I have an input box where users enter a search query. When the input value is changed, a search server is called with the…
Tom Harvey
  • 3,681
  • 3
  • 19
  • 28
35
votes
2 answers

what is difference between tanstack/react-query and react-query

As these are downloadable from npm with their names with different sizes. In which scenarios we must downloads tanstack react query and for which react-query.
Jahangir Hussain
  • 391
  • 1
  • 4
  • 10
31
votes
2 answers

How to call useQuery hook conditionally?

Because of the Rules of Hooks, one shouldn't call hooks conditionally. So how does one fetch data conditionally using useQuery? For example, let's say I want to fetch data inside a functional component, but only if someState === someValue? i.e I…
M. M
  • 520
  • 1
  • 5
  • 9
29
votes
2 answers

What are staleTime and cacheTime in React-Query?

I have read React Query docs. Still, I do not understand how to use staleTime & cacheTime for data caching. I want to store data for 2 mins in the cache after first-time API call. No matter if the component mounts or unmounts, I don't want an API…
meet d
  • 418
  • 1
  • 3
  • 8
25
votes
2 answers

What is the correct way to pass parameters to a React-query useQuery method that uses Axios

I am currently building a Ruby on Rails Webpacker application with a React front end. I am at the point where I would like to create all the quires I need to make calls to my Rails API. I was loosely following this tutorial…
humbledev7000
  • 275
  • 1
  • 4
  • 8
24
votes
3 answers

react-query: Refetch Query only if the state variable is changed

I have a select option menu. So, When a user selects an option, I want send a GET/ request to the server with that option and recieve the filtered data from server. This can be achived using useEffect(() => {// send the request},…
Ashik
  • 2,888
  • 8
  • 28
  • 53
21
votes
13 answers

Invalidate queries doesn't work [React-Query]

I'm trying to invalidate queries every times users press button "likes" to refresh all queries but without success so far despite following the docs. I have a component that get data : const { data: resultsEnCours, isLoading, isError, …
yoann84
  • 518
  • 1
  • 3
  • 14
20
votes
7 answers

Is there any solution to mock react-query's useQuery and useMutation while working with react testing library

I'm working on test cases with react testing library. To write the test case I need to mock the useQuery and useMutation method of react query. If anyone knows the solution please guide me. I'm adding the related code…
Rahul
  • 201
  • 1
  • 2
  • 4
20
votes
3 answers

react-query - What's the difference between useQuery and useMutation hook?

Trying to find an answer regarding react-query. What's the difference between useQuery and useMutation? From what i understand useQuery's are dependent calls. useMutation are for posts that require updating the current state (cache invalidation,…
chrisjlee
  • 21,691
  • 27
  • 82
  • 112
18
votes
2 answers

react-query: how to get the data from useQuery in onSuccess callback?

I am learning react-query and I meet some problems. I want to use the data I get from fetching data by useQuery, but I get data as undefined. Here is my code: import React from "react"; import { useQuery } from "react-query"; import { fetchData }…
Shiqi
  • 837
  • 1
  • 10
  • 18
18
votes
2 answers

React Query doesn't seem to be caching

I was following an example I saw on YouTube for using React Query, but I can't seem to get the caching to work as expected. In my app the data is fetched every time. Not sure if I'm missing something obvious. Here is my code:…
wy125
  • 203
  • 1
  • 2
  • 5
18
votes
4 answers

How to handle multiple queries with React-Query

I've started playing with React-Query and it works great if I only need to fetch data from a single collection in my database. However, I'm struggling to find a good way to query multiple collections for use in a single component. One Query (no…
Beadle
  • 389
  • 1
  • 2
  • 11
1
2 3
…
99 100