Fetch article data

In this guide, you will fetch and display article data in the single article page.

Challenge

Fetch article data

Using your knowledge from our previous lesson on how to load and display articles for the news index page, can you fetch and display the article data for the single article page?

Your Prisma query should fetch a single article based on the articleId parameter from the URL.

It should select the following fields:

• id
• title
• content
• category (name only)
• owner (name only`)
• images (id only)

For the time being, just display the article title on the screen. We will look at displaying the article content in the next tutorial.

Tips

• In this case you will need to research and find out how to use Prisma’s findUnique() function to fetch a single article.

• You can use the articleId parameter from the URL to fetch the article data.

• What will you show on the screen if the article is not found? How will you handle this in the code?

Solution

1. Create a Prisma query

1. Open the file at app/routes/article.$articleId.tsx.

2. At the top of your file, import the invariant package and the Prisma client:

app/routes/article.$articleId.tsx

import { invariant } from '@epic-web/invariant'
import { type LoaderFunctionArgs, json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { prisma } from '~/utils/db.server.ts'

3. Add your query inside the loader function.

   Remember to return the article object from the query, rather than the old articleId:

app/routes/article.$articleId.tsx

import { invariant } from '@epic-web/invariant'
import { type LoaderFunctionArgs, json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { prisma } from '~/utils/db.server.ts'

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

  invariant(typeof articleId === 'string', 'No article ID provided')

  // Fetch the article by ID
  const article = await prisma.article.findUnique({
    where: { id: articleId },
    select: {
      id: true,
      title: true,
      content: true,
      category: { select: { name: true } },
      owner: { select: { name: true } },
      images: { select: { id: true } },
    },
  })

  return json({ article })
  return json({ articleId })
}

export default function ArticlePage() {
  const { articleId } = useLoaderData<typeof loader>()

  return (
    <div className="container py-16">
      <h2 className="pb-8 text-h2">My amazing news article</h2>

      <p>Article ID: {articleId}</p>
    </div>
  )
}

1. Create Prisma Query

2. User Interface update

Add the code below to display the article title, and a fallback message if no article is found:

app/routes/article.$articleId.tsx

import { invariant } from '@epic-web/invariant'
import { type LoaderFunctionArgs, json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { prisma } from '~/utils/db.server.ts'

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

  invariant(typeof articleId === 'string', 'No article ID provided')

  // Fetch the article by ID
  const article = await prisma.article.findUnique({
    where: { id: articleId },
    select: {
      id: true,
      title: true,
      content: true,
      category: { select: { name: true } },
      owner: { select: { name: true } },
      images: { select: { id: true } },
    },
  })

  return json({ article })
}

const ArticleNotFound = () => {
  return (
    <div className="container flex h-full flex-1 flex-col items-center justify-center">
      <h2 className="pb-8 text-center text-h2">No article found 🤔</h2>
      <p className="text-center text-xl">
        Please check the article ID in your browser and try again.
      </p>
    </div>
  )
}

export default function ArticlePage() {
  const { article } = useLoaderData<typeof loader>()

  return article ? (
    <div className="container py-16">
      <h2 className="pb-8 text-h2">{article.title}</h2>
    </div>
  ) : (
    <ArticleNotFound />
  )
}

Ternary operator

The only new(-ish) feature of this code is the ternary operator in the final return statement.

We’ve used ternary operators before, but not in this way.

Here, we’re checking if the entire article is truthy (i.e. is it an actual object - in which case we found a matching article - or is it null - in which case we didn’t?).

If it is, we render the article title. If it’s not, we render the ArticleNotFound component.

export default function ArticlePage() {
  const { article } = useLoaderData<typeof loader>()

  return article ? (
    <div className="container py-16">
      <h2 className="pb-8 text-h2">{article.title}</h2>
    </div>
  ) : (
    <ArticleNotFound />
  )
}

2. User interface update

Summary

In this tutorial, we have:

• Created a Prisma query to fetch a single article.
• Updated the single article page to fetch and display the article data.
• Added a simple error message if the article is not found.

Assignment

📄 Assignment documentation

We need to update your assignment to document this new feature. 🚀

1. How did you fetch the article data in the single article page?
2. What did you show on the screen if the article was not found? How did you handle this in the code?

Tip

Useful links

• Remix loader functions
• Remix useLoaderData hook
• JavaScript ternary operator

What’s next?

In the next guide, we’ll display and style the article content on the single article page.