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
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:...
React Suspense with react-query and router
Hello! I'm trying to use react-query and router together with React suspense. The idea being, when a user switches to another page, the page suspends until all queries of that pages component have completed using
useSuspendedQuery.
I created the QueryClient in the application root and pass it down using the QueryClientProvider.
I then included a ...Suggestions on dynamic refetchInterval adjustment
I'm aware of the fact that
refetchInterval takes a function to allow it to be adjusted, which is great. I'm wondering what the suggested/ideal approach is for the following scenario:
What I'd like to achieve is to be able to trigger a more rapid refetch after a job is triggered by a button push, and then fall back to a more relaxed schedule once all the tasks associated with that job are complete. The idea here being that the UI should be more reactive when a job is ongoing, but in the interest of performance should slow down if nothing is happening.
The issue I'm encountering is that because I'd like to use a more relaxed interval as my default (30 seconds), it takes a long time to trigger the recalculation to switch over to the more rapid interval (5 seconds). I'd like the switch to be instantaneous....refetching from child component with typescript?
What is the best way to refetch a query from a child component when using typescript?
Do you pass refetch from the parent, then set up the interface props like this? Or is there a fundmental react-query method that I'm missing?
```import {QueryObserverResult} from "react-query";...