Tanstack-query-v5

[hotzenklotz]

Update TanStack Query / react-query from version v4 to v5.

I followed the official migration guide: https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5

TODOs:

• Blocked by Rework: Dataset Settings #8732: <DatasetSettingView> imports defaultContext which is not available anymore. Should be fixed by converting to to a functional component in PR Rework: Dataset Settings #8732

Issues:

• fixes Nada

---

(Please delete unneeded items, merge only when none are left open)

• Added changelog entry (create a $PR_NUMBER.md file in unreleased_changes or use ./tools/create-changelog-entry.py)
• Added migration guide entry if applicable (edit the same file as for the changelog)
• Updated documentation if applicable
• Adapted wk-libs python client if relevant API parts change
• Removed dev-only changes like prints and application.conf edits
• Considered common edge cases
• Needs datastore update after deployment

[coderabbitai]

📝 Walkthrough

Walkthrough

This update refactors the codebase to adopt the new object-based API for React Query hooks, updates related state naming conventions, and migrates from synchronous to asynchronous query cache persistence. It also upgrades TanStack React Query and related dependencies to version 5.x, ensuring consistent usage of the latest API patterns throughout the frontend code.

Changes

Files/Paths	Change Summary
frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx	Renamed isLoading to isPending in context types, provider, and all references.
frontend/javascripts/dashboard/dataset/queries.tsx frontend/javascripts/dashboard/folders/details_sidebar.tsx frontend/javascripts/viewer/view/action-bar/private_links_view.tsx frontend/javascripts/viewer/view/version_list.tsx	Refactored all React Query hooks (useQuery, useMutation, etc.) to use the object-based API; updated related usages and state names where relevant.
frontend/javascripts/main.tsx	Switched from sync to async query cache persister; replaced QueryClientProvider with PersistQueryClientProvider; updated cache persistence logic.
package.json	Upgraded @tanstack/react-query and related packages from v4.x to v5.x; switched to async storage persister package.

Suggested labels

backend, testing

Poem

A hop, a skip, a version leap,
React Query's new forms we now keep.
From loading to pending, the states align,
Async cache persisters—oh, how divine!
With object keys and bouncy feet,
This codebase now is extra neat.
🐇✨

---

📜 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 49d285d and fe6df03.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (7)

• frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx (4 hunks)
• frontend/javascripts/dashboard/dataset/queries.tsx (11 hunks)
• frontend/javascripts/dashboard/folders/details_sidebar.tsx (1 hunks)
• frontend/javascripts/main.tsx (4 hunks)
• frontend/javascripts/viewer/view/action-bar/private_links_view.tsx (6 hunks)
• frontend/javascripts/viewer/view/version_list.tsx (2 hunks)
• package.json (1 hunks)

🧰 Additional context used

🧠 Learnings (3)

frontend/javascripts/dashboard/folders/details_sidebar.tsx (1)

Learnt from: dieknolle3333
PR: scalableminds/webknossos#8168
File: frontend/javascripts/oxalis/model/sagas/proofread_saga.ts:1039-1039
Timestamp: 2024-11-22T17:18:04.217Z
Learning: In `frontend/javascripts/oxalis/model/sagas/proofread_saga.ts`, when calling `getMagInfo`, the use of `volumeTracingLayer.resolutions` is intentional and should not be changed to `volumeTracingLayer.mags`.

frontend/javascripts/viewer/view/version_list.tsx (1)

Learnt from: dieknolle3333
PR: scalableminds/webknossos#8168
File: frontend/javascripts/oxalis/model/sagas/proofread_saga.ts:1039-1039
Timestamp: 2024-11-22T17:18:04.217Z
Learning: In `frontend/javascripts/oxalis/model/sagas/proofread_saga.ts`, when calling `getMagInfo`, the use of `volumeTracingLayer.resolutions` is intentional and should not be changed to `volumeTracingLayer.mags`.

frontend/javascripts/main.tsx (1)

Learnt from: philippotto
PR: scalableminds/webknossos#8542
File: frontend/javascripts/viewer/model/sagas/volumetracing_saga.tsx:0-0
Timestamp: 2025-05-30T12:36:09.930Z
Learning: The WebKnossos frontend follows Redux immutability principles where reducers act immutably and create new state objects when changes occur. This makes reference equality checks (like `prevVolumeTracing.segments !== volumeTracing.segments`) reliable and efficient for detecting actual state changes, allowing memoization to work correctly.

🧬 Code Graph Analysis (2)

frontend/javascripts/dashboard/folders/details_sidebar.tsx (1)

frontend/javascripts/admin/rest_api.ts (1)

• getOrganization (1716-1724)

frontend/javascripts/viewer/view/action-bar/private_links_view.tsx (1)

frontend/javascripts/admin/rest_api.ts (4)

• getPrivateLinksByAnnotation (434-436)
• createPrivateLink (422-432)
• updatePrivateLink (438-443)
• deletePrivateLink (445-451)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: build-smoketest-push
• GitHub Check: backend-tests

🔇 Additional comments (26)

package.json (1)

131-133: LGTM! Dependency updates are correctly aligned with TanStack Query v5 migration.

The package updates properly migrate from v4 to v5, including the important change from sync to async storage persister which is required for the v5 architecture.

frontend/javascripts/dashboard/folders/details_sidebar.tsx (1)

96-100: LGTM! Proper migration to TanStack Query v5 object-based API.

The useQuery hook has been correctly refactored from positional arguments to the new object-based configuration style, maintaining the same functionality while adopting the v5 API standards.

frontend/javascripts/viewer/view/version_list.tsx (2)

257-259: LGTM! Correct migration of queryClient.removeQueries to v5 API.

The method call has been properly updated to use the object-based API style required by TanStack Query v5.

---

274-282: LGTM! Proper migration of useInfiniteQuery to v5 API.

The hook has been correctly refactored to use the object-based configuration style, and the required initialPageParam: 0 has been properly added for v5 compatibility.

frontend/javascripts/main.tsx (4)

8-10: LGTM! Correct imports for TanStack Query v5 async persistence.

The imports have been properly updated to use the async storage persister and the new PersistQueryClientProvider, which are required for v5 compatibility.

---

44-44: LGTM! Correct renaming of cacheTime to gcTime.

The option has been properly renamed to match the v5 API where cacheTime was renamed to gcTime (garbage collection time).

---

49-54: LGTM! Proper migration to async storage persister.

The createAsyncStoragePersister is correctly configured with the same storage, serialization, and key options as the previous sync persister, ensuring continuity while adopting the v5 async architecture.

---

123-126: LGTM! Correct implementation of PersistQueryClientProvider.

The component has been properly updated to use PersistQueryClientProvider with the persistOptions prop, which is the correct way to handle query persistence in v5.

Also applies to: 137-137

frontend/javascripts/viewer/view/action-bar/private_links_view.tsx (4)

48-52: LGTM! Proper migration of useQuery to v5 object-based API.

The hook has been correctly refactored to use the new object-based configuration style with explicit queryKey and queryFn properties.

---

59-70: LGTM! Comprehensive migration of useMutation hooks to v5 API.

All mutation hooks have been properly updated to use the object-based configuration style with mutationFn property, and the cancelQueries calls have been correctly migrated to the new API format.

Also applies to: 77-104, 112-139

---

329-329: LGTM! Correct renaming of isLoading to isPending.

The loading state property has been properly renamed to isPending to match the v5 API naming conventions, and its usage has been consistently updated throughout the component.

Also applies to: 376-376

---

423-428: LGTM! Proper migration of useIsFetching and useIsMutating to v5 API.

Both hooks have been correctly updated to use the object-based configuration style with explicit queryKey and mutationKey properties respectively.

frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx (4)

28-28: LGTM! Correct API migration for React Query v5.

The property rename from isLoading to isPending aligns with React Query v5's API changes.

---

192-197: LGTM! Consistent variable renaming and property access.

The variable rename from isLoading to isPending and the corresponding property access (folderHierarchyQuery.isPending) correctly follow React Query v5's API changes. The logic for determining pending state remains unchanged.

---

206-206: LGTM! Context value updated correctly.

The context value property is correctly updated to use isPending instead of isLoading.

---

261-261: LGTM! Dependency array updated correctly.

The dependency array is correctly updated to include isPending instead of isLoading.

frontend/javascripts/dashboard/dataset/queries.tsx (10)

32-49: LGTM! Correct migration to object-based API.

The conversion from positional arguments to object-based configuration for useQuery is correctly implemented. All properties (queryKey, queryFn, enabled, retryDelay, etc.) are properly configured.

---

54-60: LGTM! Consistent API migration.

The useQuery hook is correctly converted to object-based configuration with proper queryKey and queryFn properties.

---

69-79: LGTM! Proper query configuration.

The search query hook is correctly migrated with all necessary properties (queryKey, queryFn, enabled, refetchOnWindowFocus).

---

88-93: LGTM! Folder hierarchy query migration.

The folder hierarchy query is correctly converted to object-based configuration with proper queryKey and queryFn properties.

---

127-148: LGTM! Complex query migration handled correctly.

The datasets in folder query with its complex caching logic is correctly migrated to object-based configuration while maintaining all the existing functionality.

---

264-278: LGTM! Mutation API migration.

The useMutation hook is correctly converted from positional arguments to object-based configuration with proper mutationFn and mutationKey properties.

---

285-299: LGTM! Delete folder mutation migration.

The delete folder mutation is correctly migrated to object-based configuration with proper error handling and success callbacks.

---

306-328: LGTM! Update folder mutation migration.

The update folder mutation is correctly converted to object-based configuration with all necessary callbacks maintained.

---

347-374: LGTM! Move folder mutation with optimistic updates.

The move folder mutation is correctly migrated to object-based configuration. The optimistic update logic with onMutate, onSuccess, and onError callbacks is properly maintained.

---

386-452: LGTM! Complex dataset mutation migration.

The dataset update mutation with its complex success handling is correctly migrated to object-based configuration. All the query cache invalidation and data updates are properly maintained.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[hotzenklotz]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.