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
Question about stable data
```jsx
export const useQueryTesting = (key: number) => {
return useQuery({
queryKey: ['testing', key],
placeholderData: (prev) => prev,...
Infinite loop with Hydration Boundary and Next.js 14 App Router
Hey, I'm trying some prefetching with app router but I've got infinite loop error like on the screen. Here is code:
```js
export default async function OrganizationUsers() {
console.log('in page');...
Force suspense for query
Hey,
I have a supply selection page that uses
useSuspenseQuries to load two endpoints which are required to get the supply recommendations and also restore existing selection. Once the component mounts, we use react-hook-form to transform the data into a form state using it's defaultValues prop.
This works fine on first load, but when a user goes back to make changes on a different page, when they come back to the supply page we need to reload these endpoints so everything is correct. The problem is, when they come back, suspense is not used and data from the cache is used instead. This causes the form to be initialised with the previous data. There are work around for this, such as using isFetching or resetQuery (however the latter isn't practical because there are multiple places in the app that can cause changes that affect supply page)....Request blocked status code for useMutation in Tanstack Query for Updating Data
I'm facing an issue with using useMutation in Tanstack Query to update a single row of data in my React application. The goal is to update patient data using a form and handle optimistic updates. However, I'm encountering an error which is forbidden or block request so please solve with me .
``
INTERFACE CODE
interface Patient {...
[SOLVED] useMutation does not seem to recognize all of my parameters in my function.
Hi, so I'm trying to post form data to the db and I'm having issues.
In my api folder, I have a handler function to create an entry:
```...
When throwOnError is false how does react-query not throw an error the first time but store in error
```ts
const { data, refetch, isSuccess, isError } = useQuery({
queryKey: ['test'],
queryFn: async () => {
throw new Error('test');...
Invalidate Query does not display the newly mutated data.
I have an editable table that uses useQuery to filter data and pagination. The problem I'm having is every time I do mutation it doesnt automatically display the newly updated data. I need to refresh or go to the next page and then go back just to see the changes.
My useQuery:
const { data, isLoading, isFetching } = useQuery({
queryKey: [...
Refetch does not rerender
Hey I have the occurance that I refetch but then my components just load the old data so you have to reload to show the changes. This is my current code. I call this mutate function in my Child component. Does anybody know how I could fix this?
```js
const {serverId} = useParams()
const {data, isLoading} = useQuery('join-manager', () => fetchJoinManager(serverId ?? "0"))
const servers: Server[] = useOutletContext();...
[SOLVED] Refetch not occurring after router.back (React Native)
Version "@tanstack/react-query": "^5.37.1",
I'm not seeing a refetch automatically occurring after the data is updated.
...
isError not updated when NextJS API fails
When a request in the NextJS server fails, the
error properties do not update.
This is my QueryClient config:
```
const Providers = ({ children }) => {...
How to transpile react-query v5 for old browsers using vite
Hi guys, at work we need to support older versions of ios and safari 13.
would like to use v5 instead of v4
In the documentation its mentioned that ...
Long Loading Times With Prefetch
I am a little confused with prefetching data in a Next JS (app router) server component. On the dashboard I prefetch 10 queries which reach out to multiple AWS lambdas after a user logs in. This is causing load times of around 20 seconds. Should I only be loading crucial items for displaying the page? Do prefetch queries run in parallel? Should I be using suspenseQueries? Looking to see if anyone has any solutions to this issue.
TypeScript Error with useMutation in Tanstack Query for Updating Data
Hi everyone,
I'm facing an issue with using
useMutation in Tanstack Query to update a single row of data in my React application. The goal is to update patient data using a form and handle optimistic updates. However, I'm encountering a TypeScript error that I can't seem to resolve....Gatsby + react-query
Did anyone tried before? I've done the setup as the docs, but anyway it doesn't do caching any of the querys. In multiple places, it just doesn't work. I set up queryClient in the Parent component gatsby-browser.js and gatsby-ssr.js and it doesn't work. It fetches data but the caching feature doesn't work
Console Error: Query data cannot be undefined & handleLogin hangs at `isLoading`
Hey everyone,
I was working on a project and was using Tanstack Query for fetching my user data. I am doing this on Expo + React Native. I have an api running at the address.
(localhost in android-emulator uses http://10.0.0.2 as a map to http:127.0.0.1) I have my functions & states defined as
```tsx
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");...How to avoid useEffect for render twice?
Hi,
my react query version: ^4.29.25
so I have pseudocode below
my objective is, i want to insert some data use mutation to DB when the data is not exist in useEffect, but the query is running twice in development mode. I was try to prevent using useState.. but not work....
Difference between a query function returning undefined and a query function throwing an error
I had expected after v4 that returning undefined has the same behavior as throwing an error since undefined won't get added to the cache but in practice it seems like returning an error results in the query function being called far more often. What exactly is happening here?
mutation.mutate is not a function error
I have a post goal api which is used in various components so im creating a usePostGoal hook which returns mutation. On a click im doing mutation.mutate but it returns
when im using the same mutation without hook it works fine...
TypeError: mutation.mutate is not a function
TypeError: mutation.mutate is not a function
Unique key based on data
Hello!
I have the following problem: I want to output the user id as a query key. But I only get the id from the query function. Is this possible, and if so, how?
```const { data: user, status: userStatus } = useQuery({
queryKey: ['users', user.id],...