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
state management
Hi, I have a question about getQueryState
Here is my query, its on query.tsx
const itemsQuery = useQuery({
queryKey: ["getAllEvents"],...
How to solve No overload matches this call.
I am getting an error when defining my query. Here is the link to the playground https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRQK4FMoE8BiqB2AxjMBPgMJkzoAeMANHKgM7pqZZwC+cAZlBBBwARAAEYAQ3zNJhANYB6KOgnEAtAEcM2YQChdMLGHRwc0EDmAAbalGYBlQgAt0ICXAC8iXXF9wZqAAm6PgwAJKBAPwAXP4wUMD4AOZwAD5M+MG8ieiBANw+foRWEszMETFxCclpGVk5+YW+MsoSIBWxLYkp6QT1+LkFfnC2IJVdNb2Z6NkDjcMyErAAIhLUlavUtX0zDUN+IYGb6BtrJlP9g7pcuoRkMnzmawAKEPLoMACyZOi45pY2TDMTxwAAUvH+1lszFiZigFihQMcLjcAEpPAA+bx+ZQwVBQfDY4ZwAB0ZIh8IB...
RQ Mutations and Query loading sync
Hi, i'm having the following case and i don't know how to solve it right with RQ.
I have a Query that include a key (example
basket), and also Y posible Mutations that include the same basket key.
Then i have a button, that it should show a loading spinner whatever any of the Queries and Mutations that include the basket key....React Query vs "use-reducer-async" library
Hi, guys, i'm trying to do some comparasions to find the best way to handle Server State on our project.
We're a e-commerce company that we're migrating to a new stack:
From Django Template + React -> Next.js App Router...
How to properly type data in useMutation?
Hello everyone! I am using Tanstack React Query v4.36.1. Please help me to type this correctly? I don't understand why it's not working!
I'm using type AxiosResponse<User> and I can see that the correct data is being returned. But it still results in the following error:
```javascript
...
Pagination with only one query key
I actually go through the docs regarding react query pagination. But somehow, I have a requirement to implement one only query key.
My current implementation was to through queryClient.setQueryData() just to override the cache.
Appreciate any advise regarding this one. Thank you very much....
Updating react query cache frequently without spamming my backend
Hello, I'm working on an app that requires to consume a single cache entry from different components at the same time. This entry is initially populated from a query (useGraph) and then is updated when an specific mutation is used (useUpdateNode).
Because of a new feature I'm building I need to frequently update the useGraph query cache optimistically (useUpdateNode mutation is called when a text input onChange event is triggered), and it must be reflected instantly in the other components that consume the query.
What I'm looking for is a way to debounce the execution of the fetch function, without debouncing the execution of the mutation itself as it would also debounce the optimistic update....
l Query Revalidation Completes After Mutation
Hey! I've globally set up my MutationCache like this:
```ts
mutationCache: new MutationCache({
onSuccess: (data) => {...
Enabled condition
I have "enabled" to only run if there is an objectType passed in, but for some reason it's still running even though objectType is undefined. I confirmed this by console.log objectType in the queryFn where it should always exist, but even in the log it show undefined. It's causing the network request to be like ...objectTypes/undefined/events...
I've never had this problem when using enabled so unsure what I'm doing wrong:
```
export const eventTypesForObjectQueryKey = (objectType: string) =>...
Query tree data structure with parent-children loading
Hello everyone,
I'm working on an app with a page system similar to Notion, where I need to load data asynchronously. The goal is to initially load only the parent pages, and then, when a parent node is expanded, load its child pages via an async query.
I'm considering using useInfiniteQuery for this, but the challenge is that the tree structure isn't loaded in a linear order. Users can expand any parent at any time, meaning pages can be opened in a random sequence....
Using react query cache enough for my use case, or do I need to include a state management lib?
Hey all! Let me first simplify my use-case using some pseudo code:
```
const ChatManager = () => {
return (...
Convert api data to client state waiting for a save action
Hello folks,
I’ve been trying to figure out how to manipulate “server state” without immediately persisting it to the back-end.
Imagine you have “server state” as a list.
Each time want to add or remove an object, this would be persisted to the server
The solution to only use api data would be to update your back-end logic to store a draft and active version of your table or something like that (which sounds very weird)...
How to access cached data from React Query in a different component?
I have fetched data using useQuery in one component, and now I need access to that same data in another component that is not a child of the first component. Should I refetch the data in the second component, or is there a way to access the cached data from React Query without refetching it?
Long waiting time for queryFn to run
Hi,
I'm experiencing a strange issue with react-query. When the useQuery function is mounted, and I can see it registered in the devtools, it takes several milliseconds (1500 - 3400) to run queryFn.
My code:...
Attempted to invoke queryFn when set to skipToken. This is likely a configuration error
```js
loader: ({ context, params }) => {
const [cookies] = context.cookies
return context.queryClient.ensureQueryData({
...getProjectQueryOpts({...
Tips for debugging over-fetching of data / duplication of http requests?
can anyone share tips / pointers for how to debug duplicated http requests emanating from react-query usage?
specific behavior i'm seeing is that a single query invoked via
ensureQueryData() is re-run despite having just fetched and returned valid data only a few ticks prior. this results in 2 http requests to the same endpoint with the same parameters returning the same data. as far as i can tell, this is NOT due to react's strict mode mechanism as i see it in production as well.
i've been manually inspecting the cache with queryClient.getQueryCache().getAll() but from that perspective, everything should be working as expected (iow, i didn't see any mislabeled cache items or duplicate entries). ...Trying to disable caching (with gcTime & staleTime) does not seem to work
Im trying to disable cache for some queries, or all queries, but no luck so far.
I have tried setting gcTime: 0 and staleTime: 0.
Additionally, if i call manually refetch, it hits also cache always. Is it possible to force fetching new data somehow?...
Best practices for state management and fetching data
I have been using react-query for a few months now but still feel very green. So I have a Quote component with a bunch of form fields that the user can fill in. I am using that same Quote component for both creating a new Quote and editing an existing Quote because that's the point of React, reuse components. So I am trying to figure out how to handle the react-query state in this case.
So here one of my useQuery functions for the Quote component.
```js
const {
data: selectedPackaging,...