Reading data - loader functions

We are now ready to read data from the database using Prisma and Remix.

Let’s get started!

Start the development server

Start the development server by running the following command in your terminal:

npm run dev

You should see the landing page of our application:

Finding our code

How can we work out where this page is coming from?

The easiest way is to simply copy the ‘Hello Gamelogger’ text and search for it in the codebase. Let’s do that now.

1. Copy the text ‘Hello Gamelogger’ from your browser window.

2. In VS Code, press CTRL + Shift + F to open the project search bar, or click the magnifying glass icon at the top left of your screen.

   Paste the text you copied into the search bar.

3. Press Enter to search for the text.

4. Should see an exerpt of code from the app/routes/index.tsx file.

   Click on the file name to open the code in your editor.

   

Challenge

Can you update the text in the index.tsx file to say ‘Hello, world!’ instead of ‘Hello Gamelogger’?

Once you have, save the file and refresh the page in your browser to see the changes.

This is how we can change the page content in Remix.

Let’s now move on to reading data from the database.

Fetch data from the database

We now need to fetch the games from the database and display them on the page.

We will do this by adding a Remix loader function to the _index.tsx file:

app/routes/_index.tsx

import { PrismaClient } from '@prisma/client'
import { json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import type { MetaFunction } from "@remix-run/node";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export async function loader() {
  const prisma = new PrismaClient()

  const games = await prisma.game.findMany()

  return json({ games })
}

export default function Index() {
  const { games } = useLoaderData<typeof loader>()

  console.log({ games })

  return (
    <div className="flex items-center justify-center min-h-screen">
      <h1 className="text-4xl font-bold">Hello, world!</h1>
    </div>
  );
}

Save these changes, then head over to your browser and refresh the page.

Right-click on the page, choose ‘Inspect’ and check the ‘Console’ tab.

You should see the game we have loaded from the database displayed in the console:

This is great!

It means that we have successfully loaded data from the server, and passed this across to the client. And all in a single file! 😎

Info

What is a loader function?

Client vs. server code

Traditionally, React components are executed in the client, or in other words, the user’s browser. This is fine for a lot of web work, but the problem is that database information can only be accessed on the server.

The makers of Remix got around this problem by introducing loader functions.

Accessing server data with loader functions

All .tsx files inside the routes folder are known as route files in Remix.

If a loader function is exported from a route file, Remix will run this code on the server before the user interface (UI) is rendered.

This ensures that any required data is accessed and processed before the UI is presented by the browser.

Look closely at the flow of data in the following diagram:

In the example shown here, the loader function is getting articles from a database and returning them as JSON data.

This data is then accessed by the LandingPage component using the useLoaderData hook.

The articles are then passed to an ArticleLinks component which React renders, along with the rest of the UI, to the user’s screen.

Tip

You can learn more about loader functions via the Remix docs.

In our case, we want to use the games data to render a list of games on the page.

We will do this in the next section.