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
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
Add isEnabled query option or other merging utils
I'm trying to merge the results of two queries, one of which isn't enabled in certain environments. I think that either isLoading should be false for the one that's disabled, or we should have an isEnabled query option. It would also be helpful to have some sort of merge util for merging query options. Mostly so I can show a loading indicator until all the (enabled) data is fetched.
refetch data after 10 seconds
Hi! I'm using useQuery like this
```js
const { isLoading, error, data, refetch } = useQuery(['scoreboardData'],getScoreboard)
useEffect(() => {
const interval = setInterval(() => {...
React query devtools
Hello,
Why does the query number in the devtools turning black mean?
As you can see in the screenshot attached, the "tournaments" query number is black...
useQuery with the same key but different options
Hi!
In my app, there's a profile page for each user.
In this page, you can see each of the user's friends avatars in a tiny circle.
When you click these circles, there's a popup that shows their information.
...
Error boundary for unmounted mutation or what else to use (v3)
Hi! 👋
I'm trying to solve a very specific use case and I need some help figuring out if it's even possible.
I have a list of items rendered in React and each item has a dropdown. Inside the dropdown, there are actions and each of them is a mutation. If the mutation fails, the error message should be displayed below the item (or rather inside it but at the bottom). And we currently solved it by having all of the necessary
useMutations in the item component. This means they need to be always initialised even if the dropdown is never opened. Moreover, some actions can be unavailable for some types of items, making it even less useful to have 5+ mutations on the root component just to be able to fire them from a dropdown.
...Next.js - ReactQuery data is being refetched everytime route changes.
Hello. I made this simple demo, where react query forces refetch every time route changes, I want to disable this behavior. Is it possible?
It does refetch only when previous response has been unsuccessful. In my specific example where I am getting user from API, I don't really want this kind of behavior, because it shows loading animation on every page change.
```ts...
Query Key autocomplete
Hi, type-wizards. Is there a way to get Query Key autocompletion when invalidate or fetch? If not, can it be a feature in tan-stack query v5?
No ReactQuery Dev Tools - NextJS Container
Hello TanStack Community!
I am trying to integrate my love of ReactQuery in a new project NextJS monorepo governed by Docker.
TLDR: NextJS container is running NODE_ENV=production due to
build command therefore ReactQuery devtools are not shown despite this being a development build....Can we keep previous data longer..?
I'm building a pagination feature using react-query.
keepPreviousData is an amazing feature to me, but it's not enough for this time. I want to keep old data until I finish making some changes right after API fetching/refetching.
for example..
```
useQuery(['key', parentId], fetcher, {...useMutation and FormData
Any idea why my formData is not being picked up by useMutation? The network request is successful but the formData is not being sent. The data is being sent with empty strings.
.
```
const useUpdateUser = (type, legalName, idFrontImage, idBackImage) => {...
mutation return
Is there a way to get isError/isSuccess/isLoading inside the method after calling the mutate function?
I want to get when I click on a function
I have a get request but I don't want it to work in every render,
I want this request to happen only when the function is pressed, what should I do? I made enabled:false in the settings and I am using the refetch method but when another component is rendered it refreshes the request...
Stop refresh interval after so many retries or on certain error
I want to stop refreshing I get 500 errors, or at least have a way to distinguish between retries/refreshes in the onError callback.
Chaining API requests react query v3
Hey Team,
I want to chain an API request so that the first one have to complete then the second one should start. This scenario can happen multiple times. So I need to run the powQuery multiple times and I need the behaviour that this one is the first one.
My idea is to use a state which I set onSettled...
React query seems to be corruption date fields.
Hi there. I'm using a
mutation in order to do a post call with axios.
Right now data contains a field data.trackDays which is an array and each trackDay has a trackDayDate field. If I console.log that right before const response = axios.... then will the value of that field be "2022-09-29T22:00:00.000Z".
But if I use the browsers network inspection tool to look at the post request can I see the value now is set to trackDayDate: "2022-09-28T22:00:00.000Z" ?!...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:...