Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
📝 WalkthroughWalkthroughThis PR introduces performance testing capabilities to the application by adding conditional Lighthouse audit support based on the Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ❌ 1❌ Failed checks (1 inconclusive)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| lazy: true, | ||
| }, | ||
| ) | ||
| const { data: contributors, status: contributorsStatus } = useLazyFetch('/api/contributors') |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n app/pages/about.vue | head -50Repository: npmx-dev/npmx.dev
Length of output: 2162
🏁 Script executed:
rg "useLazyFetch" --type vue -A 3 -B 3Repository: npmx-dev/npmx.dev
Length of output: 88
🏁 Script executed:
rg "GitHubContributor\|Contributor.*type\|interface.*Contributor" --type ts --type tsx --type vue -A 3Repository: npmx-dev/npmx.dev
Length of output: 88
🌐 Web query:
Nuxt 3 useLazyFetch TypeScript generic type support
💡 Result:
useLazyFetch does support TypeScript generics—it has the same generic signature as useFetch. In the Nuxt docs the type is shown as: useLazyFetch<DataT, ErrorT>(..., options?: UseFetchOptions<DataT>) -> Promise<AsyncData<DataT, ErrorT>>. [1]
Basic: type the response
type Post = { id: number; title: string }
const { data, error, status } = await useLazyFetch<Post[]>('/api/posts')
// data: Ref<Post[] | null | undefined> (depending on Nuxt version / mode)(Generics are documented on useFetch, and useLazyFetch is explicitly “same signature”.) [1][2]
Also type the error (optional)
import type { FetchError } from 'ofetch'
type Post = { id: number; title: string }
const { data, error } = await useLazyFetch<Post[], FetchError>('/api/posts')(Generic ErrorT is part of the documented signature.) [1][2]
If you wrap it, preserve generics/overloads
If you create a custom wrapper composable, type it as typeof useFetch / typeof useLazyFetch (or forward the full generic parameters), otherwise you often lose Nuxt’s built-in typing/inference. [3]
Sources: Nuxt useLazyFetch docs (type signature) [1], Nuxt useFetch docs (generic signature/details) [2], example of preserving types in a custom wrapper [3].
🏁 Script executed:
rg "type.*Contributor|interface.*Contributor" --type ts --type vueRepository: npmx-dev/npmx.dev
Length of output: 88
🏁 Script executed:
rg "api/contributors" --type ts --type vue -B 2 -A 2Repository: npmx-dev/npmx.dev
Length of output: 88
🏁 Script executed:
find . -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.vue" \) | xargs grep -l "contributors" | head -10Repository: npmx-dev/npmx.dev
Length of output: 149
🏁 Script executed:
cat -n server/api/contributors.get.tsRepository: npmx-dev/npmx.dev
Length of output: 1798
🏁 Script executed:
rg "type|interface" server/api/contributors.get.ts -A 5Repository: npmx-dev/npmx.dev
Length of output: 190
🏁 Script executed:
find . -path ./node_modules -prune -o -type f \( -name "*.ts" -o -name "*.d.ts" \) -print | xargs grep -l "contributor" -i | grep -v node_modules | head -15Repository: npmx-dev/npmx.dev
Length of output: 127
Add type-safe generic to useLazyFetch call.
The call to useLazyFetch lacks a generic type parameter, leaving contributors implicitly typed, which violates the strict type-safety guideline. Import and use the existing GitHubContributor type from the API endpoint.
♻️ Suggested fix
+import type { GitHubContributor } from '~/server/api/contributors.get'
+
const { data: contributors, status: contributorsStatus } =
- useLazyFetch('/api/contributors')
+ useLazyFetch<GitHubContributor[]>('/api/contributors')📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { data: contributors, status: contributorsStatus } = useLazyFetch('/api/contributors') | |
| import type { GitHubContributor } from '~/server/api/contributors.get' | |
| const { data: contributors, status: contributorsStatus } = | |
| useLazyFetch<GitHubContributor[]>('/api/contributors') |
| <template #fallback> | ||
| <!-- Show skeleton loaders when SSR or access controls are loading --> | ||
| </template> |
There was a problem hiding this comment.
Empty fallback template with misleading comment.
The comment states "Show skeleton loaders when SSR or access controls are loading" but no actual content is rendered. If skeletons are intended for CLS reduction, this appears incomplete. If showing nothing is intentional, consider updating the comment to reflect that.
💡 Suggested fix if skeletons are not needed
<template `#fallback`>
- <!-- Show skeleton loaders when SSR or access controls are loading -->
+ <!-- Intentionally empty: component handles its own loading state -->
</template>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <template #fallback> | |
| <!-- Show skeleton loaders when SSR or access controls are loading --> | |
| </template> | |
| <template `#fallback`> | |
| <!-- Intentionally empty: component handles its own loading state --> | |
| </template> |
1 participant
No description provided.