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
redirect if user exists
I have a mutation called (user) to sign in user . But i also want the user doesn’t go yo login page ( will be navigated ) if the user in the cache .. how to check for that without doing a request?
Undoable Mutations
I want to be able to undo a mutation for a few seconds after
mutate() runs. Here's a summary of what I want to happen after running mutate():
1. Do an Optimistic Update.
2. Run onSuccess and onSettled callbacks.
3. Show a notification with an undo button for 3 seconds. If the undo button is clicked, reverse the Optimistic Update and cancel the mutation.
4. After 3 seconds, if the undo button wasn't clicked, run the mutationFn....useQuery data on refetch
Hello, does
useQuery do a deep comparison (or something similar) before updating/reassigning the data attribute?
for example if I do:
```jsx...Invalid sorting
Hi, I'm using infinite query with graphql with pagination, filtering and sorting. I have two similar endpoints where one returns all visit data and other only for specific operator.
Issue i'm having is that for operator it appears that sorting is messed up somewhere during useInfiniteQuery process. When sorting rule is changed then only first and last elements are switched.
Exact same code only with query string changed works properly for all visit data, and query created by this works when used within postman etc. This seems like a caching bug?
```ts...
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....
Running multiple queries based on search params
Hey, I want to have multiple and changing search params stored in the URL, then I want to get them in server component to prefetch the data
```
// in Page component
const queryClient = new QueryClient()
...
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.