feat(RQ): improve react-query plugin #12226
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe 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 Changes
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Additionally, you can add CodeRabbit Configration File (
|
Codecov ReportAttention: Patch coverage is
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. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files ignored due to path filters (4)
examples/with-react-query-v5/package.jsonis excluded by:!**/*.jsonexamples/with-react-query-v5/tsconfig.jsonis excluded by:!**/*.jsonexamples/with-react-query/tsconfig.jsonis excluded by:!**/*.jsonpnpm-lock.yamlis 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
refetchOnWindowFocusto 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
refetchOnWindowFocusto false. However, the devtool configuration key has changed tobuttonPosition. 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
isLoadingtoisFetchingaligns with theuseQueryhook'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_modulesdirectory is flattened is well-implemented. It correctly accounts for different npm clients andtnpm's compatibility mode, improving compatibility across package management setups.examples/with-react-query-v5/pages/index.tsx (1)
- 5-29: The use of
useQuerywith 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 thequeryFnare 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
refetchOnWindowFocusconfiguration 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
refetchOnWindowFocuswithin thereactQueryruntime 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: falseby 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
isFlattedNodeModulesDirfrom './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-queryand@tanstack/query-coreis 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-corepath 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
isFlattedNodeModulesDirand the removal ofNpmClientEnum, 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
approved these changes
Apr 12, 2024
fz6m
commented
Apr 14, 2024
| NpmClientEnum.yarn, | ||
| ]; | ||
|
|
||
| export const isFlattedNodeModulesDir = (api: IApi) => { |
There was a problem hiding this comment.
关于间接依赖类型提示失败的更多信息：microsoft/TypeScript#58176
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
新增 react-query v5 使用 example
补充更新 react-query 说明文档
修复 react-query v5 在使用非打平的依赖结构时（如 pnpm ），类型无法索引到的问题
新增 react-query 运行时配置的类型，使用时会有类型提示更友好
Summary by CodeRabbit
refetchOnWindowFocusconfiguration option in React Query documentation.refetchOnWindowFocus: falseand to use version 4 by default.isLoadingtoisFetchingin the HomePage component for alignment with React Query'suseQueryhook.layout.tsrelated to npm client determination.node_modulesdirectory is flattened, affecting project configuration.