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 treat the data before passing the data?
Hi!
I would like to make a query with useQuery and within useQuery itself handle the response and modify the data structure, something like redux thunk can do.
I understand that the "select" property does something similar, but it doesn't cache. Is there another property I'm not seeing that can make this modification and cache save? Or a more optimized way for me to do this?...
Difference between tanstack and react query npm package
Hi Team,
I am confused what is the difference between these packages and why is the react query one still on v3? Should we move to the @tanstack package or will react query be updatet as well?
https://www.npmjs.com/package/@tanstack/react-query
https://www.npmjs.com/package/react-query...
Only fetch data once if component is open - after close and reopen fetch again
Hey guys, if I open a sidebar component this will trigger a fetch of an API and load some data which takes a lot of power in the backend because its a calculation. After the successful fetch the data will stay in fresh and if I change something in the UI it will trigger a refetch and it will do the calculation again in the backend. I dont want that this calculation runs again so I don't want a fetch of this data, it should only show the cached data even if something of the query key changes. If the component closes and opens again it should fetch it again. What is the best way to do that? I am on react-query v ^3.38.0.
Short: I only want that component to fetch once when opened. Refetch should be only triggered if component closes and reopens.
Ideas:...
Type data correctly when using InfiniteQuery and select-Function.
I got an InfiniteQuery with a select Function that reduces my data and returns it.
It looks something like:
select: (data)=>data.pages.reduce((acc, page) => [...acc, ...page.rows], []);
If I pass my type as TData. I would expect that query.data is TData[].
Instead it is {pages: TData[], pageParams: unknown[]}...Authentication
Hello everyone
Anyone already do authentication using Next.js and React Query?
If yes can please help me?...
useQuery with arguments?
react query question... so example from docs:
what if fetchToDoList requires params from form data? Which is my case... How am I supposed to pass fetchToDoList in this case when it requires 2 arguments that aren't accessible in the scope in my case?...
const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
Should you avoid nesting QueryClient?
We have a large enterprise app with multiple teams working on features that use RQ. We're in the process of introducing a
QueryClientProvider at the app's root level which would create nested clients. Is this something to avoid? I assume calls like queryClient.invalidateQueries will be limited to their closest provider, but I could see this being confusing in a large codebase.react-query offline mode
Does react-query support something like: it will fetch if device is online, staleTime work like it does now, but when device is offline, it will get data from storage no matter how old the cache is?
For example: I set staleTime: 5 minutes, if device is online, it will fetch again after 5 min, but if device is offline, it will always get data from cache storage...
Make invalidateQueries not instant refetch but wait for next mount
Hi guys,
I am having some issues with invalidateQueries.
I use react query to fetch a list of elements that I dispatch in a global state. I would like to use the cache as much as possible.
When an item is deleted I am deleting it from the global state and I send a request to delete it in DB....
Is it not possible to use useQuery in the root component of Nextjs app?
I am trying to use useQuery in the _app.js file of Nextjs framework (which is the root component of the app in Nextjs) and am constantly getting error
No QueryClient set, use QueryClientProvider to set one. However I have already set the QueryClientProvider and everything works well if I shift the use of useQuery to any other component other than root component. It seems like something is not ready yet before I set the QueryClientProvider. Can someone please help to understand that part?How to refetch data in useInfiniteQuery() - react query?
I have a list of items and I'm using
useInfiniteQuery for pagination stuff, So I have a case where I can edit Item info and then re-fetch the list again to get the updated list of items,
current behavior:
using queryClient.refetchQueries
...Invalidate query happening too fast
After onSuccess on a mutation I invalidate a query, but if I do not give the backend enough time to update the database when the query is invalidated it gets the old stale data.
For context my query is making a get request to my api, and my mutation is making a post request. The issue I am having is I invalidate the query in the onSuccess callback in the mutation, but if I do not setTimeout before invalidating the query then it pulls stale data while the backend is still updating the database.
Any ideas on how to fix this?...
How do I get rid of react-query dev tool html element? Its breaking my html page.
At the bottom of my page the react-query dev tool is creating an element and its outside of the content on the html page, its breaking the page and i wanna get rid of it. I can't do overflow none because I need to scroll on the page, especially for mobile view.
react-query v4 async storage persister cache time
In createAsyncStoragePersister which parameter determines how long react-query will not fetch while it is cached?
staleTime: Infinity,
cacheTime: 60000,
...
Throwing error not resulting in react-query capturing 'error' state
Hello,
I have a POST function using fetch like:
```...
React-table visibility columns on select on a custom component does not update the parent component
As the title says, I am passing the table to a custom dropdown component:
But, the onchange does not update the parent ...
<ColumnsSelect allLeafColumns={...table.getAllLeafColumns()} />
<ColumnsSelect allLeafColumns={...table.getAllLeafColumns()} />
AbortSignal for useQueries
In
useQuery a context is passed to the queryFn which provide an abort signal that can be consumed by eg. axios.
When using useQueries (plural) the context is not passed to the queryFn. Is there a way to send the abort signal to all the requests made by useQueries ?...Throttling-Debouncing
I'd love to see an example of throttling/debouncing a
useQuery. I have some ideas, but feel like it can turn into a monstrosityFetch data only when first call was successful
Hi guys, I created 2 custom hooks to fetch Products and 2nd to fetch Categories, what i wanted to achieve is to fetch categories only when there is products data, below hooks and implementation: ```import { queryKeys } from "constants/queryKeys";
import useSnackbar from "hooks/useSnackbar";
import { useQuery } from "react-query";
import { getProducts } from "services/api/shop";
import { errorMessage } from "utils/helpers/errorMessageTitle";...