test(svelte-query): add infinite query setQueryData test #9714

lachlancollins · 2025-09-30T04:00:04Z

🎯 Changes

Migrates equivalent test from react-query:

query/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

Lines 1171 to 1226 in 571bc18

    
           it('should be able to set new pages with the query client', async () => { 
        
             const key = queryKey() 
        
             let multiplier = 1 
        
             function Page() { 
        
               const [firstPage, setFirstPage] = React.useState(0) 
        
               const state = useInfiniteQuery({ 
        
                 queryKey: key, 
        
                 queryFn: ({ pageParam }) => 
        
                   sleep(10).then(() => multiplier * pageParam), 
        
                 getNextPageParam: (lastPage) => lastPage + 1, 
        
                 initialPageParam: firstPage, 
        
               }) 
        
               return ( 
        
                 <div> 
        
                   <button 
        
                     onClick={() => { 
        
                       queryClient.setQueryData(key, { 
        
                         pages: [7, 8], 
        
                         pageParams: [7, 8], 
        
                       }) 
        
                       setFirstPage(7) 
        
                     }} 
        
                   > 
        
                     setPages 
        
                   </button> 
        
                   <button onClick={() => state.refetch()}>refetch</button> 
        
                   <div>data: {JSON.stringify(state.data)}</div> 
        
                 </div> 
        
               ) 
        
             } 
        
             const rendered = renderWithClient(queryClient, <Page />) 
        
             await vi.advanceTimersByTimeAsync(11) 
        
             expect( 
        
               rendered.getByText('data: {"pages":[0],"pageParams":[0]}'), 
        
             ).toBeInTheDocument() 
        
             fireEvent.click(rendered.getByRole('button', { name: /setPages/i })) 
        
             await vi.advanceTimersByTimeAsync(11) 
        
             expect( 
        
               rendered.getByText('data: {"pages":[7,8],"pageParams":[7,8]}'), 
        
             ).toBeInTheDocument() 
        
             multiplier = 2 
        
             fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) 
        
             await vi.advanceTimersByTimeAsync(21) 
        
             expect( 
        
               rendered.getByText('data: {"pages":[14,30],"pageParams":[7,15]}'), 
        
             ).toBeInTheDocument() 
        
           })

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm 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
- Added a Svelte test component to exercise infinite query pagination updates via the client and render current data.
- Introduced an integration test validating manual page updates through user interaction and timer control.
- Standardized test naming/style and improved coverage around initial page parameters and subsequent updates.
- No user-facing or public API changes.

changeset-bot · 2025-09-30T04:00:09Z

⚠️ No Changeset found

Latest commit: 4597c75

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2025-09-30T04:00:12Z

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a new Svelte test component that creates an infinite query and exposes a button which updates the query's pages via QueryClient.setQueryData; extends the test suite to render the component, simulate the update, and assert the page data changes. (≈33 words)

Changes

Cohort / File(s)	Summary
New Svelte test component `packages/svelte-query/tests/createInfiniteQuery/ChangeClient.svelte`	Adds a Svelte test component that uses `createInfiniteQuery` with `initialPageParam`, renders query data as JSON, and includes a "setPages" button that calls `QueryClient.setQueryData` to set pages and pageParams to `[7,8]`.
Test updates and additions `packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts`	Replaces `test(...)` with `it(...)` in several cases; imports `QueryClient`, `render`, `fireEvent`, and the new `ChangeClient` component; adds a test that renders `ChangeClient`, advances timers, clicks "setPages", and asserts the query data updates.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor Tester as Test Runner
  participant Svelte as ChangeClient.svelte
  participant Query as createInfiniteQuery
  participant Client as QueryClient
  participant Server as queryFn

  Tester->>Svelte: render(ChangeClient, { queryClient })
  Svelte->>Query: init with { queryKey, queryFn, getNextPageParam, initialPageParam }
  Query->>Server: fetch(firstPage) 
  Server-->>Query: resolve(firstPage)
  Query-->>Svelte: data = { pages: [firstPage], pageParams: [firstPage] }
  Svelte-->>Tester: render JSON of data

  Tester->>Svelte: click "setPages"
  Svelte->>Client: setQueryData(queryKey, { pages: [7,8], pageParams: [7,8] })
  Client-->>Query: notify subscribers
  Query-->>Svelte: updated data
  Svelte-->>Tester: render updated JSON

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

TkDodo

Poem

I nibbled through pages, one then eight,
A gentle click rewrote my state.
Carrot crumbs of JSON glow,
The burrowed query hops to show.
(\/) (^^) 🥕

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch add-infinite-query-test

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 593eacb and 4597c75.

📒 Files selected for processing (2)

packages/svelte-query/tests/createInfiniteQuery/ChangeClient.svelte (1 hunks)
packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts (4 hunks)

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

nx-cloud · 2025-09-30T04:00:41Z

View your CI Pipeline Execution ↗ for commit 4597c75

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

☁️ Nx Cloud last updated this comment at 2025-09-30 04:04:37 UTC

pkg-pr-new · 2025-09-30T04:04:17Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 4597c75

github-actions · 2025-09-30T04:04:18Z

Sizes for commit 4597c75:

Branch	Bundle Size
Main
This PR

codecov · 2025-09-30T04:04:51Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.20%. Comparing base (593eacb) to head (4597c75).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #9714       +/-   ##
===========================================
+ Coverage   46.41%   89.20%   +42.78%     
===========================================
  Files         214       18      -196     
  Lines        8499      176     -8323     
  Branches     1922       31     -1891     
===========================================
- Hits         3945      157     -3788     
+ Misses       4111       18     -4093     
+ Partials      443        1      -442

Components	Coverage Δ
@tanstack/angular-query-experimental	`∅ <ø> (∅)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`∅ <ø> (∅)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`∅ <ø> (∅)`
@tanstack/query-devtools	`∅ <ø> (∅)`
@tanstack/query-persist-client-core	`∅ <ø> (∅)`
@tanstack/query-sync-storage-persister	`∅ <ø> (∅)`
@tanstack/query-test-utils	`∅ <ø> (∅)`
@tanstack/react-query	`∅ <ø> (∅)`
@tanstack/react-query-devtools	`∅ <ø> (∅)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`∅ <ø> (∅)`
@tanstack/solid-query	`∅ <ø> (∅)`
@tanstack/solid-query-devtools	`∅ <ø> (∅)`
@tanstack/solid-query-persist-client	`∅ <ø> (∅)`
@tanstack/svelte-query	`87.58% <ø> (ø)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`100.00% <ø> (ø)`
@tanstack/vue-query	`∅ <ø> (∅)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

test(svelte-query): add infiniteQuery setQueryData test

05579f8

github-actions bot added the package: svelte-query label Sep 30, 2025

lachlancollins and others added 2 commits September 30, 2025 14:01

Remove state tracking

c6cd29e

ci: apply automated fixes

4597c75

lachlancollins merged commit 0f5f643 into main Sep 30, 2025
8 checks passed

lachlancollins deleted the add-infinite-query-test branch September 30, 2025 04:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

test(svelte-query): add infinite query setQueryData test #9714

test(svelte-query): add infinite query setQueryData test #9714

Uh oh!

lachlancollins commented Sep 30, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Sep 30, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Sep 30, 2025 •

edited

Loading

Review failed

Uh oh!

nx-cloud bot commented Sep 30, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Sep 30, 2025

Uh oh!

github-actions bot commented Sep 30, 2025

Uh oh!

codecov bot commented Sep 30, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

	it('should be able to set new pages with the query client', async () => {
	const key = queryKey()

	let multiplier = 1

	function Page() {
	const [firstPage, setFirstPage] = React.useState(0)

	const state = useInfiniteQuery({
	queryKey: key,
	queryFn: ({ pageParam }) =>
	sleep(10).then(() => multiplier * pageParam),
	getNextPageParam: (lastPage) => lastPage + 1,
	initialPageParam: firstPage,
	})

	return (
	<div>
	<button
	onClick={() => {
	queryClient.setQueryData(key, {
	pages: [7, 8],
	pageParams: [7, 8],
	})
	setFirstPage(7)
	}}
	>
	setPages
	</button>
	<button onClick={() => state.refetch()}>refetch</button>
	<div>data: {JSON.stringify(state.data)}</div>
	</div>
	)
	}

	const rendered = renderWithClient(queryClient, <Page />)

	await vi.advanceTimersByTimeAsync(11)
	expect(
	rendered.getByText('data: {"pages":[0],"pageParams":[0]}'),
	).toBeInTheDocument()

	fireEvent.click(rendered.getByRole('button', { name: /setPages/i }))
	await vi.advanceTimersByTimeAsync(11)
	expect(
	rendered.getByText('data: {"pages":[7,8],"pageParams":[7,8]}'),
	).toBeInTheDocument()

	multiplier = 2

	fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
	await vi.advanceTimersByTimeAsync(21)
	expect(
	rendered.getByText('data: {"pages":[14,30],"pageParams":[7,15]}'),
	).toBeInTheDocument()
	})

Uh oh!

test(svelte-query): add infinite query setQueryData test #9714

test(svelte-query): add infinite query setQueryData test #9714

Uh oh!

Conversation

lachlancollins commented Sep 30, 2025 • 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!

changeset-bot bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

nx-cloud bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Sep 30, 2025

Uh oh!

github-actions bot commented Sep 30, 2025

Uh oh!

codecov bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

lachlancollins commented Sep 30, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Sep 30, 2025 •

edited

Loading

coderabbitai bot commented Sep 30, 2025 •

edited

Loading

nx-cloud bot commented Sep 30, 2025 •

edited

Loading

codecov bot commented Sep 30, 2025 •

edited

Loading