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.

Note

We created this route in a previous tutorial looking at nested routes.

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

app/routes/news.$category

import { invariant } from '@epic-web/invariant'
import { type LoaderFunctionArgs, data, useLoaderData } from 'react-router'
import { toTitleCase } from '~/utils/stringUtils.ts'

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

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

  return data({ categoryTitle })
}

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

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

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

      <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
        <WireframeBlock />
        <WireframeBlock />
        <WireframeBlock />
        <WireframeBlock />
        <WireframeBlock />
        <WireframeBlock />
        <WireframeBlock />
        <WireframeBlock />
        <WireframeBlock />
        <WireframeBlock />
      </div>
    </div>
  )
}

Note

As a quick reminder, it is responsible for:

1. Reading the category value from the URL using the params object.
2. Converting the category value to title case using the toTitleCase function.
3. Returning the categoryTitle value to the frontend using the data function.

Import the prisma client

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

app/routes/news.$category.tsx

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

Note

What is a ‘Prisma Client’?

The Prisma Client is used to query your database and perform CRUD (create, read, update, delete) operations.

It allows us to interact with the database using JavaScript.

Furthermore, it is ‘type-safe’, meaning that it knows what data types are expected in the database and can provide type hints and autocompletion in your code editor.

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:

app/routes/news.$category.tsx

import { invariant } from '@epic-web/invariant'
import { type LoaderFunctionArgs, data, useLoaderData } from 'react-router'
import { toTitleCase } from '~/utils/stringUtils'
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 data({ categoryTitle, allArticles })
}

Note

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.

1. Firstly, (if you still have them), delete the WireframeBlock components from the page, as we don’t need them anymore:

   app/routes/news.$category.tsx

   import { invariant } from '@epic-web/invariant'
   import { type LoaderFunctionArgs, data, useLoaderData } from 'react-router'
   import { prisma } from '~/utils/db.server.ts'
   import { toTitleCase } from '~/utils/stringUtils.ts'
   
   export async function loader({ params }: LoaderFunctionArgs) {
     const { category } = params
   
     invariant(typeof category === 'string', 'Category not found')
     const categoryTitle = toTitleCase(category)
   
     const allArticles = await prisma.article.findMany({
       select: {
         id: true,
         title: true,
         category: { select: { name: true } },
         images: { select: { id: true } },
       },
     })
   
     return data({ categoryTitle, allArticles })
   }
   
   const WireframeBlock = () => {
     return (
       <div className="h-72 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700" />
     )
   }
   
   export default function NewsCategoryPage() {
     const { categoryTitle } = useLoaderData<typeof loader>()
   
     return (
       <div className="container py-16">
         <h2 className="mb-8 text-h2">{categoryTitle}</h2>
   
         <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
           <WireframeBlock />
           <WireframeBlock />
           <WireframeBlock />
           <WireframeBlock />
           <WireframeBlock />
           <WireframeBlock />
           <WireframeBlock />
           <WireframeBlock />
           <WireframeBlock />
           <WireframeBlock />
         </div>
       </div>
     )
   }

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

   Note

   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.

   Let’s use the map function to loop through the allArticles array and render a div for each article:

   app/routes/news.$category.tsx

   import { invariant } from '@epic-web/invariant'
   import { type LoaderFunctionArgs, data, useLoaderData } from 'react-router'
   import { prisma } from '~/utils/db.server.ts'
   import { toTitleCase } from '~/utils/stringUtils.ts'
   
   export async function loader({ params }: LoaderFunctionArgs) {
     const { category } = params
   
     invariant(typeof category === 'string', 'Category not found')
     const categoryTitle = toTitleCase(category)
   
     const allArticles = await prisma.article.findMany({
       select: {
         id: true,
         title: true,
         category: { select: { name: true } },
         images: { select: { id: true } },
       },
     })
   
     return data({ categoryTitle, allArticles })
   }
   
   export default function NewsCategoryPage() {
     const { categoryTitle, allArticles } = useLoaderData<typeof loader>()
   
     return (
       <div className="container py-16">
         <h2 className="mb-8 text-h2">{categoryTitle}</h2>
   
         <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
           {allArticles.map(article => (
             <div key={article.id}>
               <h3>{article.title}</h3>
               <p>{article.category?.name || 'General News'}</p>
             </div>
           ))}
         </div>
       </div>
     )
   }

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

   

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

   app/routes/news.$category.tsx

   import { invariant } from '@epic-web/invariant'
   import { type LoaderFunctionArgs, data, useLoaderData } from 'react-router'
   import { prisma } from '~/utils/db.server.ts'
   import { toTitleCase } from '~/utils/stringUtils.ts'
   
   export async function loader({ params }: LoaderFunctionArgs) {
     const { category } = params
   
     invariant(typeof category === 'string', 'Category not found')
     const categoryTitle = toTitleCase(category)
   
     const allArticles = await prisma.article.findMany({
       select: {
         id: true,
         title: true,
         category: { select: { name: true } },
         images: { select: { id: true } },
       },
     })
   
     return data({ categoryTitle, allArticles })
   }
   
   export default function NewsCategoryPage() {
     const { categoryTitle, allArticles } = useLoaderData<typeof loader>()
   
     return (
       <div className="container py-16">
         <h2 className="mb-8 text-h2">{categoryTitle}</h2>
   
         <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
           {allArticles.map(article => (
             <div key={article.id} className="bg-red-900 p-4">
               <h3>{article.title}</h3>
               <p>{article.category?.name || 'General News'}</p>
             </div>
           ))}
         </div>
       </div>
     )
   }

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

   

Challenge

Challenge

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 new file called ArticleCard.tsx in the components/organisms folder:

• Inside this file, create a new component called ArticleCard that you can reuse for each article summary:

  • It should take the title and category as props.

Note

If you are still getting comfortable with React components, watch and complete the challenges in the following sequence of Scrimba tutorials first:

• Reusable Components
• JS in JSX
• Create a contact component
• Passing data into a component
• Receiving props in a component

• Use the ArticleCard component inside a map function to render each article, so that your final code looks like this:

app/routes/news.$category.tsx

import { invariant } from '@epic-web/invariant'
import { type LoaderFunctionArgs, data, useLoaderData } from 'react-router'
import ArticleCard from '~/components/organisms/ArticleCard.tsx'
import { prisma } from '~/utils/db.server.ts'
import { toTitleCase } from '~/utils/stringUtils.ts'

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

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

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

  return data({ categoryTitle, allArticles })
}

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

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

      <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
        {filteredArticles.map(article => (
          <ArticleCard
            key={article.id}
            title={article.title}
            category={article.category?.name}
            objectKey={article.images[0]?.objectKey}
          />
        ))}
      </div>
    </div>
  )
}

Note

You can learn more about using the .map function in React in the following Scrimba tutorials:

• React can render arrays
• Mapping components

Solution

app/components/organisms/ArticleCard.tsx

interface ArticleCardProps {
  title: string
  category?: string
}

export default function ArticleCard({ title, category }: ArticleCardProps) {
  return (
    <div className="bg-red-900 p-4">
      <h3>{title}</h3>
      <p>{category || 'General News'}</p>
    </div>
  )
}

app/routes/news.$category.tsx

import { invariant } from '@epic-web/invariant'
import { type LoaderFunctionArgs, data, useLoaderData } from 'react-router'
import ArticleCard from '#app/components/organisms/ArticleCard.tsx'
import { prisma } from '~/utils/db.server.ts'
import { toTitleCase } from '~/utils/stringUtils.ts'

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

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

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

  return data({ categoryTitle, allArticles })
}

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

  return (
    <div className="container py-16">
      <h2 className="text-h2">{categoryTitle}</h2>
      <div className="mt-8 grid gap-6 md:grid-cols-3 lg:grid-cols-5">
        {allArticles.map((article) => (
          <ArticleCard
            key={article.id}
            title={article.title}
            category={article.category?.name}
          />
        ))}
      </div>
    </div>
  )
}

ArticleCard.tsx

🚀🚀 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:

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.