fix(tanstack): infinite query typing issues #1480
Conversation
WalkthroughWalkthroughThe changes primarily focus on refining TanStack Query hooks across React, Vue, and Svelte to handle Changes
Sequence Diagram(s) (Beta)sequenceDiagram
participant ReactComponent as React Component
participant ReactHook as useInfiniteModelQuery
ReactComponent->>ReactHook: Call with options and args
ReactHook->>ReactHook: Set initialPageParam from args
ReactHook-->>ReactComponent: Return query result
participant SvelteComponent as Svelte Component
participant SvelteHook as useInfiniteModelQuery
SvelteComponent->>SvelteHook: Call with options and args
SvelteHook->>SvelteHook: Set initialPageParam from args
SvelteHook-->>SvelteComponent: Return query result
participant VueComponent as Vue Component
participant VueHook as useInfiniteModelQuery
VueComponent->>VueHook: Call with options and args
VueHook->>VueHook: Set initialPageParam from args
VueHook-->>VueComponent: Return query result
Assessment against linked issues
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Outside diff range and nitpick comments (3)
packages/plugins/tanstack-query/src/runtime/vue.ts (1)
Line range hint
107-127: Refactor to simplify the handling ofinitialPageParaminuseInfiniteModelQuery.- const queryOptions: any = computed(() => ({ + const queryOptions = computed(() => ({ queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }), queryFn: ({ queryKey, pageParam }: { queryKey: QueryKey; pagePageParam?: unknown }) => { const [_prefix, _model, _op, args] = queryKey; const reqUrl = makeUrl(url, pageParam ?? toValue(args)); return fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false); }, initialPageParam: toValue(args), ...toValue(options), }));This change simplifies the type checks and maintains readability by removing redundant type specifications.
packages/plugins/tanstack-query/tests/react-hooks-v5.test.tsx (2)
Line range hint
700-702: These else clauses can be omitted for cleaner code.Removing unnecessary else clauses can simplify the control flow and improve readability.
- if (condition) { - // code - } else { - // code that can be omitted - } + if (condition) { + // code + }Also applies to: 734-736
Tools
Biome
[error] 11-12: All these imports are only used as types.
Line range hint
731-731: Prefer template literals over string concatenation.Using template literals can make the code cleaner and easier to read.
- return 'Querying data:' + JSON.stringify(data); + return `Querying data: ${JSON.stringify(data)}`;Tools
Biome
[error] 11-12: All these imports are only used as types.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
packages/plugins/tanstack-query/package.jsonis excluded by!**/*.jsonpnpm-lock.yamlis excluded by!pnpm-lock.yaml,!**/*.yaml
Files selected for processing (7)
- packages/plugins/tanstack-query/src/generator.ts (2 hunks)
- packages/plugins/tanstack-query/src/runtime-v5/react.ts (2 hunks)
- packages/plugins/tanstack-query/src/runtime-v5/svelte.ts (2 hunks)
- packages/plugins/tanstack-query/src/runtime/vue.ts (3 hunks)
- packages/plugins/tanstack-query/tests/plugin.test.ts (7 hunks)
- packages/plugins/tanstack-query/tests/react-hooks-v5.test.tsx (2 hunks)
- packages/plugins/tanstack-query/tests/react-hooks.test.tsx (2 hunks)
Additional context used
Biome
packages/plugins/tanstack-query/src/runtime-v5/svelte.ts
[error] 76-76: Unexpected any. Specify a different type.
[error] 147-147: Unexpected any. Specify a different type.
[error] 163-163: Unexpected any. Specify a different type.
[error] 176-176: Unexpected any. Specify a different type.
[error] 12-13: All these imports are only used as types.
[error] 14-15: Some named imports are only used as types.
[error] 15-28: Some named imports are only used as types.
packages/plugins/tanstack-query/src/runtime/vue.ts
[error] 116-116: Unexpected any. Specify a different type.
[error] 145-145: Unexpected any. Specify a different type.
[error] 162-162: Unexpected any. Specify a different type.
[error] 180-180: Unexpected any. Specify a different type.
[error] 15-28: Some named imports are only used as types.
packages/plugins/tanstack-query/src/runtime-v5/react.ts
[error] 180-180: Unexpected any. Specify a different type.
[error] 193-193: Unexpected any. Specify a different type.
[error] 1-15: Some named imports are only used as types.
packages/plugins/tanstack-query/tests/plugin.test.ts
[error] 4-4: A Node.js builtin module should be imported with the node: protocol.
[error] 5-5: A Node.js builtin module should be imported with the node: protocol.
packages/plugins/tanstack-query/tests/react-hooks.test.tsx
[error] 89-89: Forbidden non-null assertion.
[error] 95-95: Unexpected any. Specify a different type.
[error] 150-150: Unexpected any. Specify a different type.
[error] 193-193: Unexpected any. Specify a different type.
[error] 238-238: Unexpected any. Specify a different type.
[error] 249-249: Unexpected any. Specify a different type.
[error] 294-294: Unexpected any. Specify a different type.
[error] 400-400: Unexpected any. Specify a different type.
[error] 443-443: Unexpected any. Specify a different type.
[error] 532-532: Unexpected any. Specify a different type.
[error] 576-576: Unexpected any. Specify a different type.
[error] 621-621: Unexpected any. Specify a different type.
[error] 629-629: Unexpected any. Specify a different type.
[error] 11-12: All these imports are only used as types.
packages/plugins/tanstack-query/tests/react-hooks-v5.test.tsx
[error] 89-89: Forbidden non-null assertion.
[error] 95-95: Unexpected any. Specify a different type.
[error] 150-150: Unexpected any. Specify a different type.
[error] 193-193: Unexpected any. Specify a different type.
[error] 236-236: Unexpected any. Specify a different type.
[error] 277-277: Unexpected any. Specify a different type.
[error] 290-290: Unexpected any. Specify a different type.
[error] 331-331: Unexpected any. Specify a different type.
[error] 481-481: Unexpected any. Specify a different type.
[error] 524-524: Unexpected any. Specify a different type.
[error] 611-611: Unexpected any. Specify a different type.
[error] 656-656: Unexpected any. Specify a different type.
[error] 664-664: Unexpected any. Specify a different type.
[error] 700-702: This else clause can be omitted because previous branches break early.
[error] 714-714: Unexpected any. Specify a different type.
[error] 731-731: Template literals are preferred over string concatenation.
[error] 734-736: This else clause can be omitted because previous branches break early.
[error] 748-748: Unexpected any. Specify a different type.
[error] 11-12: All these imports are only used as types.
packages/plugins/tanstack-query/src/generator.ts
[error] 17-17: A Node.js builtin module should be imported with the node: protocol.
[error] 53-60: Prefer for...of instead of forEach.
[error] 140-140: Do not use template literals if interpolation and special-character handling are not needed.
[error] 194-194: Do not use template literals if interpolation and special-character handling are not needed.
[error] 284-294: Prefer for...of instead of forEach.
[error] 346-346: Unexpected any. Specify a different type.
[error] 413-413: Unexpected any. Specify a different type.
[error] 425-425: Unexpected any. Specify a different type.
[error] 432-432: Unexpected any. Specify a different type.
[error] 476-476: Do not use template literals if interpolation and special-character handling are not needed.
[error] 478-478: Do not use template literals if interpolation and special-character handling are not needed.
[error] 523-523: Do not use template literals if interpolation and special-character handling are not needed.
[error] 524-524: Do not use template literals if interpolation and special-character handling are not needed.
[error] 592-592: Do not use template literals if interpolation and special-character handling are not needed.
[error] 605-605: Do not use template literals if interpolation and special-character handling are not needed.
[error] 651-653: This else clause can be omitted because previous branches break early.
[error] 1-12: Some named imports are only used as types.
[error] 12-13: Some named imports are only used as types.
[error] 17-18: Some named imports are only used as types.
[error] 542-553: This block statement doesn't serve any purpose and can be safely removed.
Additional comments not posted (5)
packages/plugins/tanstack-query/tests/plugin.test.ts (1)
51-62: Add comprehensive test cases for React, Vue, and Svelte applications.The addition of new source code snippets for React, Vue, and Svelte applications enhances the test coverage and ensures that the hooks work as expected across different frameworks.
Also applies to: 82-82, 104-118, 154-154, 176-176, 213-213, 235-235
packages/plugins/tanstack-query/tests/react-hooks.test.tsx (1)
63-100: Add a new test case for an infinite query.The addition of a new test case for an infinite query enhances the test coverage and ensures that the
useInfiniteModelQueryhook works as expected.Tools
Biome
[error] 89-89: Forbidden non-null assertion.
[error] 95-95: Unexpected any. Specify a different type.
packages/plugins/tanstack-query/tests/react-hooks-v5.test.tsx (2)
13-13: Ensure the new importuseInfiniteModelQueryis utilized correctly in the test suite.
63-100: Added a new test case for infinite queries.This test case effectively checks the behavior of the
useInfiniteModelQueryhook, ensuring that it handles data fetching, pagination, and caching as expected. The test is well-structured and covers the essential aspects of infinite querying.Tools
Biome
[error] 89-89: Forbidden non-null assertion.
[error] 95-95: Unexpected any. Specify a different type.
packages/plugins/tanstack-query/src/generator.ts (1)
139-140: Ensure correct handling ofinitialPageParamingenerateQueryHook.The modification to handle
initialPageParamdifferently for versionv5and targetsreactandsvelteis in line with the PR objectives. This change ensures that theinitialPageParamis set correctly, which is crucial for the correct operation of infinite queries in these frameworks.Tools
Biome
[error] 140-140: Do not use template literals if interpolation and special-character handling are not needed.
initialPageParamoption should be filled with theargsparameter automatically. The option field should be omitted from the input.Fixes #1472