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

11/4/2023

Is it possible to automatically invalidate suspense query before fetching?

I have a form with auto-save. If I leave after making changes and navigate back, I receive the stale data first despite the query being stale and then fresh data. I would like to receive only the updated data and have the regular suspense behavior. I populate the state from the query data initially and do not want to synchronize it with query responses. I could invalidate it myself which is tedious and if the changes would happen outside of the client there would be no way to invalidate the quer...

correct-apricot

11/3/2023

useQuery then server component possibility?

If I understand react server component correct, there is no way to render server component with props received from client component inside client component. The case is: ```tsx...

sunny-green

11/3/2023

What is the best way to fetch data which is dependent on results from an infiniteQuery?

Let's say I have a personal database of movies which I've seen which populates on the page via an infinite scroll mechanism like the simple example here: https://tanstack.com/query/v4/docs/react/guides/infinite-queries. Whenever the page loads a new batch of movies via the infiniteQuery I want to query IMDB for information on those new movies while still maintaining my old IMDB queries so they can refetch as needed. Is there a good way to do this?

graceful-blue

11/2/2023

useSuspenseQueries noncontinuous suspense

Hello everyone, I am not sure, maybe I misunderstand combine, but I notice some strange behaviour when I use it in useSuspenseQueries. Given the code: ```...

equal-aqua

11/1/2023

Removing `onSuccess` from this query

Hi, I have a task endpoint that requires short polling in order to get the response. I recall that onSuccess is a bit of an antipattern with useQuery. How could I remove it in this instance (using v3 RQ)? Thanks ```ts const data = useFetchTaskOutput(taskId, { enabled: !outputHasCompleted,...

correct-apricot

11/1/2023

Disable suspense for a specific query

I noticed in v5 there is no option anymore on useQuery to do { suspense: false }. What's the recommended approach now to disable the suspense behavior for a specific query? What's the expected behavior if I set suspense: true globally on the query client? Would the useQuery hooks use the Suspense boundary or that's ignored for them since there is now a useSuspenseQuery hook? The overlap is a bit confusing for me. Thank you...

optimistic-gold

10/31/2023

Mutating on visiting a page

Somehow I know what I have created is an abomination. I am trying to build a page that simply logs the user out. I am using Next app router + trpc + trpc's react-query wrapper. First I want to address why I am using a client component and not a server component that logs the user out? Few reasons: 1. Can't set cookies in Next.js in server components 2. It will be a GET request, and my auth solution requires a POST (in order to receive Origin and Host headers)...

rising-crimson

10/31/2023

Download button: query or mutation?

Our application has several "Download" buttons for fetching various PDFs or CSVs from the server. Since these are idempotent GET requests, my inclination is to use useQuery — but because it can be a lot of data, we don't want to fetch immediately on page load. I haven't found any guidance either here, in the docs, in Github, or on Stack Overflow on which is the recommended mechanism: Option 1: useQuery...

sensitive-blue

10/31/2023

Why am I able to only send one arguement to mutation function?

I'm currently working with the useMutation hook, and I'm encountering an issue. My mutation function expects two arguments, but when I use .mutate(firstArg, secondArg), only the first argument is being passed to my mutation function.

optimistic-gold

10/31/2023

Understanding whether a fetch is made on the server

Hi there, Sorry if this is a noob question. I have a call that I only intend to make client-side (don't want it during SSR) and am trying to figure out whether a fetch is being made. ```ts...

optimistic-gold

10/31/2023

Is it okay to call a server action directly from a useQuery or a useMutation hook? (with example)

I know that in app router you can directly call the server function, but if I have a interactive client component, is it okay to call the server action from a useQuery or useMutation hook? Because this is not one of the ways they speak about in the documentation: https://nextjs.org/docs/app/api-reference/functions/server-actions#invocation ```...

like-gold

10/31/2023

How to call onSettled function in new Tankstack query version 5

I have this function i want to run a function regardless query success or not. but i don't find anything about it in new version ``` function useFetchTiffImage(source) { const { setMainImageIsLoaded } = useImageContext();...

wise-white

10/31/2023

Having trouble grasping Server Components

Hey! Correct me if I'm wrong here, but in this guide https://tanstack.com/query/latest/docs/react/guides/advanced-ssr you fetch the data in a server component, but then you send it to the client to be hydrated. Wouldn't the benefit of a server component be that in a simple component where you just need the data, it shouldn't need to be hydrated? I realise in those cases I should just use fetch normally I guess, but it's still not clear to me

extended-salmon

10/30/2023

client.defaultQueryOption is not a function

Error = Uncaught TypeError: client.defaultQueryOptions is not a function

passive-yellow

10/30/2023

Chaining queries with a minimum wait time

Hi, I have a potentially weird use case and I'm hoping might be able offer some suggestions/guidance. I have a map and a date & time picker and a react query that fetches the location etc. of a bunch of resources at that time as a feature collection and I render them on the map. The page also has a play button that when pressed sets a timeout that will advance the time fed into the query X seconds every X seconds which will then consequently update the map. My problem is that sometime the API request takes longer than X seconds and I end up with queries getting cancelled and the map not updating. ...

rare-sapphire

10/30/2023

devtools broken without styleNonce

The styleNonce prop has been removed from the devtools.tsx file. If you have a csp in place for development, devtools is now unable to use any of the css which makes the tool unusable.
This is a regression from this fix: https://github.com/TanStack/query/releases/tag/v4.0.0-beta.4...

deep-jade

10/30/2023

Issue with onFocus after updating to react-query v5

After migrating from v4 to v5, I am getting the error below in the queryCache.ts file. I'm only using useMutation() and in the options for that method there is no option to turn off refetching when the window is focused. So I tried setting the option refetchOnWindowFocus to true, which the official documentation says turns off refetch globally at queryClient initialization, but the error is the same. ...

wise-white

10/30/2023

Property 'data' does not exist on type 'Promise<{...

I am very new to react query, I think my solution is very simple and im being stupid.. But I cant figure it out. `export async function useFetchAccessToken() { const { data, isSuccess, isLoading, isError } = useQuery({ queryKey: ["accessToken"], queryFn: async () =>...

optimistic-gold

10/30/2023

Is it okay to call a server action directly from a useQuery or a useMutation hook? (with example)

conscious-sapphire

10/29/2023

How to share useMutation() return value across components?

Hi guys, I'm just starting out with TSQ! I have a component that's calling useMutation. However, I want to access its return value (specifically .isPending and .variables) in a faraway component. Is this achievable without prop-drilling or a custom context? Thanks 🙂...

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