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
Devtools performance
Hi all,
My post is related to Devtools. I'm facing severe performance issues as soon as Devtools are open and my queryCache contains a certain number of queries (>50). The query keys are built from a key factory and are then structured (array of 1 Object) and sometimes long.
I had no time yet to setup a codesandbox but I made a (bad) video to illustrate the problem, based on the
basic React example....Can manage to understand optimistic update.
Hello there,
I'm trying to implement optimistic update in my application but I struggle a bit. Here is my function :
```ts
const addCardToCollection = ({...
Utilizing newData and oldData properties in refetchInterval
I would like to base the number returned by my
refetchInterval function on whether newData and oldData are equal. I have looked at structuralSharing and the deprecated isDataEqual options, but it seems like both of these have changing the result of the query in mind. I just want to be able to leverage this property to make a judgment about how fast to refetch. How can I do this? Would I need to provide a function to structuralSharing and then pass the query into the refetchInterval...documentation clarification
Hi,
"When dealing with mutations that update objects on the server, it's common for the new object to be automatically returned in the response of the mutation. Instead of refetching any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the existing query with the new data immediately using the Query Client's setQueryData method:"
from: https://tanstack.com/query/v4/docs/react/guides/updates-from-mutation-responses...
useMutation stuck on isLoading set to true
When I try to use useMutation to login with supabase api my isLoading state is stuck to true like the mutationfn is not being called at all
A bug in React Native section
Hello everyone,
In this section https://tanstack.com/query/v4/docs/react/react-native#disable-re-renders-on-out-of-focus-screens
You can see that the notifyOnChangeProps isn't wrapped in a useRef, even though the ref is returned in the callback. ...
need some clarification please
Hi, im trying to understand useQueries from documentation, they telling:
"If the number of queries you need to execute is changing from render to render, you cannot use manual querying since that would violate the rules of hooks. " (https://tanstack.com/query/v4/docs/react/guides/parallel-queries#dynamic-parallel-queries-with-usequeries)
Which rules they talking about ?...
Is it possible to extract useMutation from the component/page file in Next.js?
I would like to define all the useMutations and useQueries (like updateUser, deleteUser, createUser, getUsers, getUser) together inside a UserAPI.ts file. I found the following example where they have extracted them from the main component: https://v2.mantine-react-table.com/docs/examples/editing-crud
Exposing mutation state through zustand
We have a complex scenario where a mutation is triggered from one part of the application, but its loading state is displayed in a different part.
I'm not familiar with a mechanism that allows sharing the inner state of a
useMutation call (isLoading, isSuccess etc) like we can with useQuery, so I want to sync it to a zustand store:
```tsx
const useStore = create(set => ({...Setting the initial data of an useQuery with SSR data
Hello guys,
I have a
NextJS application that I am now trying to list rows of a table called Message. I have to now server rendered it, but I need to refetch it and consider using useQuery aswell. Whats the approach I should use when the inital data should be the SSR one, but then after that im refetching from the client side.
Here is the SSR code I currently have: ...Clarification on Handling Chunks of Data in postMutation Response
I'm sending a postMutation request to my backend, and it's responding with data sent in chunks using res.write(). For managing these data chunks in the postMutation, should I handle them in the onMutate callback or another side effect?
way to log out number of query observers mounted for a query
hi! I am trying to find out the best way to throw a warning or console.log whenever there are more than 100 query observers mounted for a particular query key. is there a good way to do this?
Is enriching the query-return props a good practice?
Hey 👋🏽 ,
I'm interested in your opinion. Please check out following code:
```js
// use-current-user.js...
How to trigger query when url param changes
```ts
export const useNotes = () => {
const queryParams = new URLSearchParams();
const fetchNotes = async () => {...
const fetchNotes = async () => {...
data: T | undefined best practices
Heyo, I'm new to react-query. One stumbling block i'm running into is the best way to deal with data being T | undefined
I'm trying to make custom hooks that wrap useQuery (ex: useUsers()) and I'd like to reuse the hook in multiple parts of my app. The problem is dealing with undefined. my research has shown I can avoid object destructuring (ex const query = useQuery(...) ) and do if (query.isLoading) / if (query.error) and that'll gurantee data is defined.
But is it really normal practice to have to deal isLoading & error in -every- component that wants that data? I find that adds a lot of boilerplate to components who I'd hope would not have to worry about it. Sort've like how in Redux if I did const users = useSelector(selectUsers) I can count on Users being a User[]...
Query manual refetch indicator
Hey, guys!
I am using a query in react native with the Flatlist pull to refresh functionality, which requires a "refreshing" prop to indicate the data update is in progress.
I tried using the
query.isRefetching property for that purpose, but looks like it doesn't differentiate between a manual refetch with query.refetch and a invalidation with queryClient.invalidateQueries....All components must be client component when fetch data on server component?
Hello there, I'm newbie of Tanstack query,
I tried to fetch data on the server component by the way using prefetch with hyration to client component, but it will make all my child components are client component,
although my page have to fetch data too, so each page will be all client component?
Please help, I love Tanstack query...
A Normalized cache in React Query
Hello, Im using Apollo Client for my query but isn't really optimal for my setup. Im using Supabase for the backend and the rest API is way more powerful than the GRAPHQL one. I really like how React Query work, but the only thing missing in react query is the normalized cache. Is this planned in future versions of react query? Or is there an additional package to achieve this?
Thx a lot =...
Map queries in a single hook
I have a query from Tanstack-Query that returns an object with inside it an array of variable length (it can be an empty array). Inside this array, there are objects with one URL inside each object.
I want to fetch data for each URL inside one
Currently, I have this
I want to fetch data for each URL inside one
useQuery or useQueries hook.Currently, I have this
useQueries hook which returns an error that queries is undefined:
```
const [results] = useQueries({...share mutation state (status)
Hello community, I was wondering if there is a way for me to share my queries state with other components, in this case mutations state?
I know how to invalidate query but I want to show currently pending actions object in a list.
Here is my current approach with useMutationState:...
