Loader functions for data fetching in Remix - Mini Project: Build & Apply

Loader functions for data fetching

📖 Scenario: You are building a simple Remix app that shows a list of books fetched from a server. You will use a loader function to fetch the data before the page renders.

🎯 Goal: Create a Remix route component that uses a loader function to fetch a list of books and display their titles on the page.

📋 What You'll Learn

Create a loader function that returns a list of books

Use the useLoaderData hook to access the loaded data in the component

Render the list of book titles inside an unordered list

Export the loader function and the default component from the route file

💡 Why This Matters

🌍 Real World

Loader functions in Remix are used to fetch data on the server before rendering pages, improving performance and SEO.

💼 Career

Understanding loader functions is essential for building data-driven Remix applications and working with server-side rendering frameworks.

1

Create the initial data array

Create a constant called books that is an array of objects with these exact entries: { id: 1, title: 'The Hobbit' }, { id: 2, title: '1984' }, and { id: 3, title: 'Pride and Prejudice' }.

Remix

# Create a constant called books with the specified array of objects
# Your code here

Hint

Use const books = [ ... ] with the exact objects inside the array.

2

Create the loader function

Create and export an async function called loader that returns a JSON response with the books array inside an object with key books. Use json from @remix-run/node.

Remix

const books = [
  { id: 1, title: 'The Hobbit' },
  { id: 2, title: '1984' },
  { id: 3, title: 'Pride and Prejudice' }
];

// Create and export the loader function
// Your code here

Hint

Remember to import json from @remix-run/node and return json({ books }) inside the loader function.

3

Use useLoaderData to access data

Import useLoaderData from @remix-run/react. Inside the default exported function component called Books, call useLoaderData() and store the result in a constant called data.

Remix

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

const books = [
  { id: 1, title: 'The Hobbit' },
  { id: 2, title: '1984' },
  { id: 3, title: 'Pride and Prejudice' }
];

export async function loader() {
  return json({ books });
}

// Create the Books component and use useLoaderData
// Your code here

Hint

Import useLoaderData and call it inside the Books component to get the loaded data.

4

Render the list of book titles

Inside the Books component, return a <main> element containing an <h1> with text Book List and an unordered list <ul>. Use data.books.map with book as iterator to render each book's title inside a <li> with a key attribute set to book.id.

Remix

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

const books = [
  { id: 1, title: 'The Hobbit' },
  { id: 2, title: '1984' },
  { id: 3, title: 'Pride and Prejudice' }
];

export async function loader() {
  return json({ books });
}

export default function Books() {
  const data = useLoaderData();
  
  // Render the book list inside main
  // Your code here
}

Hint

Use JSX to render the list inside a <main> with a heading and an unordered list. Use map to create <li> elements with keys.

Practice

1. What is the main purpose of a loader function in Remix?

easy

A. To fetch data on the server before rendering the page

B. To handle user input events in the UI

C. To style components with CSS

D. To manage client-side routing

Solution

1. Step 1: Understand the role of loader functions

   Loader functions run on the server and fetch data needed for the page before it renders.

2. Step 2: Differentiate from other functions

   Handling user input, styling, and routing are done elsewhere, not in loaders.

3. Final Answer:

   To fetch data on the server before rendering the page -> Option A

4. Quick Check:

   Loader = fetch data before render [OK]

Hint: Loader fetches data on server before page shows [OK]

Common Mistakes:

• Thinking loader runs on the client
• Confusing loader with event handlers
• Assuming loader styles components

2. Which of the following is the correct way to export a loader function in Remix?

easy

A. export const loader = () => fetchData()

B. function loader() { return fetchData(); }

C. export default loader() { return fetchData(); }

D. export default function loader() { return fetchData(); }

Solution

1. Step 1: Recall Remix loader export syntax

   Loader functions are exported as named exports, often as constants with arrow functions.

2. Step 2: Check each option's syntax

   export const loader = () => fetchData() uses correct named export with arrow function syntax. function loader() { return fetchData(); } is not exported. export default loader() { return fetchData(); } uses invalid syntax. export default function loader() { return fetchData(); } uses default export, but Remix requires named 'loader' export.

3. Final Answer:

   export const loader = () => fetchData() -> Option A

4. Quick Check:

   Named export with const and arrow function [OK]

Hint: Use named export with const and arrow function [OK]

Common Mistakes:

• Forgetting to export the loader
• Using default export incorrectly
• Using function declaration without export

3. Given this loader function, what will useLoaderData() return in the component?

export const loader = async () => {
  return { message: 'Hello Remix' };
};

medium

A. An error because loader must return Response

B. undefined

C. { message: 'Hello Remix' }

D. A Promise object

Solution

1. Step 1: Understand loader return values

   Loader returns data that Remix serializes as JSON and sends to the client.

2. Step 2: What does useLoaderData() receive?

   It receives the resolved data object from the loader, here { message: 'Hello Remix' }.

3. Final Answer:

   { message: 'Hello Remix' } -> Option C

4. Quick Check:

   useLoaderData() = loader return data [OK]

Hint: useLoaderData() returns loader's returned data object [OK]

Common Mistakes:

• Expecting a Promise instead of resolved data
• Thinking loader must return a Response object
• Assuming useLoaderData() returns undefined

4. What is wrong with this loader function?

export const loader = () => {
  fetch('/api/data').then(res => res.json());
};

medium

A. fetch cannot be used in loader functions

B. It does not return the fetched data or a Promise

C. The loader must be async but this one is not

D. It should return a React component instead

Solution

1. Step 1: Check the return value of the loader

   The loader calls fetch but does not return anything, so it returns undefined.

2. Step 2: Why is this a problem?

   Loader must return data or a Promise resolving to data for Remix to send to the component.

3. Final Answer:

   It does not return the fetched data or a Promise -> Option B

4. Quick Check:

   Loader must return data or Promise [OK]

Hint: Always return the fetch Promise or data in loader [OK]

Common Mistakes:

• Not returning the fetch result
• Assuming fetch is disallowed in loaders
• Confusing async keyword necessity

5. You want to fetch user data and posts in a loader and send both to your component. Which loader function correctly does this?

hard

A. export const loader = async () => {
const user = await fetch('/api/user');
const posts = await fetch('/api/posts');
return { user, posts };
};

B. export const loader = () => {
const user = fetch('/api/user').then(r => r.json());
const posts = fetch('/api/posts').then(r => r.json());
return { user, posts };
};

C. export const loader = async () => {
const user = fetch('/api/user').then(r => r.json());
const posts = fetch('/api/posts').then(r => r.json());
return { user, posts };
};

D. export const loader = async () => {
const user = await fetch('/api/user').then(r => r.json());
const posts = await fetch('/api/posts').then(r => r.json());
return { user, posts };
};

Solution

1. Step 1: Understand async/await usage for data fetching

   To get JSON data, you must await fetch and then await res.json() or chain with then.

2. Step 2: Analyze each option's correctness

   export const loader = async () => { const user = await fetch('/api/user').then(r => r.json()); const posts = await fetch('/api/posts').then(r => r.json()); return { user, posts }; }; correctly awaits both fetches and parses JSON before returning. export const loader = () => { const user = fetch('/api/user').then(r => r.json()); const posts = fetch('/api/posts').then(r => r.json()); return { user, posts }; }; returns unresolved Promises. export const loader = async () => { const user = fetch('/api/user').then(r => r.json()); const posts = fetch('/api/posts').then(r => r.json()); return { user, posts }; }; returns Promises inside an async function without awaiting. export const loader = async () => { const user = await fetch('/api/user'); const posts = await fetch('/api/posts'); return { user, posts }; }; returns Response objects, not JSON data.

3. Final Answer:

   export const loader = async () => { const user = await fetch('/api/user').then(r => r.json()); const posts = await fetch('/api/posts').then(r => r.json()); return { user, posts }; }; -> Option D

4. Quick Check:

   Await fetch and parse JSON before return [OK]

Hint: Await fetch and parse JSON before returning data [OK]

Common Mistakes:

• Returning Promises instead of resolved data
• Not parsing JSON from fetch response
• Returning Response objects instead of JSON