https://github.com/bamlab/tanstack-query-detect-waterfall
Detect waterfall on a tanstack query project
https://github.com/bamlab/tanstack-query-detect-waterfall
Last synced: 11 months ago
JSON representation
Detect waterfall on a tanstack query project
- Host: GitHub
- URL: https://github.com/bamlab/tanstack-query-detect-waterfall
- Owner: bamlab
- License: mit
- Created: 2024-05-14T15:36:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-17T14:55:54.000Z (about 2 years ago)
- Last Synced: 2025-06-26T03:05:11.772Z (about 1 year ago)
- Language: TypeScript
- Size: 1020 KB
- Stars: 8
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tanstack-query-detect-waterfall
Auto-detect query waterfalls in your Tanstack Query project.
If multiple queries are run in sequence instead of parallel, the plugin will warn you and suggest solutions to fix the issue. No need to open a network profiler, and it works for any async operation. This can prove especially useful with React Suspense to catch waterfall introductions immediately.
# Example
```ts
const queryClient = new QueryClient();
if (__DEV__) {
const { detectQueryWaterfalls } = require("@bam.tech/tanstack-query-detect-waterfall");
detectQueryWaterfalls(queryClient);
}
```
If you need to ignore dependent queries, you can do:
```ts
detectQueryWaterfalls(queryClient, {
whitelist: [
{ from: ["myquerykey", 1], to: ["otherquerykey", 2] },
{ from: ["yetanotherquerykey"], to: ["andalastone"] },
],
});
```
# Installation
```bash
npm install @bam.tech/tanstack-query-detect-waterfall --save-dev
# or
pnpm add @bam.tech/tanstack-query-detect-waterfall --dev
# or
yarn add @bam.tech/tanstack-query-detect-waterfall --dev
# or
bun add @bam.tech/tanstack-query-detect-waterfall --dev
```