Use useLazyQuery to manually execute a query with Apollo React Hooks
When using useQuery from Apollo React Hooks, the request will be sent automatically after the component has been mounted. This might not be the desired behaviour as we might want to send the request in response to user action (for instance, after a button click).
In this lesson we're going to learn how to use useLazyQuery hook to execute a query manually in order to fetch dog pictures.
Instructor: [0:00] We have an app which is using useQuery from Apollo React hooks in order to fetch pictures of dogs. Right now, useQuery sends a request every single time this app component is being mounted. Instead, we'd like to be able to manually send a request whenever we want.
[0:12] Instead of importing useQuery, we're going to import useLazyQuery from Apollo React hooks. Instead of returning an object, useLazyQuery returns an array. The first element if this array is a function, which we can use to fetch the data.
[0:23] I'm going to call this function getDog. Next, we're going to create a button called getDog, and we're going to set an onClick handler. Whenever this button is being clicked, we're going to call this getDog function. If I click on this button, only then we're going to send the request for this picture of a dog.
[0:38] We can call this getDog function with whatever variables we want. If I were to go ahead and remove this bit from here and use it as an argument to getDog function like this, I can go ahead and set the breed to husky. We're going to get a picture of a husky after I click the button getDog.
[0:56] Let's make it more dynamic because right now we are hard-coding this value of a breed. We're going to use the useState from React. I'm going to do const breed and setBreed, and we're going to use state. The default value is going to be dingo.
[1:09] Next, let me get this input over here. It's input of type text. Whenever this value's going to be changed, we're going to set the breed to whatever we have input into the input. We're going to remove this hard-coded value from here because we're going to use the breed from the useState.
[1:23] Let's see if it works. The default value is dingo. If I click on the getDog, I'm going to get a picture of a dingo. If I put in husky, I'm going to get a picture of a husky. If I put in bulldog, I'm going to get a cute picture of a bulldog.
[1:37] To recap, in order to dynamically send a query using Apollo React hooks whenever we want, instead of using useQuery, we should use useLazyQuery. This allows us to send our requests whenever based on user behavior and whatnot.
Is there anyway to reset the
useLazyQueryquery and data? I have a search box that usesuseLazyQuery. When I select a result, I want thedataandcalledvariables exposed inuseLazyQueryto reset, but still have the exposed function (doQueryorgetDogin this case) available in the component to use again if the user searches for a new term.