I've been working on a React component to fetch data from the GitHub API using useEffect. Here is my current implementation: import { useEffect, useState } from "react"; const url = "https://api.github.com/users/emmeiwhite"; const MultipleReturnsFetchData = () => { /** In…
I'm trying to understand how to use the @tanstack/react-query integration for tRPC when I have conditional fetches that have required parameters. For example, say I have this backend: // Backend export const t = initTRPC.create(); export const appRouter = t.router({…
Ok, I am misunderstanding something seriously. Here is reproduce link Basically, when a button is clicked from Child component, it should be reflected on the parent component which is App. And I thought using react hook with state would be…
I have the following code. import Post from "../post/Post"; import "./posts.scss"; import {useQuery} from "@tanstack/react-query"; import {makeRequest} from "../../axios"; //omitted code here const {isLoading, error, data } = useQuery({ queryKey: ["posts"], queryFn: () => { makeRequest.get("/posts").then((res) => { return res.data;…
I'm trying to validate the input after the API request. It looks like value hasErrors is not updated within a validation function. Only after the rerender it gets the value. And - yes I tried many things like useCallback, setting…
Whenever delete is performed, supabase database is updated instantly but not in UI, If manually refreshed then updated list is shown to the UI... what to do please help!! I have added EntryTable, inside it I am rendering EntryRow, that…
Facing an infinite render when a query fails using react-query. useQuery should only re-fetch if queryKey changes, or on request failure according to retry parameter. Why is queryFn being re-executed? Reproducible example: https://stackblitz.com/edit/ilias-react-query-loop?file=src%2Fmain.tsx const queryClient = new QueryClient({ defaultOptions: {…
I'm encountering an issue where the useQuery hook in React Query doesn't update its query function when certain data changes. Here's my code: import { request } from "../utils/fetch-utils"; import { useQuery } from "@tanstack/react-query"; import { CustomError } from…
Currently, i implement custom hook for useMuatation hook for separation of concern and reusable. Typescript is complaining my createBook function ***Type '(bookData: Shop) => Promise' has no properties in common with type 'UseMutationOptions<Shop, Error, Shop, unknown>' ***. Here is overview…
I was building a movies web app using react and tmdb api. I have a page called Movies.jsx where all movies are fetched using react query and that works fine. I also have movieInfo.jsx page that responsible for showing details…