test(svelte-query): extract 'queryClient' creation from Svelte components to test files by sukvvon · Pull Request #10447 · TanStack/query

sukvvon · 2026-04-11T06:03:59Z

🎯 Changes

Extract queryClient creation from 14 Svelte test components to test files
- Components now receive queryClient via $props() and call setQueryClientContext(queryClient)
- Test files create queryClient in beforeEach and call queryClient.clear() in afterEach
Unify queryClient lifecycle management across all svelte-query test files (QueryClientProvider, createInfiniteQuery, createMutation, createQuery, createQueries, useIsFetching, useIsMutating, useMutationState, mutationOptions, HydrationBoundary)
Rename let queryClient to let activeClient in createMutation withEffectRoot test to avoid shadowing

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Tests
- Improved test component architecture by externalizing QueryClient lifecycle management, enabling better test isolation and reusability across test suites.

…ents to test files

coderabbitai · 2026-04-11T06:04:13Z

📝 Walkthrough

Walkthrough

Systematic refactoring of svelte-query test files and components to enable dependency injection of QueryClient instances. Test components now accept queryClient as a prop (with QueryClient as a type-only import) instead of instantiating it internally. Corresponding test suites create a shared QueryClient per test in beforeEach, pass it to components via props, and clean it up in afterEach.

Changes

Cohort / File(s)	Summary
HydrationBoundary `packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte`, `packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts`	Component now receives `queryClient` as a prop (type-only import); test creates shared client per test lifecycle and passes it to component. Dehydration logic uses separate `dehydrateClient` instance.
QueryClientProvider `packages/svelte-query/tests/QueryClientProvider/QueryClientProvider.svelte.test.ts`	Test introduces shared `queryClient` per suite, passed to rendered component props; cleanup added via `queryClient.clear()` in `afterEach`.
createInfiniteQuery `packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte`, `packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte`, `packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.svelte.test.ts`	Both example components refactored to accept `queryClient` prop (type-only import) instead of internal instantiation; test suite creates shared client and passes it to both examples.
createMutation `packages/svelte-query/tests/createMutation/FailureExample.svelte`, `packages/svelte-query/tests/createMutation/OnSuccessExample.svelte`, `packages/svelte-query/tests/createMutation/ResetExample.svelte`, `packages/svelte-query/tests/createMutation/createMutation.svelte.test.ts`	Three example components updated to receive `queryClient` prop (type-only import); test creates per-test client and passes to all examples. "Observer recreation" test refactored to use mutable `activeClient` variable instead of reassigning `queryClient`.
createQueries `packages/svelte-query/tests/createQueries/IsRestoringExample.svelte`, `packages/svelte-query/tests/createQueries/createQueries.svelte.test.ts`	Example component refactored to accept `queryClient` prop (type-only import); test updated to pass `queryClient` in render props alongside existing `queryFn` props.
createQuery `packages/svelte-query/tests/createQuery/IsRestoringExample.svelte`, `packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts`	Example component accepts `queryClient` as prop (type-only import); test passes client to component during rendering.
mutationOptions `packages/svelte-query/tests/mutationOptions/BaseExample.svelte`, `packages/svelte-query/tests/mutationOptions/MultiExample.svelte`, `packages/svelte-query/tests/mutationOptions/mutationOptions.svelte.test.ts`	Both example components refactored to accept `queryClient` prop (type-only import); test creates per-test client, clears in `afterEach`, and passes to all component render calls.
useIsFetching `packages/svelte-query/tests/useIsFetching/BaseExample.svelte`, `packages/svelte-query/tests/useIsFetching/useIsFetching.svelte.test.ts`	Component accepts `queryClient` prop (type-only import); test instantiates per-test client and passes via props with cleanup in `afterEach`.
useIsMutating `packages/svelte-query/tests/useIsMutating/BaseExample.svelte`, `packages/svelte-query/tests/useIsMutating/useIsMutating.svelte.test.ts`	Component accepts `queryClient` prop (type-only import); test creates per-test client and injects via props with cleanup.
useMutationState `packages/svelte-query/tests/useMutationState/BaseExample.svelte`, `packages/svelte-query/tests/useMutationState/SelectExample.svelte`, `packages/svelte-query/tests/useMutationState/useMutationState.svelte.test.ts`	Both example components updated to accept `queryClient` prop (type-only import); test creates shared client per test lifecycle and passes to all rendered examples.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

test({react,preact,solid}-query): move 'queryClient' and 'queryCache' to 'beforeEach' for per-test isolation #10356: Implements the same per-test QueryClient refactoring pattern (suite-scoped declaration, beforeEach initialization, afterEach cleanup) across test suites in different packages.
test(svelte-query): unify queryClient passing to 'setQueryClientContext' and rename test components #10446: Modifies how test components wire QueryClient into svelte-query via setQueryClientContext, affecting the same test component files and provider integration.

Poem

🐰 Props now dance where once they grew,
QueryClients passed on through and through!
No more constructors in the test,
Dependency injection does its best! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and specifically describes the main change: extracting queryClient creation from Svelte components to test files, which aligns with all file modifications shown in the summary.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description provides comprehensive coverage of all changes, including extraction of queryClient creation, test file modifications, and variable renaming. All required checklist items are addressed.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch test/svelte-query-extract-queryClient-to-test-files

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-04-11T06:04:37Z

View your CI Pipeline Execution ↗ for commit 0c9d97f

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	56s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	<1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-04-11 06:08:38 UTC

github-actions · 2026-04-11T06:04:51Z

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

…ryClient1'/'queryClient2' for clarity

pkg-pr-new · 2026-04-11T06:07:59Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10447

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10447

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10447

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10447

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10447

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10447

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10447

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10447

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10447

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10447

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10447

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10447

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10447

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10447

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10447

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10447

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10447

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10447

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10447

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10447

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10447

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10447

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10447

commit: 0c9d97f

github-actions · 2026-04-11T06:08:07Z

size-limit report 📦

Path	Size
react full	11.99 KB (0%)
react minimal	9.02 KB (0%)

test(svelte-query): extract 'queryClient' creation from Svelte compon…

6240b8f

…ents to test files

github-actions bot added the package: svelte-query label Apr 11, 2026

sukvvon self-assigned this Apr 11, 2026

autofix-ci bot and others added 2 commits April 11, 2026 06:05

ci: apply automated fixes

79f3356

test(svelte-query/createMutation): rename 'client1'/'client2' to 'que…

0c9d97f

…ryClient1'/'queryClient2' for clarity

sukvvon merged commit 1881109 into main Apr 11, 2026
8 checks passed

sukvvon deleted the test/svelte-query-extract-queryClient-to-test-files branch April 11, 2026 06:16

coderabbitai bot mentioned this pull request Apr 11, 2026

test(svelte-query): replace inline props types with 'type Props', remove 'any', and add explicit generics #10448

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(svelte-query): extract 'queryClient' creation from Svelte components to test files#10447

test(svelte-query): extract 'queryClient' creation from Svelte components to test files#10447
sukvvon merged 3 commits intomainfrom
test/svelte-query-extract-queryClient-to-test-files

sukvvon commented Apr 11, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Apr 11, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

nx-cloud bot commented Apr 11, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 11, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Apr 11, 2026

Uh oh!

github-actions bot commented Apr 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented Apr 11, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

nx-cloud bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new bot commented Apr 11, 2026

Uh oh!

github-actions bot commented Apr 11, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented Apr 11, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 11, 2026 •

edited

Loading

nx-cloud bot commented Apr 11, 2026 •

edited

Loading

github-actions bot commented Apr 11, 2026 •

edited

Loading