Category : react-query

In React-Query we can use the useQueries hook to perform parallel queries (mostly like using Promise.all): https://react-query.tanstack.com/guides/parallel-queries Every Query has a set of options that we can use, on of them is the onSuccess and can be used as below: const data = useQueries([{ queryKey: 1, queryFn: () => axios.get(…), onSuccess: data => … do ..

Read more

I am writing a search component which uses react query to fetch the data. export default function useSearchResults({ query, }: IUseGetSearchResultsProps): QueryObserverResult<IResponse<ISearchResult>> { return useQuery( [SEARCH_RESULT_QUERY_KEY, { query }], (): Promise<IResponse<ISearchResult>> => getSearchResults({ query }), { enabled: false, keepPreviousData: true, } ); } Which I then import in my component, and refetch the data when ..

Read more

Ill trying to explain this situation. Currently my tests fails for next reason: First situation: TypeError: react_query_1.useQueryClient is not a function Second situation: Type error react_query_1.QueryClient is not a constructor The scenario is: I have react-query configured in a next-js project and I am running different types of tests. in _app.js I have: <QueryClientProvider client={queryClient}> ..

Read more

I’m trying to create a query that takes the initial fields (kind, property, and property value). This part is straight forward. However for every additional query option/rule I want to disable the "kind" option and only leave the "property" and "property value" because the database only accepts one "kind" but multiple "properties" and "property values". ..

Read more

I’m using react-router as routing library and react-query to fetch data and cache these objects with some id. I have an hierarchical url pattern like /users (UserList), /users/<userId> (UserDetails), /users/<userId>/settings (UserSettings) and so on. The UserDetails react component gets the userId from the URL via useParams and fetches the user object. It has a list ..

Read more

I was wondering how to refetch a query from another sibling component with react-query. Lets say I have Component A import {useQuery} from "react-query"; function ComponentA(){ const getData = async () => data //returns api data const {data, refetch} = useQuery(["queryA"], async () => await getData()) return( <div> {data} </div> )} And in Component B ..

Read more