TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

other-emerald

5/23/2024

Bug when switching tabs / windows when mutation is retrying

Steps to reproduce: - create new mutation with retry of 3 (or higher number), have the mutation perform fetch request and throw an error on status 500, and intentionally return status 500 from your BE - run the mutation on button click - go to the browser click the button to run the mutation and immediately switch tabs or switch windows and wait for 10-20 seconds ...

correct-apricot

5/23/2024

useInfiniteQuery: Trouble with refetching when moving between routes (nextjs)

Hey, i've been stuck for days on this: I use searchParams to show filtered posts. When I switch routes from the browse page in this state: /browse?filter=production and then come back by clicking browse Link in Navbar the results remain the same, although can confirm that the initialData gets updated. It should be the data without any filters because there is no searchparams... This is useInfiniteQuery hook from my app. the initialData is fetched on the server...

rival-black

5/23/2024

Maximum update depth exceeded after ugrading to a certain version

This code works fine when in 5.29.0, but not in 5.37.1. The useWaitForTransactionReceipt is a wrapper of useQuery from the wagmi library. Any idea why? Am I doing right if I want to invoke some logic after useQuery is success?...

national-gold

5/23/2024

PersistQueryClientProvider vs Using persister as default option

What is t difference between using PersistQueryClientProvider for offline first feature for react native app vs using persister as default option for the QueryClient ? Also, we can pass persister to the individual useQuery hook to selectivily decide which query we want to store persistently but do we have reverse way arround where I can just opt out selectivly from storing in persistent storage keeping persister at global level

fair-rose

5/22/2024

useQuery and refetchInterval

Hello everyone, i'm writing a custom hook call api with useQuery. I have a confuse problem with my code, if still in the stale time value, whether data is from cache or it will be fetched from a new query api? I...

quickest-silver

5/21/2024

useQuery and useEffect (Possible Anti-Pattern)

Hi there - I have a particular pattern I've been using in my React/Next codebase. It feels a bit like an anti-pattern, but I'm not sure the best way to adjust my code. Right now, when I have a "details" page, or some page where you can view and edit an object, the component is structured something like this: - data fetching is done using react-query to retrieve the object in question. for example, we are fetching an associate by their ID, pulled from the page params...

correct-apricot

5/20/2024

Getting paginated (infinite) data from a reactive endpoint

I am using tanstack query to fetch data from a reactive paginated endpoint that streams an array of json objects in ndjson format. I'm not sure if I handled invalidation correctly because I am modifying all the pages (the tanstack query library seems to just update 1 page). Code is below

absent-sapphire

5/20/2024

Return progress as the mutation is processing

I'm using a library which, for upload, gives me a progress indication callback as:

export interface AddProgressFn { (bytes: number, path?: string): void }

export interface AddProgressFn { (bytes: number, path?: string): void }

...

xenial-black

5/20/2024

Help needed with Tanstack Query for Vue

I'm trying to make a demo of a simple app with optimistic update but I can't make the mutation showing as pending in another component from where the mutation was triggered. For example I have users list and add users page when I trigger the mutation inside the Add User component and try to listen to the same mutation inside UsersList the mutation shows as idle even though it's mutating in the background. I wrapped the pending state inside a computed property, I'm using Vue3 Composition API with Tanstack Query version: 5.27.5...

plain-purple

5/19/2024

Is it a good idea to use tanstack query with nextjs and server components?

As I understand, when using something like tanstack query, I just ask for the server state or data in the component where I want to use it, and behind the scenes, these requests are optimized. With NextJS though, inside server components, we have access to the server state directly, so we do not need a server state management tool like tanstack query. However, we still need to share the server state with client components. What is the recommended way, what are my options?...

harsh-harlequin

5/19/2024

useFocusNotifyOnChangeProps hook notifyOnChangeProps type issue

Hello! I use v5.17.7 React-query with react native. I want to use the useFocusNotifyOnChangeProps hook like the docs said. ( https://tanstack.com/query/latest/docs/framework/react/react-native#disable-re-renders-on-out-of-focus-screens ) But I got type issue and dont know how to fix that. Do you have any idea how to fix that?...

rival-black

5/19/2024

How to return (useMutation) correctly in (Context API)?

In the first picture, I created a custom React hook for useMutation. Then I obtained the type of useMutation by hovering over the title of my function to use that type in the Context API. In the second picture, I placed the type of my useSignUp/useMutation in the Context, but for the default value of the Context, I don't know what to put there. What I want to happen is to call the signUp function from the Context API like this:...

xenophobic-harlequin

5/17/2024

React Query for sessions not updating all components

I am trying to use React Query in a Next app router app to manage the state of my auth sessions. The problem I'm having is I have multiple client components using the hook but the aren't all updating when I log in or out. I have a navbar component and say a profile component. I login with button of profile. The navbar doesn't update and same for logout. If I refresh page it updates fine. Could anyone check what I need to do. I have tried invalidateQueries which does not work and now using setQueryData but still not having desired effect....

flat-fuchsia

5/17/2024

how to pass queryOptions as parameters?

I got an error when trying to pass queryOptions as parameters, how can I resolve this? https://www.typescriptlang.org/play/?ssl=16&ssc=78&pln=1&pc=1#code/JYWwDg9gTgLgBAbzgRwK4FMoE8DyYbAQB2AzgDRyonoCKG2FMWY6cAqtXZrvoaXAF84AMygQQcAOQABGAENS8gMYBrAPRR0cpTAC0abpIDcAKBPDURHXzgBzdDABCWAJIATAApi3qHQBVmdDwCYhIACmA3AC44EhgoYCJbAEpEEzg4TRhUKCIUeh4Q0jCEdIz87gAxIhiw1IBeAD44L3FgagA6TRIIABsAN3QwyW6+wbdJZLIyjINsAGl0LBiAbUkwb189JhZJCkiAXWmMgWTTATMLKyLKagBlB0roEAA1OV6MEgBBEiwrAB4-E8oCAAixGmFqDA3h90CQABIKNy9TC1frvT4xIHPMHoBrNfoQSIUObLdicArBPgkQHA0GBRqpUoZJSheBINxyeSCOD1W60AphUnJMrAYRwMKc+SpKEwz6IojIzCSrlyEUXEysxRwDYQHz+QLuXlSACMkhMVHQDxgdLlcJ+fyUYTCMDhMHxiAEFHsTlcnk2BpYVNCYV1+pguPcyWSQA...

extended-salmon

5/16/2024

Stale data after implementing `persist`

I've recently started to use createSyncStoragePersister to persist my queryClient for some queries. But since then, some queries don't seem to refetch at all. An example: ```typescript useQuery({ queryKey: queryKeyAppData(), queryFn: async () =>...

harsh-harlequin

5/16/2024

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?

sunny-green

5/16/2024

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....

flat-fuchsia

5/15/2024

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...

ambitious-aqua

5/15/2024

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...

adverse-sapphire

5/15/2024

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)...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs