Load and display article data

Introduction

We are now ready to load articles from the database and display them on the page.

To do this, we will use the prisma client to fetch all articles from the database first.

Updating the `loader` function

Open app/routes/news.$category.tsx.

Take a look at the loader function that we created in this file, and take a moment to remind yourself what it does:

1
import { invariant } from '@epic-web/invariant'
2
import { type LoaderFunctionArgs, json } from '@remix-run/node'
3
import { useLoaderData } from '@remix-run/react'
4
import { toTitleCase } from '~/utils/stringUtils.ts'
5

6
export async function loader({ params }: LoaderFunctionArgs) {
7
  const { category } = params
8

9
  invariant(typeof category === 'string', 'Category not found')
10
  const categoryTitle = toTitleCase(category)
11

12
  return json({ categoryTitle })
13
}
14

15
const WireframeBlock = () => {
16
  return (
17
    <div className="h-72 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700" />
18
  )
19
}
20

21
export default function NewsCategoryPage() {
22
  const { categoryTitle } = useLoaderData<typeof loader>()
23

24
  return (
16 collapsed lines
25
    <div className="container py-16">
26
      <h2 className="mb-8 text-h2">{categoryTitle}</h2>
27

28
      <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
29
        <WireframeBlock />
30
        <WireframeBlock />
31
        <WireframeBlock />
32
        <WireframeBlock />
33
        <WireframeBlock />
34
        <WireframeBlock />
35
        <WireframeBlock />
36
        <WireframeBlock />
37
        <WireframeBlock />
38
        <WireframeBlock />
39
      </div>
40
    </div>
41
  )
42
}

Import the `prisma` client

Add an import to the prisma client at the top of the file:

import { invariant } from '@epic-web/invariant'
import { json, type LoaderFunctionArgs } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import techIcon from '~/assets/png/news-categories/tech-logo@2x.png'
import { prisma } from '~/utils/db.server.ts'

Fetch all database articles

Next, let’s fetch all articles from the database using the prisma client inside the loader function, and then export them as JSON:

5 collapsed lines
import { invariant } from '@epic-web/invariant'
import { json, type LoaderFunctionArgs } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { toTitleCase } from '~/utils/stringUtils'
import siteLogo from '~/assets/png/epic-news-logo@2x.png'
import techIcon from '~/assets/png/tech-logo@2x.png'
import { prisma } from '~/utils/db.server.ts'

export async function loader({ params }: LoaderFunctionArgs) {
  const { category } = params

  invariant(typeof category === 'string', 'No category provided')
  const categoryTitle = toTitleCase(category)

  const allArticles = await prisma.article.findMany({
    select: {
      id: true,
      title: true,
      category: { select: { name: true } },
      images: { select: { id: true } },
    },
  })

  return json({ categoryTitle, allArticles })
}

Understanding the `select` option

The select option is used to specify which fields from each record to include in the query result.

  const allArticles = await prisma.article.findMany({
    select: {
      id: true,
      title: true,
      category: { select: { name: true } },
      images: { select: { id: true } },
    },
  })

In this case, we are fetching the id, title, category, and images fields from the article table.

We don’t need the content of each article as this is just an index page, so we are only fetching the fields that we need.

Display article data

Now that we have fetched all the articles from the database, let’s display them on the page.

At first, we will just display the title and category of each article within the grid that we populated with wireframe blocks earlier.

Firstly, delete the WireframeBlock components from the page, as we don’t need them anymore:


23 collapsed lines
1
import { invariant } from '@epic-web/invariant'
2
import { type LoaderFunctionArgs, json } from '@remix-run/node'
3
import { useLoaderData } from '@remix-run/react'
4
import { prisma } from '~/utils/db.server.ts'
5
import { toTitleCase } from '~/utils/stringUtils.ts'
6

7
export async function loader({ params }: LoaderFunctionArgs) {
8
  const { category } = params
9

10
  invariant(typeof category === 'string', 'Category not found')
11
  const categoryTitle = toTitleCase(category)
12

13
  const allArticles = await prisma.article.findMany({
14
    select: {
15
      id: true,
16
      title: true,
17
      category: { select: { name: true } },
18
      images: { select: { id: true } },
19
    },
20
  })
21

22
  return json({ categoryTitle, allArticles })
23
}
24

25
const WireframeBlock = () => {
26
  return (
27
    <div className="h-72 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700" />
28
  )
29
}
30

31
export default function NewsCategoryPage() {
32
  const { categoryTitle } = useLoaderData<typeof loader>()
33

34
  return (
35
    <div className="container py-16">
36
      <h2 className="mb-8 text-h2">{categoryTitle}</h2>
37

38
      <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
39
        <WireframeBlock />
40
        <WireframeBlock />
41
        <WireframeBlock />
42
        <WireframeBlock />
43
        <WireframeBlock />
44
        <WireframeBlock />
45
        <WireframeBlock />
46
        <WireframeBlock />
47
        <WireframeBlock />
48
        <WireframeBlock />
49
      </div>
50
    </div>
51
  )
52
}

Next, we will return allArticles from the useLoaderData function that we now have access to, and loop through the articles using a map function.

The `map` function

The map function in JavaScript is used regularly in React.

It allows us to loop through an array and apply a function to each element, returning a new array with the results.

Let’s quickly see how the map function works with a simple JavaScript example.

const numbers = [1, 2, 3];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // -> [2, 4, 6]
console.log(numbers); // -> [1, 2, 3]

In this example, we have an array of numbers.

We use the map function to loop through each number and multiply it by 2. The result is a new array with the doubled numbers.

In React, we can use the map function to loop through an array of data and render components for each item.


23 collapsed lines
1
import { invariant } from '@epic-web/invariant'
2
import { type LoaderFunctionArgs, json } from '@remix-run/node'
3
import { useLoaderData } from '@remix-run/react'
4
import { prisma } from '~/utils/db.server.ts'
5
import { toTitleCase } from '~/utils/stringUtils.ts'
6

7
export async function loader({ params }: LoaderFunctionArgs) {
8
  const { category } = params
9

10
  invariant(typeof category === 'string', 'Category not found')
11
  const categoryTitle = toTitleCase(category)
12

13
  const allArticles = await prisma.article.findMany({
14
    select: {
15
      id: true,
16
      title: true,
17
      category: { select: { name: true } },
18
      images: { select: { id: true } },
19
    },
20
  })
21

22
  return json({ categoryTitle, allArticles })
23
}
24

25
export default function NewsCategoryPage() {
26
  const { categoryTitle, allArticles } = useLoaderData<typeof loader>()
27

28
  return (
29
    <div className="container py-16">
30
      <h2 className="mb-8 text-h2">{categoryTitle}</h2>
31

32
      <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
33
        {allArticles.map(article => (
34
          <div key={article.id}>
35
            <h3>{article.title}</h3>
36
            <p>{article.category?.name || 'General News'}</p>
37
          </div>
38
        ))}
39
      </div>
40
    </div>
41
  )
42
}

Save the file and check the browser to see the unstyled article data displayed on the page:

Let’s make them a little clearer by adding a background and some padding to each article ‘card’:


23 collapsed lines
1
import { invariant } from '@epic-web/invariant'
2
import { type LoaderFunctionArgs, json } from '@remix-run/node'
3
import { useLoaderData } from '@remix-run/react'
4
import { prisma } from '~/utils/db.server.ts'
5
import { toTitleCase } from '~/utils/stringUtils.ts'
6

7
export async function loader({ params }: LoaderFunctionArgs) {
8
  const { category } = params
9

10
  invariant(typeof category === 'string', 'Category not found')
11
  const categoryTitle = toTitleCase(category)
12

13
  const allArticles = await prisma.article.findMany({
14
    select: {
15
      id: true,
16
      title: true,
17
      category: { select: { name: true } },
18
      images: { select: { id: true } },
19
    },
20
  })
21

22
  return json({ categoryTitle, allArticles })
23
}
24

25
export default function NewsCategoryPage() {
26
  const { categoryTitle, allArticles } = useLoaderData<typeof loader>()
27

28
  return (
29
    <div className="container py-16">
30
      <h2 className="mb-8 text-h2">{categoryTitle}</h2>
31

32
      <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
33
        {allArticles.map(article => (
34
          <div className="bg-red-900 p-4" key={article.id}>
35
            <h3>{article.title}</h3>
36
            <p>{article.category?.name || 'General News'}</p>
37
          </div>
38
        ))}
39
      </div>
40
    </div>
41
  )
42
}

Save the file and check the browser to see the styled article data displayed on the page:

Style the article cards

Can you style the article cards to make them look more professional?

How you do this is up to you, but you could try:

Making each card the same height (hint)
Adding rounded corners to each card (hint)
Separating the title and category clearly through spacing and typography (hint)
Add a hover effect to each card (hint)
Truncating the article title if it is too long (hint)

🚀 Extra credit

Create a component called ArticleCard that you can reuse for each article. It should take the title and category as props.
You should create this component in a new file called ArticleCard.tsx in the components/organisms folder:
Use the ArticleCard component inside the map function to render each article, so that your final code looks like this:

1
import { invariant } from '@epic-web/invariant'
2
import { type LoaderFunctionArgs, json } from '@remix-run/node'
3
import { useLoaderData } from '@remix-run/react'
4
import ArticleCard from '~/components/organisms/ArticleCard.tsx'
5
import { prisma } from '~/utils/db.server.ts'
6
import { toTitleCase } from '~/utils/stringUtils.ts'
7

22 collapsed lines
8
export async function loader({ params }: LoaderFunctionArgs) {
9
  const { category } = params
10

11
  invariant(typeof category === 'string', 'Category not found')
12
  const categoryTitle = toTitleCase(category)
13

14
  const filteredArticles = await prisma.article.findMany({
15
    where: {
16
      category: {
17
        slug: category, // Retrieves only articles in the specified category
18
      },
19
    },
20
    select: {
21
      id: true,
22
      title: true,
23
      category: { select: { name: true } },
24
      images: { select: { id: true } },
25
    },
26
  })
27

28
  return json({ categoryTitle, filteredArticles })
29
}
30

31
export default function NewsCategoryPage() {
32
  const { categoryTitle, filteredArticles } = useLoaderData<typeof loader>()
33

34
  return (
35
    <div className="container py-16">
36
      <h2 className="mb-8 text-h2">{categoryTitle}</h2>
37

38
      <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
39
        {filteredArticles.map(article => (
40
          <ArticleCard
41
            key={article.id}
42
            title={article.title}
43
            category={article.category?.name}
44
            imageId={article.images[0]?.id}
45
          />
46
        ))}
47
      </div>
48
    </div>
49
  )
50
}

🚀🚀 Super extra credit (optional)

Having extracted your ArticleCard component, can you display an icon for each category next to the category name?
There is an NPM package installed in the project called React Icons, which you might use.
Alternatively, you can source the icons yourself, save them in the assets folder, and import them into your component.
You will also need to develop the logic to display the correct icon for each category.

Below is an idea for how the finished article cards might look in the browser, but feel free to implement your own design and interactions:

Styled article cards

Summary

In this guide, we learned how to:

Use the select option in Prisma to only return the fields we need from a database.
Load real articles from the database and display them on the page.
Loop through these real articles using JavaScript’s map function and display them on the page.
Style the article cards in line with your brand design.

In the next guide, we will learn how to filter articles by the correct category.