Chapter quiz · Data Fetching

Test what you learned.

8 questions on Data Fetching. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

Data Fetching — Chapter Quiz

Eight questions covering useFetch, useAsyncData, server routes, and error handling.

0/ 9

Question 1
1
What does useFetch do that $fetch alone does not?
ANothing — they are identicalBDeduplicate the request between server and client and serialize the result into the payloadCEncrypt the responseDSwitch to GraphQL
useFetch runs once on the server, ships the result in the payload, and skips a second client-side request. $fetch is the raw HTTP client.
Question 2
2
When should you prefer useAsyncData over useFetch?
AWhen you need to transform the response before storing itBWhen the URL is dynamicCWhen testing the pageDWhen the URL ends in .json
useAsyncData(key, () => $fetch(...).then(transform)) lets you run arbitrary async work — multiple fetches, transforms — and still benefit from SSR caching.
Question 3
3
Files in server/api/ are auto-registered as HTTP routes.
TTrueFFalse
server/api/foo.ts becomes /api/foo. Nested paths and [id] params work the same way as pages/.
Question 4
4
How do you re-run a useFetch request manually?
ACall the page reloadBDestructure refresh from the return value and call itCReassign the URLDYou cannot — fetch only runs once
const { data, refresh } = await useFetch(...). Calling refresh() re-runs the fetch with the same key.
Question 5
5
Which option re-fetches when reactive deps change?
Awatch: [searchQuery]Breactive: trueCrefetch: "auto"Dlive: true
Pass refs to watch: and useFetch re-runs whenever any of them changes — the typical pattern for search inputs.
Question 6
6
To forward cookies from the browser into your useFetch, use use________Headers(['cookie']).
useRequestHeaders(['cookie']) returns the named headers from the incoming request — pass them as the headers option to make the SSR fetch authenticated.
Question 7
7
How do you throw a typed HTTP error from a server route?
Athrow new Error("Not found")Bthrow createError({ statusCode: 404, statusMessage: "Not found" })Creturn { error: 404 }Dresponse.status(404)
createError is Nuxt's helper for HTTP errors — works in pages, composables, and server routes. The status flows through to the client.
Question 8
8
Which are valid ways to fetch data in a Nuxt page?
Select all that apply.
Aawait useFetch("/api/posts")Bawait $fetch("/api/posts")Cawait useAsyncData("posts", () => $fetch("/api/posts"))Dfetch("/api/posts").then(r => r.json())
All four work. The first three integrate with SSR caching; raw fetch works but won't dedupe between server and client.