Custom useQuery and refetch
In this lesson, we'll introduce the capability for a component to manually refetch a query from the useQuery Hook.
useQuery Hook made our
<Listings> component simpler and provided the opportunity to have the shared piece of functionality of querying and updating state with other components as well.
In this lesson, we'll address how we'd like a query refetch be made when the
deleteListing mutation is fired. We'll have our
useQuery Hook prepared to allow for a component to trigger a refetch.
There might be a few ways we can think about solving this but a simple way we'd like to go with is we can perhaps destruct the
fetchApi() function from our
useQuery Hook and have it labeled as
refetch(). If we ever intend to refetch the query stated in the Hook, we can simply run this function directly in our component.
fetchApi() function in our
useQuery Hook is the function we'll want to run again if we needed to refetch query information and update state. In the
useQuery.ts file, we'll restructure how our Hook is set up to have the
fetchApi() function be returned from the Hook. To do so, we'll need to declare the
fetchApi() function outside of the effect callback.
return statement of our
refetch that has the value of the
ESLint will display a warning in the
useEffect dependencies list stating that the
useEffect Hook is missing the dependency -
If we attempt to place
fetchApi has a dependency to the
useEffect Hook, we'll get another ESLint warning telling us the
fetchApi dependency will make the dependencies of
useEffect run on every render which is not what we want.