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
Use react-query with IndexDb with SSR randomly throws window not defined
I have a code similar to this:
```
const { data } = useQuery("idx", async () => {
const result = await indexDb.get("mykey");...
Getting a promise from useQuery
I have a button which navigates to some screen when clicked, but this navigation requires some initial data which has defaults stored in user settings. I am fetching user settings with useQuery. Instead of disabling my button until the settings have been loaded, I would rather be able to get a promise from useQuery somehow so that I can await this on-click (given that settings haven't loaded by the time the user clicks). I know I can just refetch, but that would be a bit slower.
Is there any way to do this natively? Thanks...
Interval useQuery in Provider Context
I'm calling api interval useQuery in Provider Context. It causes re-render after interval time in child component? Anybody can help me explain that and how to fix it? Thank you!
useQueryClient ambiguous behaviour
I have been trying to access isMutating function over the queryClient provided by useQueryClient hook. Although whenever there is a mutation happening anywhere in the app, queryClient.isMutating() doesn't really return anything. But when we use useIsMutating hook for accessing if any mutation is happening it does return proper value. I am not sure why this is happening. Or maybe there is missing knowledge on my side. Please let me know
Here is the codeSandbox link with minimal reproduction: https://codesandbox.io/p/sandbox/goofy-sun-l2wjth?file=%2Fsrc%2FApp.js...
useSuspenseQuery and isFetching
[Apologies that this question was mistakenly posted first in the react-router channel. Moving here now.]
According to the React docs, when you wrap part of your application in a Suspense component and specify a
fallback, then the fallback component will be rendered until all children have completed their data fetching. In other words, if queries in child components are in a fetching state, then the fallback is rendered instead of the children. When child components have finished fetching, then they are rendered.
That being so, I'm confused about the useSuspenseQuery example mentioned in the Tanstack docs and in particular the isFetching status. The component in the Project.jsx file is defined like so:...Infinit Query avoid useless refetch when part of the list is updated
Hello I am working with infinit query to fetch a list of group. when I access the detail of a group I need to refetch the detail even if the data is present in the list of the infinit query. When I update a group I need to refetch the detail and the infinit query.
So I wonder if there is a way to avoid all those useless refetch.
For example: ...
Unable to cache data with `prefetchQuery` on server + `useQuery` in client
Test-case: https://stackblitz.com/edit/stackblitz-starters-skmfha?file=app%2Fform%2Fposts.tsx
Each time ./posts gets refreshed, the terminal prints "in getPosts" which is a message sent by the getPosts() function. I was under the assumption that getPosts() function will only be called again once the cached data expired, but it seems to be called every time the page gets refresh.
Is this the expected behaviour or am I doing something wrong?...
Error loading, too slow and also initialData first 2 times get undefined:
```js
const [billData, setBillData] = useState<Bill | null>(null)
const [showDetails, setShowDetails] = useState<any>(false)
const { user } = getUserLS()
...
is there any peer dependency for old projects?
I want to install react-query in one project from my work. It's using gatsby 4.2 , nodejs 20, and typescript 5.0, but we are not using latest babel/eslint/etc versions. So I had problems installing react-query-devtools. This library would work fine without the devtools?
We're planning to update all our dependencies from this project but in the next 4-6 months. But we want to switch to react-query from now. Any ideas?...
Refetch data on error
Hey, on Error I want to render a toast with a button that will refetch my query.
In v4 I could add
onError callback to useQuery , call my toast method there and pass it a refetch method to a button onClick callback.
In v5 there is a global onError callback for QueryCache instance, but I don't know how can I refetch my query there as I have no access to refetch method....How do I keep derived data in sync
Hi All!
Like most here I'm pretty new to react query and I don't know I'm complicating things too much. So I'm trying to use react query as a state manager but I'm having an issue trying to keep derived data in sync. My setup is like this, I have multiple api hooks, each with useQuery and useMutations, I then have another hook to consolidate/combine the hooks and create some derived data. I have a component with a button that will run one or more of the mutations from the combined hooks. I want to use the cached data as the derived data so that I don't have to use the useEffects and useState and what not but I don't know how to go about it. I hope this makes sense. Thank you for your time 🙂
```javascript
const useApi1 = () => {...
How to check if useQuery data changed
Hi I'm new to this so sorry if this is easy to do but i cannot figure out how to check if the data in the useQuery has updated. The reason I need to check this is cause i have another value I want to change only when data changes and not on every render.
This is my query
```...
fetchQuery
Is it possible to use fetchQuery with a staleTime of 1 hour and a gcTime of Infinity, so every time it should just return the cached data but after one hour it should refresh the cache, BUT in the background so when i call it, it should still return me the data directly since it has it in cache?
Im doing this
```ts
router.beforeEach(async (route) => {...
Best way to get data inside inner components?
Hello, thank you in advance for your time. I am really new in Tanstack query and I would appreciate your help.
I am using NextJs for a project and I have in my index this code.
const {
data: store,
isFetching,...
useQuery always refetching
Hi 👋 I'm new to using useQuery and I think I already follow the instructions from the documentation, so here is the snippet of my code,
`const { data, isLoading, error } = useQuery({
queryKey: ["financialSankey", ticker],
queryFn: () => fetchReport(ticker),...
how to define types for querykey?
Hello, a lot of times when I end up with some bugs in my app, i noticed that I was always using wrong querykey with methods such as
setQueryData and I was wondering, is there a way to define the types, so that when I use setQueryData I would know that im entering correct queryKey.
```
export function useGetWeeklyDiaryNew(
userId: string | undefined | null,..."Lazy Query" dependent on an event occurrence - best approach?
Hey there.
My problem is quite simple, but I struggle to find a good approach.
The case looks like this:...
Why is my query refetching when using the same query key?
I have this setup
```tsx
const dataQuery = useQuery(
[...