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
Disabling Query with refetchInterval When Tab Inactive
Hello! I think this might have been done before, but didn't really see it documented anywhere. Can anyone tell me how to prevent a query from refetching, if the tab is inactive? The best scenario for me would be:
- Query active, if tab active
- Query inactive, if tab inactive
- Query inactive, if browser not focused window...
Nextjs App Router Prefetching - Pokemon example
I was wondering if this is possible, but I’m not quite sure how to do it.
Let's say I want to display a table of Pokémon with pagination, where the page size is always 10.
I'd like to prefetch the first 10 Pokémon on the server and then, as soon as the table component mount, fetch the rest in the background.
...
Expo + React Query issue with cache
Well I try to use React Query in Expo. I have some trouble with queries not added to cache (like every first query in the start of the app arent store in cache). There is an example (here the cache is empty, doesnt make sense because I get movies with
useQuery in the home screen) :Side Effects in mutateAsync.
Is there any reason not to use 'onSuccess/onError/onSettled' side effects in mutateAsync? They seem to work fine but all examples I see have them in a try/catch.
Best way to globally handle query keys?
I have a use case where the presence of certain query params in the current url need to be added to all outgoing requests. ex. current url = "www.foo.com?bar=1". "bar=1" would be added as query params to all outgoing requests. "bar" would of course need to be added to the queryKey when calling useQuery(). Does RQ provide a way to configure this globally? Another approach would be for all consumers of useQuery() to call a shared util like "addUrlQueryParams()" when forming the query key.
where addUrlQueryParams() is something like:
```
function addUrlQueryParams(queryKey = []) {...
Examples of file upload lists / lists of mutations
Does anyone have any decent real-world examples of upload handling for a file list? I'm adding support to a drag-and-drop aware component that calls a mutation that handles a series of steps to get the file out to s3 and registered in our backend. I haven't really found any great examples of using a mutation for each item in a list that involves multiple asynchronous steps and multiple states (uploading, retrying, failed, succeeded)
Thanks!...
Using useSuspenseQuery for paginated requests
Am I understanding correctly that
useSuspenseQuery is not the preferred way to render paginated data because, when changing pages, it is harder to show a loading state due to the existing data from the previous page? Or am I missing something?
I am changing pages through React Router search params from another component.
Currently, page changes work, but there is no indication of a loading state as there is with the initial useSuspenseQuery fetching....Displaying loading spinner when uploading image by the user (using 'isLoading' state)
Hii folks! đź‘‹ I'm newbie in TanStack Query and I would have a question related to displaying the loader spinner onThe thing is also that I use a certain hook 'useGetAllImages' where there is an 'allImagesLoading' state which is initially 'false' if I understood correctly. ``` import { useQuery } from '@tanstack/react-query'; import { getAllImages } from '../api/uploads';...PhotoUploadercomponent during the process of uploading a certain photo that the user chooses. Namely, I encountered a problem displaying myLoadercomponent when uploading images. When the user selects the input field 'Choose files' and then a specific photo, at that moment I should show my loading spinner and of course hide it when the image is displayed on the screen.
HydrationBoundary fails to work when the layout itself is wrapped around HydrationBoundary component
Hey, I'm trying to wrap my head around this bug. I've a header that lists organizations and the prefetch for those organizations happens on a
layout.tsx:
```ts
export default async function RootLayout({
children,...useQueries onSuccess is deprecated,
I have 3 depended useQueries in a single hook and onSuccess I was invalidating the next useQueries, But as we removed the onSuccess, I tried to do the invalidation on useEffect but unfortunately it leads to infintie loop.
So is it ok to do the side effect on query function
.then
` const useUserDetails = (): UseUserDetailsHook => {...Keeping paginated items in client even when navigate away and back again in Nextjs SSR with prefetch
Hello, I am trying data prefetching and caching inside Nextjs with TanstackQuery. The problem is that when navigate way from the
post-page after loading 30 items and come back again, the data is reset to initial 10 items. That is causing frustration right? How can I keep previous paginated data when throw away and come back? Thanks 🙏
```tsx
// prefetch inside server comopnent
export default async function Posts() {...Merge useQuery results
The api I work with often has the ability to fetch "moreData". For example:
```js
const useTodos = ({ id, moreData }) =>
useQuery({ queryKey: ['todos', id], queryFn: fetchTodos({ id, moreData }) });...
multiple users and multiple workspaces per user
My application supports multiple users to be logged in on the same browser and multiple workspaces per user (like Notion, Linear, etc.). Since you can switch between users and workspaces in the same tab -
Q1 - should each of my query keys have the sessionId (or email) and workspaceId as part of it? If so, is there an example repo that has an implementation?
Q2 - My guess is I need a useQuery wrapper that adds the sessionId and workspaceId to every query key?...
Trying to aboid duplicating mutations for the same function call.
Hey there! I'm quite new to react query and I was wondering if there was a better way to achieve the following behaivour using a single mutation.
First, lets see the code and then I'll explain:
```jsx
export function Page() {...
Sharing cache between single objects vs group of objects
I have two endpoints that I can use to fetch a resource, once will return an array todo[] and the other will return a single todo by id.
I have two different keys:
['todos'] // to fetch all
['todo', id] // to fetch a specific Foo...
Ignoring error when using experimental persister?
Hey I am using the experimental persister, and localforage for persisting data in indexeddb now the issue is sometimes I get an error
Connection to Indexed Database server lost. Refresh the page to try again
Which seems like a safari bug but is there anyway to ignore this error on react-query level. Since its flooding the logs....Using svelte load function for non-ssr data fetching
Hey hey! Curious if I have this fundamentally misunderstood but is this not something that is supported by tanstack. Or if I've messed up the syntax somewhere. The idea was I could put this createquery on the component but I'd rather start fetching data when hovering on the link so i should move it to the load function? Or any code examples also appreciated
https://tanstack.com/query/v5/docs/framework/svelte/ssr...
Mutations throwing errors always
I was heavily under the impression, that errors thrown from query/mutation functions are handled by the hook (hence the properties
isError and error and the onError callback).
Therefore I was under the impression I could use mutateAsync, for instance, without any try/catch or .catch() but this doesn't seem to be the case. If mutationFn throws an error, it is thrown all the way up. What, then, is the point of the error return value of the hook? Is there some definition I can make to prevent mutations of ever throwing errors like this, so that I can rely of the hook value?...deserialized data is correct, stale data still shows. how do you properly overwrite cache from RSC?
I have a pretty straightforward setup here. In a server component I have
```typescript
import { api, HydrateClient } from "~/trpc/server";
...