Database integration patterns in Remix - Mini Project: Build & Apply

Database integration patterns

📖 Scenario: You are building a simple web app using Remix Framework that shows a list of books from a database.We will create the data setup, configure a database connection, fetch data using a loader function, and finally display the books in a React component.

🎯 Goal: Build a Remix route that connects to a database, fetches a list of books, and displays them on the page.

📋 What You'll Learn

Create a mock database array of book objects

Add a configuration variable for database connection string

Write a loader function to fetch books from the database

Render the list of books in the default export React component

💡 Why This Matters

🌍 Real World

Web apps often need to fetch data from databases and show it on pages. Remix uses loader functions to get data before rendering.

💼 Career

Understanding how to integrate databases with Remix is important for building full-stack React apps and working in modern web development roles.

1

DATA SETUP: Create a mock database array

Create a constant called books that is an array of objects. Each object should have id, title, and author properties. Use these exact entries: { id: 1, title: 'The Hobbit', author: 'J.R.R. Tolkien' }, { id: 2, title: '1984', author: 'George Orwell' }, { id: 3, title: 'Pride and Prejudice', author: 'Jane Austen' }.

Remix

// Create the books array with 3 book objects
// Your code here

Hint

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

2

CONFIGURATION: Add a database connection string

Create a constant called DATABASE_URL and set it to the string 'postgresql://user:password@localhost:5432/mydb'.

Remix

const books = [
  { id: 1, title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { id: 2, title: '1984', author: 'George Orwell' },
  { id: 3, title: 'Pride and Prejudice', author: 'Jane Austen' }
];

// Add the DATABASE_URL constant below
// Your code here

Hint

Use const DATABASE_URL = 'postgresql://user:password@localhost:5432/mydb'.

3

CORE LOGIC: Write a loader function to fetch books

Write an async function called loader that returns an object with a books property set to the books array.

Remix

const books = [
  { id: 1, title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { id: 2, title: '1984', author: 'George Orwell' },
  { id: 3, title: 'Pride and Prejudice', author: 'Jane Austen' }
];

const DATABASE_URL = 'postgresql://user:password@localhost:5432/mydb';

// Write the loader function below
// Your code here

Hint

Use export async function loader() { return { books }; }.

4

COMPLETION: Render the books list in the default component

Create a default export React functional component called Books that uses useLoaderData from @remix-run/react to get books and renders an unordered list. Each list item should show the book's title and author.

Remix

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

const books = [
  { id: 1, title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { id: 2, title: '1984', author: 'George Orwell' },
  { id: 3, title: 'Pride and Prejudice', author: 'Jane Austen' }
];

const DATABASE_URL = 'postgresql://user:password@localhost:5432/mydb';

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

// Create the default export React component below
// Your code here

Hint

Use useLoaderData() to get books and map over them inside a <ul>.

Practice

1. In Remix, which function is primarily used to fetch data from a database before rendering a page?

easy

A. componentDidMount

B. action

C. useEffect

D. loader

Solution

1. Step 1: Understand Remix data fetching

   Remix uses loader functions to fetch data on the server before rendering.

2. Step 2: Differentiate from actions and React lifecycle

   action handles data updates, useEffect and componentDidMount are React client hooks, not Remix server loaders.

3. Final Answer:

   loader -> Option D

4. Quick Check:

   Data fetching = loader [OK]

Hint: Load data with loader, update with action [OK]

Common Mistakes:

• Confusing loader with action
• Using React hooks for server data fetching
• Thinking componentDidMount runs on server

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

easy

A. export const loader = async () => { return fetchData(); }

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

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

D. const loader = () => fetchData();

Solution

1. Step 1: Identify correct export style

   Remix expects named exports for loaders, commonly as async arrow functions.

2. Step 2: Check each option

   A uses default export, incorrect for Remix loaders; B declares function then exports as default, also incorrect; C exports named async arrow function, correct Remix pattern; D lacks export keyword.

3. Final Answer:

   export const loader = async () => { return fetchData(); } -> Option A

4. Quick Check:

   Named async export = export const loader = async () => { return fetchData(); } [OK]

Hint: Use named async exports for loaders in Remix [OK]

Common Mistakes:

• Using default export instead of named export
• Forgetting async keyword for async data fetching
• Not exporting the loader function

3. Given this Remix loader code snippet, what will be the returned JSON data?

export const loader = async () => {
  const users = await db.user.findMany({ where: { active: true } });
  return { users };
};

medium

A. An error because 'findMany' is not a valid method

B. An object with a key 'users' containing an array of active user records

C. A stringified JSON of users without filtering

D. An array of all users including inactive ones

Solution

1. Step 1: Understand the query filter

   The query uses where: { active: true } to get only active users.

2. Step 2: Analyze the returned data structure

   The loader returns an object with key users holding the array of filtered user records.

3. Final Answer:

   An object with a key 'users' containing an array of active user records -> Option B

4. Quick Check:

   Filtered query returns object with users array [OK]

Hint: Filters in where limit results; output matches filtered data [OK]

Common Mistakes:

• Assuming all users are returned without filter
• Confusing returned object with just array
• Thinking findMany is invalid

4. Identify the error in this Remix action function that tries to insert a new user into the database:

export const action = async ({ request }) => {
  const formData = await request.formData();
  const name = formData.get('name');
  await db.user.create({ data: { name } });
  return redirect('/users');
};

medium

A. Missing import of redirect from Remix

B. Using formData.get instead of formData.post

C. Not awaiting the redirect call

D. Incorrect method db.user.create should be db.user.insert

Solution

1. Step 1: Check Remix imports

   The redirect function must be imported from Remix to be used.

2. Step 2: Validate other code parts

   formData.get is correct to get form values; redirect is synchronous; db.user.create is valid Prisma method.

3. Final Answer:

   Missing import of redirect from Remix -> Option A

4. Quick Check:

   Always import redirect before use [OK]

Hint: Check imports for Remix helpers like redirect [OK]

Common Mistakes:

• Forgetting to import redirect
• Confusing formData methods
• Misnaming Prisma methods

5. You want to fetch a list of posts and their authors in a Remix loader using Prisma. Which pattern correctly fetches posts with author data included?

hard

A. await db.post.findMany({ select: { authorId: true } })

B. await db.post.findMany({ where: { author: true } })

C. await db.post.findMany({ include: { author: true } })

D. await db.post.findMany({ include: { authorId: true } })

Solution

1. Step 1: Understand Prisma include syntax

   To fetch related data, use include with the related model name set to true.

2. Step 2: Evaluate each option

   B correctly includes author data; A only selects authorId, not full author; C misuses where for inclusion; D tries to include a field, not a relation.

3. Final Answer:

   await db.post.findMany({ include: { author: true } }) -> Option C

4. Quick Check:

   Use include to fetch related models [OK]

Hint: Use include with relation name to fetch related data [OK]

Common Mistakes:

• Using where instead of include for relations
• Selecting foreign keys instead of related objects
• Including fields instead of relations