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
How to trigger data fetch on button click
Say I had 3 buttons in a UI a green one, a blue one, and a red one.
- When I click the green one, I want to fetch data for 'Bulbasaur' from the pokemon api.
- When I click the blue one, I want to fetch data for 'Squirtle' from the pokemon api.
- When I click the red one, I want to fetch data for 'Charmander' from the pokemon api.
...
Call setQueryData() from the backend
I see I can use query on react frontend to simplify how to getting data, but at the end of the day it's always the backend that know when the data has been updated (based on some logic).
And so the frontend cannot make assumptions on when the data in the cache is fresh, lor not.
The simplest solution would be that the backend has a function to invalidate data to the query for the frontend (or to set new data inside).
But calling setQueryData from the backend has no effect.
I found some doc saying I can implement a custom solution using SSE to inform the frontend that a query should be invalidated, but I would say that this need (I think it's a general need) should have an out-of-the-box solution....
Understanding .refetch() and error retry behavior.
Hey there,
I have a query where I am awaiting .refetch() and then using the resulting data from it. I am wondering if in this case React Query does the retry behavior on failure, and if so, if that is included in the await for refetch....
Trigger refetch/rerender after setDefaultOptions
```
useEffect(() => {
client.setDefaultOptions({
queries: {
meta: {...
should I use getQueryData in this use case?
Hey,
I have multiple calls to a same useQuery hook, I have set a staletime to 5000ms because I need to refecth the data sometimes, but in one place of my app, I only want to get the data from the cache without fire an api call no matter what (even if the data is stale), I know that some data will be in the cache when I reach this point, should I use getQueryData in that case?...
How to make useMutation non-blocking?
I'm trying to move over from startTransition for a few mutations but I can't seem to figure out how to make the UI non-blocking if I click to trigger a mutation and then want to trigger another mutation. How can I achieve the non-blocking features of startTranstion when using useMutation?
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?
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...
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....
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?...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:...
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...
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) ...
"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:...
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();...
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 }....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?
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...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...
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. ...