Dependent queries in React Query
Tags: react, beginners
Published: 2022-02-12 06:50:12


In some cases, you might need only to fire a query once a specific condition is met.

Some examples of this:

- Wait for user input
- Wait for the main query to return the user ID
- We are still retrieving an ID from the storage
- Wait for a search query

And so on.

I'll show you how you can make this happen in React Query by using user input in this example.

You can see the result in the video below. We only start using the query once we have valid input.
As long as it doesn't exist, we put the query into idle mode.

![Dependent queries in React Query](https://cdn.hashnode.com/res/hashnode/image/upload/v1643866043645/0xTgpKRQS.gif)

## React Query dependent queries

We can leverage the `enabled` property to make queries dependent on a variable.
This will tell React Query if this query should be enabled or not, and it can accept anything that calculates to a boolean.

You can use it like this:

```js
const {isIdle, data} = useQuery('your-key', yourQueryFn, {
  enabled: conditionIsTrue,
});
```

Let's try it out and create a user input. Only once this user input is more than zero should it be querying anything.

This code will be based on the [React Query Pokemon app](https://daily-dev-tips.com/posts/a-first-look-at-react-query/) we built before.

The input will be placed in the `App` component.

```js
function App() {
  const [number, setNumber] = useState(0);

  return (
    <QueryClientProvider client={queryClient}>
      <input
        type="number"
        value={number}
        max="10220"
        onChange={(e) => setNumber(e.target.value)}
      />
      <button onClick={() => setNumber(0)}>reset</button>
      <PokemonList number={number} />
    </QueryClientProvider>
  );
}
```

We keep track of a state number, and we update the state on change.
This state gets passed to our `PokemonList` component.

Let's look at how the `PokemonList` component can receive this number and how we can make our query dependent on it.

```js
function PokemonList({number}) {
  const {isIdle, data, isLoading} = useQuery(
    ['pokemon', number],
    () => fetchPokemon({number}),
    {
      enabled: number > 0,
    }
  );

  return <></>;
}
```

We receive the number and assign it to a specific unique key, as you can see above.
Then we invoke the `fetchPokemon` function and pass along the number to this function.
The dependency comes in at the `enabled` property where we tell react query only to enable this once it's bigger than zero.

Let's take a look at how our `fetchPokemon` function looks like now:

```js
const fetchPokemon = async ({number}) => {
  const request = await fetch(`https://pokeapi.co/api/v2/pokemon/${number}`);
  return await request.json();
};
```

And then all that's left is to fix the actual return in the component.
We'll add some data for this Pokemon and keep track of our `isIdle` and `isLoading` states, so the user knows what's going on.

```js
function PokemonList({number}) {
  const {isIdle, data, isLoading} = useQuery(
    ['pokemon', number],
    () => fetchPokemon({number}),
    {
      enabled: number > 0,
    }
  );

  return (
    <div className="App">
      {isIdle ? (
        <p>Is idle...</p>
      ) : isLoading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          <li>
            <strong>Name</strong>: {data.name}
          </li>
          <li>
            <strong>Weight</strong>: {data.weight}
          </li>
          <li>
            <strong>Image</strong>:
          </li>
          <li>
            <img
              src={data.sprites?.front_shiny ?? data.sprites?.front_default}
              alt={data.name}
            />
          </li>
        </ul>
      )}
    </div>
  );
}
```

And that's it!
We made our first dependent react query function.

You can try it out in this Code Sandbox:

{% codesandbox pedantic-lalande-s7y35 %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)