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
How to get all of a paginated resource
Currently I've built this FN that serially fetches all of a resource:
```ts
import type { QueryFunction } from '@tanstack/react-query';
import type { Metadata, ResourceListOptions } from '@dn-types/api';...
Refetch polling with large amounts of data in the response
One of my endpoints returns a large amount of data. I want to occasionally poll it for changes, but I don't like how I get ALL of the data even when nothing has changed.
I've been thinking about redesigning so that I use 2 queries, one for the polling which would watch for a change state return (small payload) which would then trigger a full pull. But this doesn't seem like an ideal practice.
I don't have a lot of control over the endpoints, so I can't really redesign the API to send less data without causing lots of drama. ...
Calculating the total time taken for mutation
Hi I have a function for mutation, and I want to know the total time taken for the function to execute.
That is, the difference between the time from onSuccess and start of the function.
Currently what I am doing is returning the start time from the mutation function and accessing it in the data on onSuccess function,
...
@tanstack/react-query-devtools
Is this dep a dep ot a devDep? It's not clear at all for me if I should install it as devDep and decrease the bundle, thanks
Use react-query with IndexDb with SSR randomly throws window not defined
I have a code similar to this:
```
const { data } = useQuery("idx", async () => {
const result = await indexDb.get("mykey");...
Getting a promise from useQuery
I have a button which navigates to some screen when clicked, but this navigation requires some initial data which has defaults stored in user settings. I am fetching user settings with useQuery. Instead of disabling my button until the settings have been loaded, I would rather be able to get a promise from useQuery somehow so that I can await this on-click (given that settings haven't loaded by the time the user clicks). I know I can just refetch, but that would be a bit slower.
Is there any way to do this natively? Thanks...
Interval useQuery in Provider Context
I'm calling api interval useQuery in Provider Context. It causes re-render after interval time in child component? Anybody can help me explain that and how to fix it? Thank you!
useQueryClient ambiguous behaviour
I have been trying to access isMutating function over the queryClient provided by useQueryClient hook. Although whenever there is a mutation happening anywhere in the app, queryClient.isMutating() doesn't really return anything. But when we use useIsMutating hook for accessing if any mutation is happening it does return proper value. I am not sure why this is happening. Or maybe there is missing knowledge on my side. Please let me know
Here is the codeSandbox link with minimal reproduction: https://codesandbox.io/p/sandbox/goofy-sun-l2wjth?file=%2Fsrc%2FApp.js...
useSuspenseQuery and isFetching
[Apologies that this question was mistakenly posted first in the react-router channel. Moving here now.]
According to the React docs, when you wrap part of your application in a Suspense component and specify a
fallback, then the fallback component will be rendered until all children have completed their data fetching. In other words, if queries in child components are in a fetching state, then the fallback is rendered instead of the children. When child components have finished fetching, then they are rendered.
That being so, I'm confused about the useSuspenseQuery example mentioned in the Tanstack docs and in particular the isFetching status. The component in the Project.jsx file is defined like so:...Infinit Query avoid useless refetch when part of the list is updated
Hello I am working with infinit query to fetch a list of group. when I access the detail of a group I need to refetch the detail even if the data is present in the list of the infinit query. When I update a group I need to refetch the detail and the infinit query.
So I wonder if there is a way to avoid all those useless refetch.
For example: ...
Unable to cache data with `prefetchQuery` on server + `useQuery` in client
Test-case: https://stackblitz.com/edit/stackblitz-starters-skmfha?file=app%2Fform%2Fposts.tsx
Each time ./posts gets refreshed, the terminal prints "in getPosts" which is a message sent by the getPosts() function. I was under the assumption that getPosts() function will only be called again once the cached data expired, but it seems to be called every time the page gets refresh.
Is this the expected behaviour or am I doing something wrong?...
Error loading, too slow and also initialData first 2 times get undefined:
```js
const [billData, setBillData] = useState<Bill | null>(null)
const [showDetails, setShowDetails] = useState<any>(false)
const { user } = getUserLS()
...
is there any peer dependency for old projects?
I want to install react-query in one project from my work. It's using gatsby 4.2 , nodejs 20, and typescript 5.0, but we are not using latest babel/eslint/etc versions. So I had problems installing react-query-devtools. This library would work fine without the devtools?
We're planning to update all our dependencies from this project but in the next 4-6 months. But we want to switch to react-query from now. Any ideas?...
Refetch data on error
Hey, on Error I want to render a toast with a button that will refetch my query.
In v4 I could add
onError callback to useQuery , call my toast method there and pass it a refetch method to a button onClick callback.
In v5 there is a global onError callback for QueryCache instance, but I don't know how can I refetch my query there as I have no access to refetch method....How do I keep derived data in sync
Hi All!
Like most here I'm pretty new to react query and I don't know I'm complicating things too much. So I'm trying to use react query as a state manager but I'm having an issue trying to keep derived data in sync. My setup is like this, I have multiple api hooks, each with useQuery and useMutations, I then have another hook to consolidate/combine the hooks and create some derived data. I have a component with a button that will run one or more of the mutations from the combined hooks. I want to use the cached data as the derived data so that I don't have to use the useEffects and useState and what not but I don't know how to go about it. I hope this makes sense. Thank you for your time 🙂
```javascript
const useApi1 = () => {...
How to check if useQuery data changed
Hi I'm new to this so sorry if this is easy to do but i cannot figure out how to check if the data in the useQuery has updated. The reason I need to check this is cause i have another value I want to change only when data changes and not on every render.
This is my query
```...
fetchQuery
Is it possible to use fetchQuery with a staleTime of 1 hour and a gcTime of Infinity, so every time it should just return the cached data but after one hour it should refresh the cache, BUT in the background so when i call it, it should still return me the data directly since it has it in cache?
Im doing this
```ts
router.beforeEach(async (route) => {...
Best way to get data inside inner components?
Hello, thank you in advance for your time. I am really new in Tanstack query and I would appreciate your help.
I am using NextJs for a project and I have in my index this code.
const {
data: store,
isFetching,...
useQuery always refetching
Hi 👋 I'm new to using useQuery and I think I already follow the instructions from the documentation, so here is the snippet of my code,
`const { data, isLoading, error } = useQuery({
queryKey: ["financialSankey", ticker],
queryFn: () => fetchReport(ticker),...