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

adverse-sapphire

5/24/2024

How to avoid useEffect for render twice?

Hi, my react query version: ^4.29.25 so I have pseudocode below my objective is, i want to insert some data use mutation to DB when the data is not exist in useEffect, but the query is running twice in development mode. I was try to prevent using useState.. but not work....

grumpy-cyan

5/23/2024

Difference between a query function returning undefined and a query function throwing an error

I had expected after v4 that returning undefined has the same behavior as throwing an error since undefined won't get added to the cache but in practice it seems like returning an error results in the query function being called far more often. What exactly is happening here?

unwilling-turquoise

5/23/2024

mutation.mutate is not a function error

I have a post goal api which is used in various components so im creating a usePostGoal hook which returns mutation. On a click im doing mutation.mutate but it returns

TypeError: mutation.mutate is not a function

TypeError: mutation.mutate is not a function

when im using the same mutation without hook it works fine...

flat-fuchsia

5/23/2024

Unique key based on data

Hello! I have the following problem: I want to output the user id as a query key. But I only get the id from the query function. Is this possible, and if so, how? ```const { data: user, status: userStatus } = useQuery({ queryKey: ['users', user.id],...

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

sensitive-blue

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

deep-jade

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

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

compatible-crimson

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

fascinating-indigo

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 }

...

ratty-blush

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

wise-white

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

rival-black

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

variable-lime

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

complex-teal

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

fascinating-indigo

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

rising-crimson

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

correct-apricot

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?

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