Questions tagged [react-query]

Here is the code snippet I am currently working with: import { useState } from 'react' import { QueryClientProvider, QueryClient } from 'react-query' import { ReactQueryDevtools } from 'react-query-devtools' import Navbar from './components/Navbar' i ...

Two requests, POST and GET, need to work together. The POST request creates data, and once that data is created, the GET request fetches it to display somewhere. The component imports these hooks: const { mutate: postTrigger } = usePostTrigger(); cons ...

After watching a tutorial on YouTube about utilizing React Query, I attempted to implement caching in my project. However, the data is fetched every time instead of being retrieved from the cache. I've reviewed my code and can't pinpoint what I&a ...

Attempting to pre-fetch data using react-query with prefetchQuery. The network tab in browser DevTools shows the requested data coming from the back-end, but strangely, the data is not present in the react-query DevTools cache. Any ideas on what might be c ...

I am currently working on an admin website and encountered the error Block-scoped variable used before its declaration.. I will provide details using images and code. This is my first time seeking help on StackOverflow. Error Message: Block-scoped variab ...

Utilizing a series of custom hooks, I am able to fetch data and perform various calculations based on that data. One particular hook calculates the total amount that should be set aside monthly for future expenses, using the output from previous data-fetch ...

Since diving into React with functional components and react-query, I've been facing some confusion on how to properly organize my components. Typically, I design components by having a top-level component handle all data access and pass data down to its c ...

I have transitioned my React App to utilize react-query for handling API calls instead of redux-thunks. After watching tutorials on react-query, I learned that it is recommended to create a custom hook for this purpose. Here's an example of how the ...

https://i.stack.imgur.com/SPvy9.png Looking at the code snippet, it seems that I have employed useQuery() but need it to fetch data only once. Unsure whether this issue lies with NextJS or react-query. ...

I'm still getting the hang of tRPC, so I appreciate your patience with me. I've run into a problem with the useMutation query. Every time I use useMutation with new input, it seems to give back undefined for data. Interestingly, though, I can con ...

As per my understanding, the only way to conceal a JSON return from an API call is through server rendering. I have implemented this on all pages using Next.js; however, the network tab still displays a JSON with my data on pages where useInfiniteQuery and ...

On button click, I need to call 2 APIs where the second query depends on the result of the first query. I want to pass data from the first query to the second query and believe using "react-query" will reduce code and provide necessary states like "isFetch ...

I have been using next-mdx-remote in my next.js project. One of the components I've passed to it makes API calls using axios, which has been working well. However, I now want to switch to using react-query. When implementing this change, I encountered ...

I am using a select component from the MUI React library along with react-hook-form and controller. I have set a default value in the controller to use the reset function, but I am unable to change the value when a default value is set. Everything works ...

Only encountering this error on the production environment, while everything runs smoothly on my local development machine using yarn dev. The issue seems to be related to the react-query hook useQuery. The error is happening within the component where th ...

I've encountered some difficulties while migrating my current react project to typescript, specifically with the useQuery wrappers that are already established. During the migration process, I came across this specific file: import { UseQueryOptions, ...

When implementing a query or mutation using React Query in Next.js 13-14, is it acceptable to substitute an actual function with a server action? ...

React Query Issue I am currently facing an issue with React Query where the API is being triggered multiple times instead of just once when the selectedAmc value changes. I have tried setting strict mode to false in next.config.js, but that didn't so ...

Currently, I'm utilizing Next.js to develop a project for my portfolio. In order to manage the API, I decided to implement both Tanstack query and Axios. The issue arises when attempting to retrieve the data as an error surfaces. Oddly enough, while the d ...

My goal is to store the response data in the variable activityType. Within the useEffect function, I am iterating over an API based on the tabs value. The API will return a boolean value of either true or false. While I can successfully log these values ...

Seeking assistance on caching data from Google Places API using Tanstack Query. Encountering an error when passing parameters: TypeError: client.defaultQueryOptions is not a function. (In 'client.defaultQueryOptions(options)', 'client.defau ...

Can someone help me with identifying the type of error in react-query MutationCache onError function when using Typescript? I also need guidance on how to override the type so that I can access and use the fullMessage from the data. const queryClient = new ...

Iterating over an array and applying a mutation to each element array?.forEach((item, index) => { mutate( { ...item }, { onSuccess: ({ id }) => { console.log(id) }, } ); }); The n ...

While working on my nextjs app, I decided to implement react-query with SSR/SSG and went through several tutorials. I opted for the hydration configuration over the initialData approach as it seemed more efficient. Following the instructions in the react- ...

Hey there amazing developers! I need some help with a query. When using useQuery, the imported values can be undefined which makes it tricky to apply them as defaultValues. Does anyone have a good solution for this? Maybe something like this would work. ...

I've been attempting to implement infinite scrolling using useInfiniteQuery, but every time I call fetchNextPage, it just ends up re-fetching the initial page. I've scoured the React Query documentation and meticulously reviewed my code, yet I haven't been ...

Two parameters are sent from the frontend to trigger a GET request in another TypeScript file. It seems that one of the parameters is not successfully passed due to unknown rerenders, resulting in a 404 Error being returned by the API call in the console. ...

Having some difficulty working with custom react hooks. I've created 2 custom hooks - one for fetching an ID and another for fetching a profile using the previously fetched ID. Since the second hook is dependent on the ID, I need to await the promise ...

I am building a visitor call system using React Query. I have a call button and I only want to make an API call when the button is pressed. However, the API keeps getting called every time the component is rendered. How can I prevent the component from m ...

const { isLoading, isError, data, error, refetch } = useQuery( "college", async () => { const { result } = await axios( "http://colleges.hipolabs.com/search?name=middle" ); console.log(&quo ...

export function retrieveAllUsers() { return useQuery<UserResponseDto[]>({ queryKey: [QueryClientKeys.GET_ALL_USERS], queryFn: async () => { const response = await http.get< UserResponseDto[], ...

This problem has me scratching my head. The code snippet below is triggering this error: TypeError: Cannot read properties of undefined (reading 'map') When I use console.log() to check res.data, everything seems normal and there is data present. However, ...

When using React Query to fetch data, the function runs smoothly. After console.logging the 'data' variable from React Query, it prints an array of objects as expected and handles states efficiently between loading, success, error. The issue arises when ...

When attempting to fetch data from Sanity in a client component within Next 13, I encountered an issue using both a client fetching library and vanilla react. The error message displayed is as follows: Access to XMLHttpRequest at 'https://rc70arjs.api.sa ...

I am looking for a more efficient way to include a token that is generated during login and stored in cookies in all my fetch requests. Currently, I have created a custom hook to add it each time to avoid repetition. Is there a simpler method, maybe using ...

Having trouble finding the correct path to map over nested data in my console. I need an Image component for each product in the array. https://i.stack.imgur.com/3nSj1.png Attempting to map over the object shown in the image below. Here is the async functi ...

I'm completely stumped as to why this error is popping up when I try to use mutations with React Query. Any insights or advice would be greatly appreciated. Note: I'm implementing this within a function component in React, so it's puzzling why this error ...

In my NextJS app, I have a functionality where the Header is rendered along with either the Homepage, Contacts, or About page: Here is a simplified version of the _app.tsx file: export default function MyApp({ Component, pageProps }: Props) { return ( ...

Seeking assistance regarding updating data in the DataGrid component from the @mui/x-data-grid module within a React application. Specifically, I am facing challenges in refreshing the table after retrieving data from an API using react-query. Despite succ ...

Currently utilizing the useQuery function from react-query. I am interested in determining the duration between when the query was initiated and when it successfully completed. I have been unable to identify this information using the return type or para ...

I'm currently facing an issue with accessing the cache I set using queryClient.prefetchQuery on a SSR page. On the server-side rendering side, here is how I'm setting it up: ala: await queryClient.prefetchQuery(['userSesion'], () => ...

I have a scenario where I am fetching data from a database using useQuery. Here is how it looks: import { useQuery } from "@tanstack/react-query"; import axios from "axios"; const useGetExpenses = () => useQuery({ queryKey: [& ...

My server is sending JSON data that looks like this: {"id" : 1, "text_data": "example data"} I am attempting to convert this JSON data into a TypeScript object as shown below: export interface IncomingData { id: number; t ...

I am currently utilizing the pokeApi in combination with axios to retrieve data import axios from 'axios' export const fetchPokemonData = async ({ pageParam = "https://pokeapi.co/api/v2/pokemon?offset=0&limit=20" }) => { try { con ...

As I develop my NextJs application, I have set up a homepage as well as routes to products and about pages. My goal is to display a unique header image in the Nav section of each component, sourced from an API when a user switches between pages. How can ...

I have implemented React Query in the following manner: const { data, isSuccess, isLoading } = useQuery(['myQuery', myParams], async () => { return myAjaxCall(myParams); }, { cacheTime: 0 }); The results are then passed into a custom component: ...

I currently have 2 mutations that are functioning well. However, I encountered an issue when attempting to implement onSuccess and invalidateQueries. The error message displayed is as follows: Property 'mutateAsync' does not exist on type '{ onSuccess: () ...

export const usePostApi = () => useMutation(['key'], (data: FormData) => api.postFilesImages({ requestBody: data })); Query Definition const { mutateAsync } = usePostApi(); const {data} = await mutateAsync(formData, { onMutate: () => { ...

I received a warning in Next.js coming from webpack. The warning message appears but does not seem to be causing any errors. The warning reads as follows: [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Node.js doesn't offer a (nice) way to ...

I'm currently working on a small project where I need to verify if an email has already been registered before the user signs up, and if it is, display an error message. When a user is added successfully, everything works smoothly. However, if I try t ...

I need help with making a request based on a variable change using React Query. Currently, I am retrieving a value from a query parameter in the URL and want to re-execute the useQuery function when this value changes or exists. This is how my useQuery f ...

Issues are arising in the onSuccess and onError functions. After conducting some research, it appears that these functions have been deprecated in the latest version of React-Query. "use client" import { useRouter, useSearchParams } from 'n ...

Currently, I am utilizing the useQuery method from react-query and I have a requirement to dynamically pass the query parameter. However, I am encountering difficulties in correctly setting up the types. Definition of query function interface ProfileRespo ...

In our development process, we have opted for the combination of Next.js and react-query in all aspects. Our goal is to establish a global query system that can automatically refresh an access token and re-execute a query when it encounters failure due to ...

I am facing an issue with a react query problem. I have a separate file containing all the queries: const useFetchApTableQuery = (date: string): UseQueryResult => { const axiosClient = axios.create() const fetchApTableQuery = async (): Promise<A ...

My issue lies with TypeScript and types. Here is the API I am working with: export const clientAPI ={ //... getOptions: async (myParam: number) => get<{ options: Options[]; courses: any[] }>(`/courses?myParam=${myParam}`)().then((result) =& ...

I recently developed a form using a combination of technologies including react, react-query, material ui, formik, and yup for schema validation. Check out the code here Custom fields I created: SelectField AutocompleteField CacheAutocompleteFie ...

Struggling to fetch data using react-query in the Next JS getServerSideProps function, I encountered a perplexing error: Error: Error serializing `.dehydratedState.queries[0].state.data.config.adapter` returned from `getServerSideProps` in "/auth/goog ...

I am currently following a tutorial on using Pocketbase with NextJS, but the video I'm watching uses create-react-app. This means I have to make some adjustments as I go along. It has been an interesting experience, but I have hit a roadblock and my usual ...