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

ratty-blush

9/30/2024

Use React Query hooks to call server actions in Next.js 14 client components?

Is it considered good practice to use React Query hooks to call server actions in Next.js 14 client components? Are there any security concerns for fetching data this way?

flat-fuchsia

9/30/2024

Handeling multiple dependent states effectively server site and client site

I have been looking everywhere for a solution but cannot find help or a solution anywhere. I hope someone will be able to help me with my problem. I have the following setup: ``` | App...

conventional-tan

9/30/2024

Sample code for a shared public queryClient for SSR

I wanted to use a public shared queryClient for public data ( not sensitive and everyone can look at it). To make it faster, the page response with data fetched from previous user, then call new request to update it. Then the same request is cached for the next user, ensure zero load. It is a bit far fetched but I think it is doable....

genetic-orange

9/29/2024

useQuery doesn't reload data after reset from error boundary

I have an error boundary using the help of error.tsx in Next.js, and when my useQuery fails with an error, it falls back to this component. But when I hit reset, internally calling reset() on the error component, it goes back to the same page and shows the page I render when there's no data. My page has multiple tabs, and when this happens, even switching tabs shows no data in all of them even though I've passed tab in the queryKey. In one of the tabs I have a <select>, when I change the choice in that, it does reload; and once that gets data, I start getting data everywhere else too. What? why?...

flat-fuchsia

9/28/2024

How to keep next.js client side and server side states in sync?

I'm very confused of what might be the best practise to handle server side and client side state in combination with next.js. As a side note I'm already using tanstack query and jotai for Statemanagement. But I'm open for other options. I read the whole documentation of Tanstack Query and Next.js but I'm still confused to what might be the best approach because the Tanstack Query docs mainly covered server side or client side only but in combination seems still under dev. Below my code and notes:...

message.txt

national-gold

9/27/2024

Always fetch on the server?

How can I fetch my data on the server and not on the client on my Next.js app? Maybe I am just dump but I could not get it from the docs. Defining the Query Client forces the page to be an client component. But how can I then fetch on the server and have the advantage of e.g. env variables and don't have to reveal the API endpoint to the client. It is not logical to me to transform everything to an client component with the Query Client definition when I want to fetch on the server. Also I want...

quickest-silver

9/27/2024

handling loading and error states

Hi guys, I'm not sure what's the best way to handle loading and error states for a public website. I was thinking of using QueryBoundaries but I'm not sure because: - i dont wanna show a Big Spinner in most of the pages. - I need the queries to run asap and avoid loading states (for seo purposes we dont want to show spinners everywhere) - I need to catch the errors locally(If a component that makes a request throws error, I dont wanna show a whole error component size of the screen) ...

adverse-sapphire

9/26/2024

"use server" at the top, gives me an error.

I don't really know if this is even related to react-query, but here I go anyway. So I'm using the react-query experimental streaming without prefetching in Next.js (https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#experimental-streaming-without-prefetching-in-nextjs) Here I'm getting information In my client component, that looks something like this:...

correct-apricot

9/26/2024

Unsure why this is constantly refetching

Okay, I think I fundamentally misunderstand how the cache works in React query. I have a table, one of my columns in the table renders a component which fetches some data. I am trying to get it to stop refetching whenver the table changes ```ts const QueryCell = ({ result, id }: QueryCellProps) => { const queryClient = useQueryClient();...

rival-black

9/25/2024

How to switch between two queries based on condition (type-safe)

I have two queries, foo and bar, which are used separately in some React Components. I have a component that needs to use either foo or bar depending on some dynamic condition. When the condition changes, the old value should be kept until the new data is loaded (e.g. switching from foo to bar should still show foo until bar is ready). The foo query returns { value: string } and the bar query returns { value: string; otherProp: string }....

flat-fuchsia

9/25/2024

Handling Server Side Validation Requests for Username

I am using a svelte query, I have a mutation that calls the backend to check if the username is available debounced on every key stroke. But the responses from the server come out of order. This causes the responses to not reflect the current value. What is the standard approach for this?

fascinating-indigo

9/25/2024

Prefetch mutation

slightly unusual question but can you prefetch a mutation? I have a route that I wasn't really sure which http method would be appropriate, it sends a verification email if one hasn't been sent and returns metadata about the verification email (how many seconds till another can be sent, etc). Since this route has a side effect, I have it as a POST I want this metadata available on page load so I can show a timer, and I also want to ensure this email is always sent when the page loads. If there's a better approach to this, feel free to share...

ambitious-aqua

9/24/2024

Should gcTime refer to the cached entries, or the cache itself

For some reason I was under the impression that gcTime referred to the time an entire query cache attached to a useQuery hook would be considered stale. But it seems like it's applied to each individual cache entry. So doing useQuery({ queryKey: ["foo", x], gcTime: 0...

rare-sapphire

9/24/2024

React Query w/ AG Grid

I have successfully implemented React Query with AG Grid and for the most part it works as expected. However, with filters it is behaving unpredictably. My main question: is if anyone here has 1) implemented the two together and 2) worked through more complex filtering issues? The more difficult part of this is that I am actually getting data back from filtered queries and it is structured correctly. ...

quickest-silver

9/24/2024

Enabled property.

Hey there 🙂 I was wondering if it would make sense to expose the enabled property of a query, use-case: I have a query that is consumed in 5 places. When the the query is disabled, I want to display a certain UI for those places. ...

other-emerald

9/24/2024

Losing observers on hot reload

Hi, been using RQ on numerous projects over the years and love it. However I'm currently losing my mind looking at something that doesn't seem too complex and yet its not acting how I'm expecting. Am using RQ to store a JWT token that needs refreshing periodically (using refetchInterval). If the token is not present then I clear the rest of the session and show a login screen. This all works fine in production. Whilst devving though if I make any code change that triggers a hot reload. The devtools still show that data is present. (It even continues to refetch the token in the background) however the observer count drops to 0 and I can't quite understand why....

correct-apricot

9/24/2024

React Query refetching on each refresh for globally avaliable component even after persisting

Hi, I'm encountering an issue with React Query's persistence in my Next.js website. The data is being correctly persisted in localStorage, and when I use useQuery on a specific page or route, it hydrates properly from the persisted data. However, when I use useQuery in a globally available component, like my Cart component (which is part of the navbar and included in the layout, making it accessible across all pages), the query doesn't seem to hydrate from the persisted data. Instead, it makes a fresh request to the endpoint on every refresh. The query behaves as expected when used in pages but not within this globally available component. I’ve also recently transitioned from Redux Toolkit to React Query, so there's some commented-out Redux code. Here's how I'm using useQuery in the Cart component. Any help or insights would be greatly appreciated!...

continuing-cyan

9/23/2024

Delay isPending render

Typical code:

if(isPending) return (<LoadingSpinner />

if(isPending) return (<LoadingSpinner />

...

absent-sapphire

9/22/2024

How to trigger a function when a query is disabled?

I have a query that gets disabled once a certain condition is met (via setting the refetchInterval to false). I also want to execute a function once the query is disabled. How can I do it?

adverse-sapphire

9/20/2024

Measuring the total time of all queries

I'm looking to profile an app that uses react query. I want to send a report to our server whenever the app is closed, which will record the time the app was open and the time that was taken waiting for requests to finish. Is there an easy way of going about this with react query? Note that if requests run concurrently I do not want the fetch times to be added up 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