Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(RQ): improve react-query plugin #12226

Merged
merged 8 commits into from
Apr 12, 2024
Merged

Conversation

fz6m
Copy link
Contributor

@fz6m fz6m commented Mar 23, 2024

  1. 新增 react-query v5 使用 example

  2. 补充更新 react-query 说明文档

  3. 修复 react-query v5 在使用非打平的依赖结构时(如 pnpm ),类型无法索引到的问题

  4. 新增 react-query 运行时配置的类型,使用时会有类型提示更友好

Summary by CodeRabbit

  • New Features
    • Added guidance on using refetchOnWindowFocus configuration option in React Query documentation.
    • Introduced integration examples and configuration for React Query v5 in UmiJS projects, including default query options and devtool setup.
    • Provided a new example component that fetches and displays UmiJS repository stars using React Query v5.
  • Documentation
    • Updated React Query documentation to recommend setting refetchOnWindowFocus: false and to use version 4 by default.
  • Refactor
    • Renamed isLoading to isFetching in the HomePage component for alignment with React Query's useQuery hook.
    • Updated import statements and removed specific logic in layout.ts related to npm client determination.
  • Chores
    • Added utility function to determine if the node_modules directory is flattened, affecting project configuration.

Copy link

vercel bot commented Mar 23, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
umi ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 23, 2024 0:49am

Copy link

coderabbitai bot commented Mar 23, 2024

Walkthrough

The recent updates focus on enhancing React Query integration across the board, with a spotlight on adopting version 5 for UmiJS projects. Key adjustments include a new stance on the refetchOnWindowFocus setting, advising its deactivation for most scenarios to prevent unintended data fetching. Moreover, the introduction of React Query v5 integration examples for UmiJS, alongside adjustments in plugin and utility configurations, marks a significant stride towards modernizing project setups and streamlining data fetching mechanisms.

Changes

Files Summary
docs/.../react-query.md Added refetchOnWindowFocus info, guidance on using TanStack Query v4 by default, and advised setting refetchOnWindowFocus: false.
examples/with-react-query-v5/... (.umirc.ts, app.ts, pages/index.tsx, readme.md, style.less) Introduced React Query v5 integration with UmiJS, including configuration, example component, and styling.
examples/with-react-query/app.ts, examples/with-react-query/pages/index.tsx Introduced React Query settings configuration and updated isLoading to isFetching in HomePage component.
packages/plugins/src/... (layout.ts, react-query.ts, utils/npmClient.ts) Adjusted imports, added support for React Query v5, and introduced a utility to determine if the node_modules directory is flattened.

🐰✨

In the world of code, where queries run free,
A rabbit hopped in, as happy as can be.
"With React Query v5, oh what a sight,
Fetching data with ease, both day and night.
No more refetch on focus, a relief indeed,
For UmiJS and React, it's what we need!"
🌟📦🛠️

🐰✨

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

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>.
    • Generate unit-tests for this file.
    • 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 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.

Copy link

codecov bot commented Mar 23, 2024

Codecov Report

Attention: Patch coverage is 0% with 42 lines in your changes are missing coverage. Please review.

Project coverage is 28.36%. Comparing base (2c43662) to head (662e725).

Files Patch % Lines
packages/plugins/src/react-query.ts 0.00% 28 Missing ⚠️
packages/plugins/src/utils/npmClient.ts 0.00% 9 Missing and 2 partials ⚠️
packages/plugins/src/layout.ts 0.00% 3 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master   #12226      +/-   ##
==========================================
- Coverage   28.41%   28.36%   -0.06%     
==========================================
  Files         492      493       +1     
  Lines       15166    15196      +30     
  Branches     3626     3637      +11     
==========================================
  Hits         4310     4310              
- Misses      10084    10113      +29     
- Partials      772      773       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits Files that changed from the base of the PR and between 2c43662 and 662e725.
Files ignored due to path filters (4)
  • examples/with-react-query-v5/package.json is excluded by: !**/*.json
  • examples/with-react-query-v5/tsconfig.json is excluded by: !**/*.json
  • examples/with-react-query/tsconfig.json is excluded by: !**/*.json
  • pnpm-lock.yaml is excluded by: !**/*.yaml
Files selected for processing (11)
  • docs/docs/docs/max/react-query.md (2 hunks)
  • examples/with-react-query-v5/.umirc.ts (1 hunks)
  • examples/with-react-query-v5/app.ts (1 hunks)
  • examples/with-react-query-v5/pages/index.tsx (1 hunks)
  • examples/with-react-query-v5/readme.md (1 hunks)
  • examples/with-react-query-v5/style.less (1 hunks)
  • examples/with-react-query/app.ts (1 hunks)
  • examples/with-react-query/pages/index.tsx (1 hunks)
  • packages/plugins/src/layout.ts (2 hunks)
  • packages/plugins/src/react-query.ts (2 hunks)
  • packages/plugins/src/utils/npmClient.ts (1 hunks)
Additional comments: 15
examples/with-react-query-v5/.umirc.ts (1)
  • 1-4: The configuration for the react-query plugin is correctly set up. This aligns with the PR's objective of introducing a React Query v5 example.
examples/with-react-query-v5/readme.md (1)
  • 1-3: The readme provides a clear introduction to the example project, correctly referencing UmiJS and react-query v5. This documentation is essential for understanding the purpose and usage of the example.
examples/with-react-query/app.ts (1)
  • 1-13: The react-query configuration correctly sets refetchOnWindowFocus to false and specifies the devtool position. This aligns with the PR's objectives and best practices for react-query usage.
examples/with-react-query-v5/app.ts (1)
  • 1-13: The react-query configuration correctly sets refetchOnWindowFocus to false. However, the devtool configuration key has changed to buttonPosition. Please verify this change is correct and specific to React Query v5.
examples/with-react-query-v5/style.less (1)
  • 1-22: The CSS styles are correctly defined and provide a clean layout for the example project. This enhances the usability and presentation of the React Query v5 example.
examples/with-react-query/pages/index.tsx (1)
  • 5-13: The change from isLoading to isFetching aligns with the useQuery hook's API, enhancing compatibility and usability. The conditional rendering based on the loading state is correctly implemented.
packages/plugins/src/utils/npmClient.ts (1)
  • 1-21: The utility function for checking if the node_modules directory is flattened is well-implemented. It correctly accounts for different npm clients and tnpm's compatibility mode, improving compatibility across package management setups.
examples/with-react-query-v5/pages/index.tsx (1)
  • 5-29: The use of useQuery with a detailed configuration demonstrates an advanced usage of react-query v5. The conditional rendering based on the loading state (isFetching) and the artificial delay in the queryFn are correctly implemented, providing a comprehensive example of react-query v5 integration.
docs/docs/docs/max/react-query.md (3)
  • 32-34: The addition of information regarding the refetchOnWindowFocus configuration option is valuable. It helps developers understand the potential impact of this setting on their applications and encourages best practices.
  • 82-94: The example provided for configuring refetchOnWindowFocus within the reactQuery runtime configuration is clear and instructive. It effectively demonstrates how to apply the recommended settings in a practical scenario.
  • 99-99: Highlighting the recommendation to set refetchOnWindowFocus: false by default is a good practice. It helps prevent unexpected data fetching behavior, which can enhance the user experience in most projects.
packages/plugins/src/react-query.ts (3)
  • 4-4: The addition of isFlattedNodeModulesDir from './utils/npmClient' is a good approach to handle different package management setups, ensuring compatibility and ease of use across development environments.
  • 147-179: Exporting various members and types related to query handling from @tanstack/react-query and @tanstack/query-core is a beneficial enhancement. It simplifies the import process for developers and supports a more efficient development workflow.
  • 249-279: The logic introduced for supporting react-query v5, including the resolution of @tanstack/query-core path and modifications to the TypeScript configuration, is crucial for ensuring compatibility and enhancing the developer experience in projects with non-flattened dependency structures.
packages/plugins/src/layout.ts (1)
  • 4-5: The modifications in import statements, including the addition of isFlattedNodeModulesDir and the removal of NpmClientEnum, along with the updated logic to determine if the dependencies directory is flattened, are positive changes. They simplify the codebase and enhance compatibility across different package managers and development environments.

@sorrycc sorrycc merged commit 2caa393 into umijs:master Apr 12, 2024
25 checks passed
NpmClientEnum.yarn,
];

export const isFlattedNodeModulesDir = (api: IApi) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

关于间接依赖类型提示失败的更多信息:microsoft/TypeScript#58176

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants