---
title: "Dependent client-side fetches (data/client-fetch-waterfall)"
description: "A SWR/React Query hook whose key or `enabled` waits for another hook's data starts only after the first request finishes, and both start only after hydration: two serial round trips before the content shows."
url: http://localhost:4173/rules/data/client-fetch-waterfall
updated: 2026-11-11
---

# Dependent client-side fetches

> `data/client-fetch-waterfall` is a vetd rule. It flags: Dependent client-side fetches. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `data/client-fetch-waterfall` |
| Severity | warning |
| Group | Data fetching |
| Tags | performance, react |

## Why it matters

A SWR/React Query hook whose key or `enabled` waits for another hook's data starts only after the first request finishes, and both start only after hydration: two serial round trips before the content shows.

## How to fix it

Fetch on the server and pass the data down, or serve both from one endpoint.

## Credit

Based on work by:

- [Vercel](https://vercel.com): SWR documents conditional and dependent fetching, where a request waits for the previous one's data.
- [TanStack](https://tanstack.com): TanStack Query documents dependent queries that run serially.

## References

- [Conditional Fetching](https://swr.vercel.app/docs/conditional-fetching), SWR
- [Dependent Queries](https://tanstack.com/query/latest/docs/framework/react/guides/dependent-queries), TanStack Query
- [Fetching Data](https://nextjs.org/docs/app/getting-started/fetching-data), Next.js

## See it

Demos in the vetd Lab:

- [Fetch in Server Components](http://localhost:4173/lab/nextjs/fetch-in-server-components)
- [Start early, await late](http://localhost:4173/lab/react-perf/eliminate-async-waterfalls)

## Related rules

- [`next/fetch-in-effect`](http://localhost:4173/rules/next/fetch-in-effect.md)
- [`next/sequential-await`](http://localhost:4173/rules/next/sequential-await.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "data/client-fetch-waterfall" }`. CLI: `npx vetd explain data/client-fetch-waterfall`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`data/self-fetch`](http://localhost:4173/rules/data/self-fetch.md) · Next: [`data/no-loading-boundary`](http://localhost:4173/rules/data/no-loading-boundary.md)