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
Testing useInfiniteQuery
Hey, I was following official docs suggestions on how to test infinite queries. https://tanstack.com/query/v4/docs/guides/testing#testing-load-more--infinite-scroll
However, suggestion to for
isFetching and then !isFetching seems to result in a flaky tests.
What worked for me, is to await the result itself...
Is there an equivalent of getQueryState for getting the state of a mutation?
Hi everyone, I have a mutation that is executed in component A and I want to get the state of that mutation in another component? Is this possible with React Query? It looks like this can be achieved with queries but not mutations?
Module parsed failed after installing debugger
Hey guys,
I just installed react-query and it works, but after installing the debugger with
yarn add @tanstack/react-query-devtools and import {ReactQueryDevtools} from "@tanstack/react-query-devtools"; my bundle fails to compile.
```...invalidation - useInfiniteQuery with local-first cache
hi,
i've got a useInfiniteQuery which is browsing collections using a local-first (SQLite/IndexedDB) cache of a remote collection
sometimes i want to invalidate the query and have it refetch all pages, but only from the local store...
retry on custom useInfiniteQuery with graphQL-request
Hi, i'm trying to achieve a custom hook around
useInfiniteQuery that will fetch next page automatically.
The endpoint I have can only return me 1000 entities at max for a single request.
Depending on some parameters, the request can fail if those 1000 entities are too big, so I may need to reduce the amount fetched if that's the case (depending on the first options in variables)....set timeout to navigate on onSuccess when mutating
I am having problems with the below and wondered if anyone can help?
Before migrating to RQ I used a setTimeout with Redux to solve the below:
A user chooses a country to onboard in. The country is posted to the backend, we wait 4 seconds, the user object is fetched which includes the onboarding country and the user is redirected. (without the onboarding country being present in the user object we refuses the re-direct due to permissions)
...
How are you using RQ to replace a Redux Store?
We are migrating from Redux to RQ. Everything is going well but I wanted to get some opinions on something.
We had a redux store for our user object, but now with RQ I have created a function that fetches the user that I re-use.
The function is called in various places in the app, but wondered if it may be better to do the fetch once, assign the data to variables and then import them into each component. How is everyone else managing this?
...
Is this how you should set up a DELETE custom hook?
im new to react query. thank you.
hook
```js
export function useRemoveUser() {...Import react query as a peerDependency into Next.js throws error - Error No QueryClient set, use Qu
I am using a monorepo. In one package I have my web-app build with next.
In another one all my react-query hooks.
When I import the hooks from the library into Next.js I get the following error:
````
error - node_modules/@company-libs/queries/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs (34:0) @ useQueryClient...
Cache strategy for resources available on multiple endpoints?
Are there any best practices for handling resources that can fetch both as a batch and individually?
Example: The https://swapi.dev/api/films endpoint returns six films. These films are also available individually by adding an ID to the URL. The React Query example (1) caches these two endpoints separately, resulting in everything being cached twice. Are there any examples / best practices on how to avoid this double cache?
1) https://codesandbox.io/s/github/tanstack/query/tree/main/examples/react/star-wars?from-embed=&file=/src/Film.jsx...
useQuery() with listener rather than fetching
hello! i've been using react-query for several months now in a project to fetch data-mined game data with great success. i have a secondary use case now where i do not want to fetch, but rather listen for updates and modify the query data state to append new data as it is retrieved.
i am not interested in pagination in this case (so i don't think useInfiniteQuery etc is applicable) as i use virtualisation to manage what is rendered on the page. the goal is to have a single array that will render as i scroll which im handling with a separate library - so no pages
i would like to know what the recommended strategy is for modifying query data without refetching - can it be done with one of the values within useQuery's return or do i need to use something lower level like accessing useQueryClient and using setQueryData?...
useQueries
Hello,
I have 2 queries which i'm trying to run in Parallel. After having read the docs, it mentioned that i need to use
useQueries since i'm using react-query with suspense.
I'm having a hard time adapting my code to useQueries - the syntax is confusing me quite a bit....Im trying to create a custom Hook with useMutation
this is my custom hook which im exporting into my
todo component, i want to call mutate on the hook via a button click. but the hook returns a promise and mutate is no available, can anyone help?
hook
```js
export default async function useUpdateUsers(client: any) {...Struggling with basic use of useMutation
My app is not updating when i call useMutation on the button click, i have to refresh the page.
```js
// - Fetch todos from API
async function getUsers() {...
is destructuring useQuery to return from custom hook bad?
im seeing some unexpected calls / rendering behaviour doing this kind of thing in a custom hook - is this just bad and i should only return useQuery() itself?
export const usePreferences = () => {
const { authState } = useAuth();
const query = useQuery(["preferences", authState?.isAuthenticated], () =>...
One query client in different provider
react-query 3.34.8
Hi. I have and two microfrontend components called Modal and Drawer.
They both have own QueryProvider with same query client, but when i fetch data inside modal and then try to get it inside drawer i got this object {
"dataUpdateCount": 0,
"dataUpdatedAt": 0,...
onSuccess (callback) only on initial load
I would like to define a callback when the data is loaded for the first time. For example, after loading the data I want to display some feedback message. I don't want to display it every time the data is fetched, only for the first time.
Something like this doesn't work, as it is called after every fetch:
```...
Stop refetchInterval after 5 call
Hi I’m wondering if there is a way to stop refetchInterval after the fifth call?
Error on _app.tsx
on the latest version of nextjs i get this error ```ts
type NextPageWithLayout = NextPage & {
Layout?: React.ElementType
authenticate?: boolean...
react query fetching even when component is not on page
How do I stop react query from fetching when the component is not on the page. It keeps fetching even when the component isn’t even on the page