fix(tanstack): improve typing of mutation errors

[ymc9]

Fixes #1062

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Introduced QueryError for improved error handling across the application.
  • Added UseSuspenseInfiniteQueryOptions and UseSuspenseQueryOptions for enhanced query capabilities in React.

• Refactor

  • Updated useModelMutation function signatures in React, Svelte, and Vue to support additional type parameters and options for better flexibility.
  • Streamlined error handling by standardizing the QueryError type usage.
  • Consolidated FetchFn type across different frameworks for consistency.

• Chores

  • Removed redundant imports to optimize the codebase.

[coderabbitai]

Important

Auto Review Skipped

Review was skipped due to path filters

Files ignored due to path filters (1)

• packages/plugins/trpc/tests/projects/t3-trpc-v10/package.json is excluded by: !**/*.json

Walkthrough

The updates across the TanStack Query plugin focus on enhancing error handling by introducing a new QueryError type, and refining the useModelMutation function across different frameworks (React, Svelte). These changes streamline error management and function signature consistency, improving developer experience and error debugging capabilities.

Changes

File Path	Change Summary
.../tanstack-query/src/generator.ts	- Added QueryError to imports. - Updated DefaultError to QueryError.
.../runtime-v5/index.ts	- Exported QueryError alongside FetchFn and getQueryKey.
.../runtime-v5/react.ts .../runtime-v5/svelte.ts	- Added/Removed FetchFn from imports as needed. - Updated useModelMutation function with new type parameters and adjusted options. - Added UseSuspenseInfiniteQueryOptions and UseSuspenseQueryOptions in React.
.../runtime/common.ts	- Introduced QueryError type extending Error with additional properties. - Updated fetcher function to use QueryError for error handling.

Assessment against linked issues

Objective	Addressed	Explanation
Bug: Next.js / React Query - error type is unknown and causes a Typescript error	✅

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Note: Auto-reply has been disabled for this repository by the repository owner. The CodeRabbit bot will not respond to your comments unless it is explicitly tagged.

• 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 generate unit tests for this file.
  • @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 generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

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 as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• 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/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 32f677c and c280468.

Files selected for processing (9)

• packages/plugins/tanstack-query/src/generator.ts (2 hunks)
• packages/plugins/tanstack-query/src/runtime-v5/index.ts (1 hunks)
• packages/plugins/tanstack-query/src/runtime-v5/react.ts (3 hunks)
• packages/plugins/tanstack-query/src/runtime-v5/svelte.ts (2 hunks)
• packages/plugins/tanstack-query/src/runtime/common.ts (2 hunks)
• packages/plugins/tanstack-query/src/runtime/index.ts (1 hunks)
• packages/plugins/tanstack-query/src/runtime/react.ts (2 hunks)
• packages/plugins/tanstack-query/src/runtime/svelte.ts (2 hunks)
• packages/plugins/tanstack-query/src/runtime/vue.ts (3 hunks)

Additional comments: 8

packages/plugins/tanstack-query/src/runtime/index.ts (1)

• 2-2: The addition of QueryError and FetchFn to the exports from the common module enhances type safety and clarity for developers working with the TanStack Query plugin. This change aligns well with the PR's objectives to improve error handling mechanisms.

packages/plugins/tanstack-query/src/runtime-v5/index.ts (1)

• 2-2: Exporting QueryError and FetchFn in the runtime-v5 directory ensures consistency across different versions of the TanStack Query plugin, aligning with the PR's objectives to standardize error handling and fetch functionality. This is a positive change for developers seeking a consistent experience across versions.

packages/plugins/tanstack-query/src/runtime/react.ts (2)

• 22-22: Removing the local import of FetchFn and relying on the export from the common module is a good practice for centralizing fetch functionality, enhancing maintainability and reusability across the plugin.
• 113-124: The updates to the useModelMutation function signature, including the addition of TArgs and TError type parameters and adjustments to the options parameter, significantly enhance type safety and error handling capabilities. This aligns well with the PR's objectives to improve error typing and handling within the plugin.

packages/plugins/tanstack-query/src/runtime/common.ts (2)

• 31-41: The introduction of the QueryError type is a significant improvement for error handling. It extends the standard Error class with additional properties for error information (info) and HTTP status code (status). This enhancement will provide more detailed error reporting, which is beneficial for debugging and error handling in applications using the TanStack Query plugin.
• 82-82: The modification to the fetcher function to utilize the newly introduced QueryError type for error handling is correctly implemented. By assigning errData.error to the info property and the response status to the status property of the QueryError, it ensures that errors thrown by the fetcher function are informative and consistent with the new error handling approach.

packages/plugins/tanstack-query/src/generator.ts (2)

• 568-568: The import of the QueryError type is correctly added. This import is necessary for the file to use QueryError in type annotations and assignments, aligning with the broader changes in the plugin to enhance error typing.
• 570-570: Changing the DefaultError type assignment to QueryError is a logical step following the introduction of the QueryError type. This change ensures that the default error type used throughout the plugin is now QueryError, which provides more detailed error information. This is a positive change for consistency and improved error handling.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between c280468 and 41c98bf.

Files selected for processing (2)

• packages/plugins/tanstack-query/src/generator.ts (3 hunks)
• packages/plugins/tanstack-query/src/runtime/vue.ts (3 hunks)

Files skipped from review as they are similar to previous changes (2)

• packages/plugins/tanstack-query/src/generator.ts
• packages/plugins/tanstack-query/src/runtime/vue.ts