fix(tanstack): make sure vue-query hooks' input is reactive

[ymc9]

Summary by CodeRabbit

• New Features
  • Enhanced Vue support in query generation, including better handling of reactive types.
• Refactor
  • Improved type generation for query hooks to support conditional wrapping with MaybeRef.
  • Updated query and mutation options to utilize MaybeRef for more flexible Vue integration.

[coderabbitai]

Walkthrough

Walkthrough

The changes introduced involve enhancing the type handling and integration of Vue with the TanStack Query library. By implementing MaybeRef in various parts of the code, the updates aim to provide more flexible and Vue-friendly typings for query and mutation hooks. This adjustment allows for both reactive and non-reactive inputs, improving the library's compatibility and usability within Vue applications.

Changes

Files	Change Summary
.../tanstack-query/src/generator.ts	Updated type handling to use MaybeRef for improved Vue typings, introduced new functions for Vue-specific options.
.../tanstack-query/src/runtime/vue.ts	Added MaybeRef and other Vue-specific imports, adjusted function signatures and logic for Vue reactivity support.

Possibly related issues

• Issue [@tanstack/vue-query] Generated hooks have wrong typings #1056: The changes potentially address the incorrect typings issue by introducing MaybeRef for better handling of Vue reactivity, which could align with the objectives of ensuring correct typings and improving integration with Vue.

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 replies 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 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 10b492b and 6772d74.

Files selected for processing (2)

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

Additional comments (13)

packages/plugins/tanstack-query/src/runtime/vue.ts (8)

• 8-8: Adding QueryKey as a type import from @tanstack/vue-query is a good practice for ensuring type safety when working with query keys. This aligns well with the changes aimed at enhancing reactivity in Vue Query hooks.
• 14-14: The addition of MaybeRef from Vue is crucial for the reactivity improvements in this PR. It allows the arguments and options in query hooks to be reactive, which is a significant enhancement for Vue applications using the TanStack Query library.
• 64-65: Using MaybeRef for the args and options parameters in useModelQuery is a key change that enables reactivity for these inputs. This is a critical improvement for integrating Vue's reactivity system with TanStack Query hooks.
• 69-78: The use of computed properties for query options is a smart approach to ensure reactivity. It allows the options to dynamically respond to changes, leveraging Vue's reactivity system effectively. This pattern should be consistently applied across all query and mutation hooks to ensure uniform reactivity.
• 96-97: Applying MaybeRef to the args and options parameters in useInfiniteModelQuery follows the same pattern as useModelQuery, ensuring consistency in handling reactivity across different types of queries. This consistency is important for the developer experience.
• 100-109: The use of computed properties in useInfiniteModelQuery for handling query options is consistent with the approach in useModelQuery. This consistency in handling reactivity across query hooks is commendable and enhances the overall reactivity of the library.
• 139-139: In useModelMutation, applying MaybeRef to the options parameter is consistent with the changes made in query hooks. This ensures that mutation options can also benefit from Vue's reactivity system, making the library more versatile and reactive.
• 167-173: > 📝 NOTE

This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [161-181]

The use of computed properties for mutation options in useModelMutation is a good practice that aligns with the changes in query hooks. It ensures that mutation options are reactive, further integrating Vue's reactivity system into the library. The consistent application of this pattern across the library is beneficial for developers.

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

• 101-101: The introduction of makeQueryArgsType to dynamically determine the inputType is a significant change. It enables the conditional wrapping of types with MaybeRef based on the target framework, which is crucial for integrating Vue's reactivity system into the library. This function plays a pivotal role in ensuring that inputs to query hooks are reactive.
• 590-590: Importing MaybeRef from Vue in makeBaseImports is essential for the changes made in this PR. It ensures that MaybeRef is available for use in generating query and mutation hooks, facilitating the integration of Vue's reactivity system into the library.
• 612-619: The makeQueryArgsType function is well-implemented, providing a mechanism to conditionally wrap the type with MaybeRef for Vue. This is a key enhancement for making inputs to query hooks reactive in Vue applications. The function's logic is clear and aligns with the objectives of the PR.
• 639-641: The adjustment in makeQueryOptions to handle MaybeRef for Vue is a necessary change that aligns with the overall goal of enhancing reactivity in Vue Query hooks. Wrapping the options type with MaybeRef ensures that query options are reactive, which is a significant improvement for Vue applications.
• 660-660: The update in makeMutationOptions to use MaybeRef for Vue is consistent with the changes made to query options. This ensures that mutation options can also be reactive, further integrating Vue's reactivity system into the library. The consistency in handling reactivity across query and mutation hooks is commendable.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 6772d74 and 2dfa4a4.

Files selected for processing (1)

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

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

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

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 2dfa4a4 and 6637a1d.

Files selected for processing (1)

• packages/plugins/tanstack-query/src/generator.ts (5 hunks)

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

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