docs: missing useFetch option reactivity
#33317
Conversation
|
|
harlan-zw
changed the title
harlan-zw
changed the title
useFetch option reactivity
WalkthroughDocumentation updates in two markdown files. The Getting Started guide notes that reactive fetch options are automatically watched to trigger refetches, shows an opt-out via Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
harlan-zw
changed the title
useFetch option reactivityuseFetch option reactivity
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/1.getting-started/10.data-fetching.md(1 hunks)docs/3.api/2.composables/use-fetch.md(5 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.18.1)
docs/3.api/2.composables/use-fetch.md
103-103: Trailing spaces
Expected: 0 or 2; Actual: 1
(MD009, no-trailing-spaces)
🪛 GitHub Actions: docs
docs/3.api/2.composables/use-fetch.md
[error] 103-103: markdownlint: MD009/no-trailing-spaces Trailing spaces in docs/3.api/2.composables/use-fetch.md:103:146. Trailing spaces [Expected: 0 or 2; Actual: 1] (Command: 'pnpm lint:docs')
🔇 Additional comments (1)
docs/1.getting-started/10.data-fetching.md (1)
484-497: Clarifies auto-watched fetch options wellThanks for spelling out the new default behaviour and showing the opt-out path with
watch: false; this will save folks a lot of head-scratching when queries suddenly refetch.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/3.api/2.composables/use-fetch.md (1)
196-224: Docs drift:UseFetchOptionstype doesn’t exposeMaybeRefOrGetter/$fetch/reactivetimeout.The public
UseFetchOptionstype inpackages/nuxt/src/app/composables/fetch.tsstill declareskey,method,query,params,body,headers,baseURL, andtimeoutas plain values and doesn’t include a$fetchfield. This update showsMaybeRefOrGetter<…>wrappers, adds$fetch, and documents reactivetimeout, which will mislead readers and break typed consumers relying on the published definition. Please revert these type changes (or update the actual implementation/types accordingly) so the docs stay in sync with the code.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/3.api/2.composables/use-fetch.md(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: lint-docs
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/1.getting-started/10.data-fetching.md(1 hunks)docs/3.api/2.composables/use-fetch.md(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/1.getting-started/10.data-fetching.md
🔇 Additional comments (1)
docs/3.api/2.composables/use-fetch.md (1)
103-112: Reactive example still misrepresents current behaviour
useFetchonly re-fetches automatically when the entire option value is reactive (ref/computed/getter) or explicitly added towatch. Passing a plain object with a nested ref, as in this example, will not trigger a refetch today. Please adjust the explanation and snippet to show either a computed getter for the wholequeryobject or an explicitwatchentry, e.g.:-const { data } = await useFetch('/api/search', { - query: { q: searchQuery } -}) +const { data } = await useFetch('/api/search', { + query: computed(() => ({ q: searchQuery.value })) +})Alternatively, document using
watch: [searchQuery].
| ### Reactive Fetch Options | ||
|
|
||
| Fetch options can be provided as reactive, supporting `computed`, `ref` and [computed getters](https://vuejs.org/guide/essentials/computed.html). When a reactive fetch option is updated it will trigger a refetch using the updated resolved reactive value. | ||
|
|
||
| ```ts | ||
| const searchQuery = ref('initial') | ||
| const { data } = await useFetch('/api/search', { | ||
| query: { q: searchQuery } | ||
| }) | ||
| // triggers a refetch: /api/search?q=new%20search | ||
| searchQuery.value = 'new search' | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Doc claim about automatic refetching from nested refs is wrong
useFetch still only re-runs when the request source or explicit watch sources change. Dropping a ref inside a plain options object like query: { q: searchQuery } does not currently trigger a refetch—searchQuery is never tracked. Please correct the wording/example (e.g. wrap the whole query in a computed/ref or show watch: [searchQuery]) to match runtime behaviour.
🤖 Prompt for AI Agents
In docs/3.api/2.composables/use-fetch.md around lines 101 to 113, the docs
incorrectly state that nested refs inside plain option objects (e.g. query: { q:
searchQuery }) will trigger automatic refetches; in reality useFetch only
watches the request source or explicit watch sources and does not track refs
nested inside plain objects. Update the wording and example to reflect runtime
behavior: remove the claim that nested refs are tracked, show a correct pattern
such as wrapping the entire options object in a computed/ref or adding watch:
[searchQuery] to trigger refetches, and update the explanatory text to instruct
users to use computed/ref or explicit watch for reactive query params.
🔗 Linked issue
📚 Description
Was trying to use the docs to figure out usage on reactive
querywithuseFetchand had some issues, ended up in some github issues, so a good opportunity to send a PR :)