Complete the code to fetch data in Remix loader function.
export async function loader() {
const data = await fetch('/api/data').then(res => res.[1]());
return { data };
}The loader function uses res.json() to parse JSON data from the response, which is common in Remix data loading.
Complete the Remix route component to use the loader data with the correct hook.
import { [1] } from '@remix-run/react'; export default function MyRoute() { const data = [1](); return <div>{JSON.stringify(data)}</div>; }
Remix provides the useLoaderData hook to access data returned from the loader function.
Fix the error in the Remix loader to return a proper Response with JSON data.
export async function loader() {
const data = { message: 'Hello' };
return new Response(JSON.stringify(data), {
headers: { 'Content-Type': [1] }
});
}The response header must specify application/json for JSON data so the client knows how to parse it.
Fill both blanks to create a Remix loader that fetches data and returns JSON with correct headers.
export async function loader() {
const response = await fetch('/api/info');
const data = await response.[1]();
return new Response(JSON.stringify(data), {
headers: { 'Content-Type': [2] }
});
}response.text() instead of response.json().The loader fetches JSON data using response.json() and returns it with the application/json content type header.
Fill all three blanks to create a Remix route component that uses loader data and displays a message.
import { [1] } from '@remix-run/react'; export default function Message() { const data = [2](); return <main><h1>[3]</h1></main>; }
The component imports and uses useLoaderData to get loader data, then displays the message from data inside an h1.