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
What's different with HTTP Cache and React Query ?
My backend engineer ask me this question. I don't know how to reply. anyone can give me a favor, what's the benefit about React Query?
Next.js 13.4 app directory prefetch/hydrate questions
Hi Guys, Alka here
Right now i try to build my own personal blogs, preiously i try to make bloglist that has pagination with helps of tanstack query, which right now is working perfectly, but since it became client side components, i have some concen for my blog SEO so i want to use prefetching.
I have a questions for how to hydrate the client side components
...
useQuery to populate dropdown
Hello everyone, what I'm trying to do is using the result of useQuery to populate a dropdown.
I discovered useQuery has a
select parameter that I can use to perform actions when I fetch the data (but using that I cannot return data anymore, or at least I can, but if I use the select parameter to modify a global status, then I return the data from the select function, it will cause an infinite loop, as the same as modifying a global state using the returned {data} value).
My problem is: from what I understood the best-practice is to use the {data} returned from useQuery to populate my dropdown, but this dropdown is associated with a Zustand global state that keeps track of the currently-selected element. If I initialize my global state with undefined everything goes well, but I want to initialize my global state with one selected item right after fetching the items.
My solution would be to use the select parameter to set 2 global states: one for saving the list of elements fetched and one for saving the selected item, but this could create problems when the query is re-fetched.
...Children route loader not works with react-query
Hi, everyone, I'm following this two guides to build my react app with react-query and react-router-dom
https://tkdodo.eu/blog/react-query-meets-react-router
https://reactrouter.com/en/main/guides/data-libs
However, it appears that react-query's data loaded with one of my Root children's loader are not seen and it returns a failed request error.
The data loads only if i put inside the Root loader a ensureQueryData()....
Conditional mutationFn in useMutation
Is it possible to create a custom useMutation like the following with the correct typescript ?
```
export const useCustomMutation = <T extends Types>({ type }: { type: T }) => {
return useMutation({
mutationFn: type === 'one' ? one : two,...
NextJs working
heyy, i trying to understand how to use react-query but i dont understand, can someone help me? (i am in a nextJs project)
Queries run non-stop
Been troubleshooting this for hours and can't figure it out. If the query key is just a single string in an array, completely stable, shouldn't it be impossible for the query to execute again before the cache goes stale? Which I believe is 5 minutes?
Trying to understand what other reasons there could be that
useQuery would keep executing in an infinite loop. Any help is appreciated....Mutation stuck at loading
Hi there! I've searched and found this issue that seems related: https://discord.com/channels/719702312431386674/1081312089282461826
Basically I'm calling a mutation from an effect but its status remains
loading . However, if I add the onSettled callback, data is defined so I don't understand what's wrong.
Here is a simplified version of my code, thanks in advance for the help!...Image URL cached
Hi! I have been using Vue Query to update a user's profile picture with a mutation. The problem is that, when the picture is updated, the browser keeps showing the previous picture, and I think that happens because the URL is the same (we use cloudinary) as the previous one, even though the image is different.
Does this have to do with Vue Query or the browser? If so, what could I do to fix it? I have tried several methods, but have not found a way to make it work.
Vue Query Snippet...
React query mutations
Hi guys I wrote this custom function in react-query to simplify my code
```
import { useMutation, useQuery } from '@tanstack/react-query';
...
Return multiple queries on react router loader
Hi, how can i handle multiple queries inside the react router loader ? Is this the correct method with the array ?
```js
const myQuery1 = (id) => ({
queryKey: ... ,...
reset error boundary if query succeeded
If I have a query that is being used in multiple parts of the same page, and if it fails, I want error boundaries to catch those components and render fallbacks.
But if the user presses
Try Again on one of the queries, only that boundry is reset if the query is sucessful. The rest of the components are still rendering the fallback.
Is there anyway to have all the error boundaries reset?...Change the react router example on github TanStack/query
I'm learning react-query/react-router reproducing this official example at the repo path:
examples/react/react-router/src/routes/contact.jsx
But I don't understand some logic on how it works and I would like to ask for an opinion. Since the router loader is for accessing the data we fetch from the db, why fetch them outside the loader with ...
But I don't understand some logic on how it works and I would like to ask for an opinion. Since the router loader is for accessing the data we fetch from the db, why fetch them outside the loader with ...
Can I really use useQueryClient outside a component in a normal regular function?
Hi all can I really use useQueryClient outside a component in a normal regular function?
Client only filters in infinityQueries
Hi!
Here is the case: I am getting an paginated list of persons from infiniteQuery and it also has "count" (total amount of persons) field (which I am using to calculate amount of pages). But I am also have a "filters" section which filter out person by gender it is client only and does not envolve server.
How should I do it idiomatically? I am currently manually updating my infinite query, but my pagination is broken, because I do not know how many pages I have after filtering. Should I somehow calculate a new count field every time filter applied or is there any "elegant" way of doing it?...
<video> tag flashes when using react query
Hi all, I'm using react query to manage my browser based video editor's asset library:
```ts
const assetQuery = useQuery({
queryKey: ["assets"],...
How to handle updates through websocket?
I'm trying to create a chat and made the following mutation hook to be called on incoming websocket messages:
```
import { useMutation, useQueryClient } from "@tanstack/react-query";
function useAddIncomingMessage() {...
onSuccess mutation fires another mutation
Its okay to fire a new mutation inside the onSuccess of another mutation?
how to make 100 sequential queries
Hi everyone, I hope you're all doing well. I find myself in a bit of a tricky situation and I'm unsure how to solve it. Currently, I'm using the useQueries hook to fetch dynamic data. The issue (which doesn't personally affect me, but rather the backend, it has to do a lot of work finding some heavy data in many DB's to be fair) is that the requests are being made in parallel, which I find great. However, when there are around 100 different requests, the backend crashes. As a result, I've been asked to modify the behavior to make the requests sequentially, either one after the other or in batches of 10 requests.
If anyone could provide me with a hint or guidance on how to achieve this, I would greatly appreciate it.
```typescript...