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
invalidateQueries or refetch is not working on delete and put request.
```
const { mutate: deleteSyllabus, isPending: isDeleting } = useMutation({
mutationFn: async (variables: { id: string, name: string }) => handleDelete(variables.id, variables.name),
onError: (error, variables, context: any) => {
queryClient.setQueryData(['syllabus'], context.previousSyllabus)...
204s - Null Or Undefined
When accessing via axios., a rest resource that could return an object or a 204 - no content.
Is it better practice directly return the undefined from res?.data or manipulate that into a null for the consumer of the useQuery inside the queryFN.
i.e should the type be ResponseObject | undefined or ResponseObject | null. return res?.data or return res?.data ?? null...
i.e should the type be ResponseObject | undefined or ResponseObject | null. return res?.data or return res?.data ?? null...
[resolved] does fetchquery deduplicate if there's no useQuery?
From docs:
The difference between using fetchQuery and setQueryData is that fetchQuery is async and will ensure that duplicate requests for this query are not created with useQuery instances for the same query are rendered while the data is fetching.What if there is never a subscription created by useQuery, I only use fetchQuery? dedpulication does not appear to be occurring. im on "@tanstack/react-query": "4.14.3" edit: nevermind, deduplication is occurring, I simply had a query outside of
fetchQuery on accident....How to update the state of a paged query manually?
My items are fetched from multiple sources and combined into one sorted list in a RQ store, where each source is a group, so I need to update the cache manually at the sorted index. Should I just use
onSuccess to do this? how do I prevent the default append that RQ does on response?
Example:
```ts
const response = ['dog', 'cat', 'bird', /* new type / 'car', 'truck', 'ship', / new type */ 'apple', 'orange', 'lemon']...Should I include count/skip parameters in the query key for infinite queries?
Suppose I have a paginated API which accepts the parameters
count (page size) and skip . Should either of these parameters be included in the query key for an infinite query?
I've noticed in the docs, the cursor parameter (analogous to skip) is never included in the query key.
* Not including cursor makes sense to me, as all the state regarding the current and initial page is encoded in RQ (page param). Combined with pageParam, we have everything we need to fetch next/previous page without encoding it in the query key
* however, I'm not sure about if I should include count in the query key. For example, suppose we have one part of the app that only fetches 50 items with infinite scroll, vs another part that fetches 100 items without infinite scroll. It seems in this case we should encode the count into the query key...Initializing QueryClient in a top level component using useState instead of Global Variable
Hi,
We have a requirement wherein, we need to access Jotai atoms inside QueryClient initializtion as below. Hence, we moved the queryClient initialization from being a global variable to inside a state variable in top level component.
This allows us to redirect the user to login page if the session has expired on server.
Anything we should be worried about here? Is this approach fine?
```...
What framework is recommended for creating types schemas and hooks from OpenAPI 3.0/Swagger specs
I have unsuccesfully tried Kubb which promises exactly that.
useMutation issue with touch events
I call preventDefault() inside onTouchEnd() handler so that mouse events are not generated.
This works as expected in Chrome and I can confirm it with Chrome Developer Tools.
But I see that, if inside onTouchStart() I call a useMutation() it doesn't work anymore, because most of the time onTouchEnd() handler is not called anymore, and so mouse events are generated.
Is there something wrong in my approach?...
useMutation optimization question
Why is my first render always undefined but not the next one
```ts
import { useMutation, useQuery } from '@tanstack/react-query';...
Any alternatives to Netinfo for RN?
[Resolved] I am trying to implement react-query for an Expo RN app, following the instructions here: https://tanstack.com/query/v5/docs/framework/react/react-native#online-status-management
I have tried everything I can think of, but installing Netinfo causes the app to fail on startup with a "No callback found with cbID ..." error every time. None of the advice I've found has helped, so I'm wondering if anyone has successfully used a different library that might provide the same basic functionality needed for auto refetch....
TanStack Query if I need session in call?
I am using NextJS app router. I thought I could use TanStack Query following the Advanced SSR guide, however it seems that if I need the session, I cant have useQuery or queryClient.prefetchQuery() call my function because if its server side, I won't have access. Any ideas?
Using Next Auth, getServerSession, or useSession....
Preferred way of organizing mutations in v5
Is it better to make custom hooks for each mutation, or make a mutation factory like for queries with query options
query.data with initial value returns undefined
Hello, did not know where to post it exactly, as it seems like bug, however it is not reproducable so gonna ask here:
We have a query like this:
```...
Can I set the amount of scrolling that triggers the next page for an infinite query?
I am using an Infinite query which automatically loads new data when I scroll to a certain point in the app. This is working well. But to improve perceived performance for the user, I wanted for it to already start loading a bit earlier during the scroll. Is there a way to already trigger fetching of the next page at an earlier scroll height than the default? I couldn't find a setting for it.
Percentage of Completion of React Query.
As title says, i need to return from this hook
import { useQuery } from "@tanstack/react-query";
import { CustomerAPI } from "../../../api/CustomerAPI";
import { AuthProvider } from "../../../interfaces/auth/AuthProvider";...
query when filters change, but keep the current results until new data is loaded
const { isLoading, error, data: cars} = useQuery({
queryKey: ['jobs', JSON.stringify(filters)],
queryFn: () => fetchCars(),
})
...
How to 'select' data from the cache? (read-only in a reactive way)
Hello, I am using react query as my state manager. I have one query that fetches the entire user's state from the server (includes things like preferences and user generated content like cards, lists, spaces etc...).
In my app, I have many different components that need to be wired up to different pieces of data fetched from that one query. So my setup is:
- have one
useQuery call sit at the top of the component hierarchy. This query is responsible for fetching the data (enabled is true).
- have multiple useQuery calls with { enabled: false } in child nodes so we can read only from the cache and not trigger any refetches....Reset gcTime
I have a query that is only used for periodic mutations (essentially to keep a session alive). However, the query eventually gets garbage collected. Without setting
gcTime to something too long or to infinity, is there a way I can reset gcTime during onSucess of my mutation? The useQueryClient hook is called by the onSucces handler. Thanks!Cannot update a component (Router) while rendering a different component
Hello, it's me again. is there anyway I can avoid using
useEffect for fetching data and use useQuery instead?
So I created a server action that will get id from URL and then pass it as a queryFn, but then, I get this error
```...