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
why is QueryClientProvider required?
our company is looking into using react-query, but since we use a micro-service with multiple mounted react apps on a single page, the implementation would become quite the undertaking...
this would require each app to have a
QueryClientProvider in it's root... and we have lots of apps...
is there any technical reason why react-query NEEDS a provider? I get that you're passing client around with context... but couldn't that be done with an instanced object?...Zodios query invalidations
Hello all, I am wondering if anyone has used zodios? if you haven't its pretty cool. I am working on trying to get invalidation working, but the example in the docs are unclear just wondering if theres a better way? https://codesandbox.io/s/zodios-hooks-select-bug-forked-9ye4s8?file=/src/App.tsx, how would I invalidate this? if i am in a different component? just trying to do exactly the way react-query handles invalidation
useMutation Testing
I am attempting to write some tests for an application that we have written and I have started running into issues around mocking certain pieces.
I am attempting to test a very basic useMutation hook that we have. Internally, it is using Axios to make the HTTP requests. The simple reason for this is that we have an axios instance that uses a request interceptor to attach our Auth header to every outgoing request using that instance.
The issue at hand, is that when running the test, it is attempting to fetch a real auth token, so I think I need to mock the auth token in this situation since it really doesnt matter what it is. I cannot figure out how to do this correctly. ...
Best Approach for Form
I have this text input on a page where a user is supposed to put an ID and therefore the submission of that ID should trigger fetching and rendering of the results.
What im having issues is when the page is initially loaded there is no ID defined yet. So my question is whats the best approach for executing a useQuery until after this form is submitted?...
Can you cancel requests from the AWS-SDK?
I want to create a query via the aws-sdk. My code currently looks something like this:
```typescript
import { useInfiniteQuery } from "@tanstack/react-query";
import { S3 } from "@aws-sdk/client-s3";...
typescript version of createCrudHook?
export default function createCrudHooks({
baseKey,
indexFn,
singleFn,
createFn,...
Use prefetchQuery with trpc
Hey! I am using trpc + React Query. I need to prefetch some queries, however, it is asking me for the query function, which I dont really have since trpc handles everything. What is the best approach?
Thanks...
nested mutability - setQueryData
I understand that the top level data must be updated in an immutable way (spreading object, array or otherwise returning a reference to a new object !== old reference.).
But, say I have an array of arrays - should there be any reason that once I have a new reference in hand (
.filtered from oldData with one top level array filtered out, say) - setQueryData should work if I then update one of the underlying arrays, right?
Meaning - does setQueryData need to be immutable all the way down, or just the top level (structuralSharing is off)? I assume its the latter, but I'm hitting strange behavior where I create a new reference, and then mutate a child, but the query data doesn't update....React code splitting making react query stuck at fetching state
I just implemented a code splitting logic into my project. I do a simple code split in a route level, so the first time we open a page, it will load new JS bundle, and temporarily put a Suspense fallback loading component before the JS bundle loaded.
I just realize that when I do this, the first time I open a page (cache cleared), and calling a useQuery, the query I called is stuck in a fetching state. I try to trace back the request, and my request did go through, and returning a 200 with result. but the data is not coming out from my useQuery hooks.
Is this a known bug? I can't find any pointer regarding this issue...
Error `Module parse failed: Bad character escape sequence (2:97)`
I got Error when running code from doc overview page. any idea ?
"isServer" check breaks some environments
In Raycast, I used to be able to auto-update queries using
refetchInterval. It was an amazing UX. Unfortunately, the introduction of the non-configurable "isServer" check broke that because window is undefined in the Raycast execution environment. The remainder of @tanstack/react-query works perfectly except for this one feature.
Anyone know a way around it?...Question about select option
Hello,
I struggle to use react query select option for a specific use case
I have a list of data which cames from a fetch. Then I have radio buttons which have the role to include or exclude a part of the data.
...
Question about retry function in defaultOptions
Hello everyone i have a little question,
I see that the retry function that can be passed in defaultOptions in QueryClient should return a boolean.
So my question is, if i return true does the query will retry the default number (3) or will it retry indefinitely ?
I thinks its the first option but i would like to be sure if someone has the response....
How to handle zodErrors?
Anyone here using zod and react query? How are you handling zod errors? I assume with a try/catch but where in the code should it be handled?
```
import z from "zod";
...
Trying to write a wrapper around useQuery for use with graphql subscriptions.
Hi all, sorry for the noob question, I'm still relatively new to react and js.
I'm trying to write a 'useSubscription' hook which does the following against a graphql backend:
- returns the result of the graphql query using useQuery, this returns quickly and populates the cache with initial data...
Use with AWS Amplify S3 storage?
Hi all, does anyone have an example of using the tool with the amplify storage API to S3?
I tried it but failed. I can post the exact code and error message later but was curious if anyone has a working example or gist....
Keep a local state after fetching data
Whats the best way to create a local copy of data after fetching?
```ts
const { data } = useQuery();
const [localData, setLoacalData] = useState(data) // <-- need to use data here as we need to mutate them locally and after saving we want to refresh local state with new values...
Using useQuery, setInterval and useEffect in the same component
Hello everyone! I'm pretty new in using react-query and I have a hopefully simple question:
I have my
useQuery function that is wrapped in a getItems function, then I have a setInterval that updates a component state every second, to display the current hour. The fact that the state related to the interval is updated re-triggers the render of the page, so it re-triggers the getItems function every time. Fortunately useQuery is powerful, so it's not doing API call to backend. But it keeps re-fetching the items object, so everything using this object is re-rendered.
Before I was using useEffect for fetching the APIs, so the content of fetched items was kept, but now I've put my getItems ouside of useEffect.
What should I do to resolve this problem? ...Invalidating queries for queryKeys generated using tkdodo's key factory pattern with optional params
Hey guys, i've followed the excellent patterns defined by @TkDodo 🔮 : https://tkdodo.eu/blog/leveraging-the-query-function-context
The only differing thing I have done is that some arguments passed into the query key factory are optional. An example:
```
export const projectKeys = {...
Weird build error when building my app
yarn run v1.22.19
```
$ tsc
node_modules/@tanstack/query-core/src/queryObserver.ts:543:46 - error TS2345: Argument of type '(TQueryData & ({} | null)) | (TData & ({} | null))' is not assignable to parameter of type 'TData'.
'TData' could be instantiated with an arbitrary type which could be unrelated to '(TQueryData & ({} | null)) | (TData & ({} | null))'....