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
Mutation -> Invalidation + Refetch or setQueryData
Currently in our app, we have a lot of scenarios where we do the following:
```
const mutation = useMutation(
(params) => {...
next 13
How can I create a generic type of queries? Say I want to pass a prop through to a component such as this:
...
dayBookQuery: (opts: DayBookOptionProps) => SWRResponse<SupabaseManyRowResult<T>, PostgrestError>;
dayBookQuery: (opts: DayBookOptionProps) => SWRResponse<SupabaseManyRowResult<T>, PostgrestError>;
react-queryv5 showing toast onSuccess
I have a custom hook ```/* eslint-disable @typescript-eslint/no-unused-vars */
import { queryKeys } from "@/app/constants/queryKeys";
import { ExchangeRates } from "@/app/types/Currencies";
import { CURRENCIES_API } from "@/config/api";
import { useCurrencyStore } from "@/src/currencyStore";...
Client side error 400. What's wrong
index.tsx
```tsx
...
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();...
useInfiniteQuery
hi
i wanna use useInfiniteQuery
but my server needs pagination in query params, should i include this in my queryKey?...
vite + react query devtools not working
I'm trying to get the react query devtools to show up in my vite app, but I'm seriously struggling. with a simple app like this:
function App() {
return (
<>...
v5 issue
Hi there,
I have a followig hook:
```import { queryKeys } from "@/app/constants/queryKeys";
import { CURRENCIES_API } from "@/config/api";
import { CurrencyOption } from "@/src/currencyStore";...
Is there a way to trigger a fallback in useSuspenseQuery when internet connection is lost?
Hello, as mentioned in the title, I'm using useSuspenseQuery. The problem is that when internet connection is offline the fallback in Suspense is not triggered and as a result a component with missing data is rendered. Is there a way I could trigger a fallback when attempting to fetch data using useSuspenseQuery while being offline?
keepPreviousData Version 5
I want to achive the same result as
did in version 4 but in version 5,...
keepPreviousData: true
keepPreviousData: true
Why does switching browser tabs for 1st time, re-render happens but not second time onwards?
I have some data that I fetched with useQuery, then I have an Overlay with timer on, with data fetched populated into this component. However, if I switch the browser tab, then come back to my app, the timer in the overlay page will restart from 0, instead of counting on while the time goes. But, from now on, if I keep switching tabs and come back, the timer will count as expected. Each time I switch, the console log indicated some refetch is happening in the background.
So my question: why does it only happen for the first time, that it seems my timer is re-rendered, I am not sure whether it's because of refetch.... but why it functions as expected from the second time onwards? I am not sure if this has something to do with how it caches, would appreciate someone explains this weird behavior....
I cannot set a default cacheTime
Hello, I'm trying to set a default cache and staleTime when creating my queryClient
```const queryClient = new QueryClient({
defaultOptions: {
queries: {...
How to create custom persister using realm ?
I'm replacing the redux/redux-offline/redux-persist with react-query in my react native app to manage serve side data. Since we are currently using Realm to offline first implementation, though we do have createAsyncStoragePersister but is it possible to create custom persister using realm ?
useQuery searchbar
I am trying to create a search bar with React query.
When the user clicks search, I update the query key with the form state causing the search to fire. If they get no results, they remain on the same page but are shown an error message saying that no results have been returned. If they click search again, the query key does not change, meaning that the query is not fired and they get no error message.
Is there a work around for this situation? Is the recommended way to introduce refetch? I'm currently relying on useForm hook (as suggested here https://tkdodo.eu/blog/react-query-and-forms) to handle validation and then call my setState function which is why I am not currently using refetch....
Get fetched data in another component
I have this hook:
```js
import { useQuery } from '@tanstack/react-query'
import axios from 'axios'
...
Suspense Stability
How rigid should I be about versions with react-query and Suspense? For example, if I am on a floating react-query@v4 and floating react@18, is it likely that the Suspense-enabled fetching API will break within the same major version?
I want to use RSC queryClient in my zustand store
Basically, i was using zustand store as a wrapper around my queries and mutations to avoid extra renders of hooks (not sure if this was needed but seemed neat).
Now i'm switching my app to Next 13.5.6 (tanstack query is the latest version) with RSC and SSR. I have a zustand store configured as follows:
```tsx...
split one query into little parts
hi guys
i have a query ex: https://myapi.com/items
it returns 1000 items
but also this endpoint support pagination
i want to split this big query into 100 little queries...
Correct way of fetch with query?
Is this the correct way to fetch with a search query?
```js
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
...
Why do we create several QueryClients when using SSR?
I was reading on using SSR in Nextjs, and following the guide, we first define the QuerClient Provider in a client component, and wrap our app in it like usual.
```js
"use client";
export default function Providers({ children }: { children: ReactNode }) {
const [queryClient] = useState(() => new QueryClient());...
Type the api response in useMutation and Usequery
```export interface LoginSuccessRes {
access_token: string
success: boolean
token_type: string
}...