Server/client communication with useLoaderData

Introduction

In the previous step, we learned about route parameters and how to use them to create dynamic routes in Remix. We then accessed this data on the server using the loader function.

In this next step we will:

Pass the category value to our NewsCategoryPage component and display it on the page with the useLoaderData hook.
Fix a TypeScript error by using the invariant package to tell TypeScript that the categoryTitle value should always be a string.
Complete a challenge to create a wireframe layout for the NewsCategoryPage using Tailwind CSS.

Passing data to the page

With our previous step complete, we are now reading the category value from the URL 🎉. We can use this value to fetch the correct data for our page.

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

Update the loader function so it returns the category value in title-case as part of the data response.

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

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

  console.log({ category })
  const categoryTitle = toTitleCase(category)

  return data({})
  return data({ categoryTitle })
}

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

  return (
    <div className="container py-16">
      <h2 className="text-h2">Generic news category page</h2>
      <h2 className="text-h2">{categoryTitle}</h2>
    </div>
  )
}

Code review

That’s a lot of changes! Let’s break it down:

We’ve imported a new function called toTitleCase that takes a string and returns it in title-case format (in other words, with every first letter of a word capitalized).

So, the string technology would become Technology, reviews would become Reviews, and so on.
```
function toTitleCase(str: string) {
  return str
    .toLowerCase()
    .split('-')
    .map(function (word) {
      return word.charAt(0).toUpperCase() + word.slice(1)
    })
    .join(' ')
}
```

We the call the toTitleCase function inside the loader function to convert the category value to title-case.
We return the categoryTitle value as part of the data response.

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

  const categoryTitle = toTitleCase(category)

  return data({ categoryTitle })
}

We call Remix’s useLoaderData hook (which you will remember from a previous lesson) to pass the categoryTitle value into the NewsCategoryPage component on the browser.

  const { categoryTitle } = useLoaderData<typeof loader>()

We update the h2 tag to display the categoryTitle value.

    <h2 className="text-h2">{categoryTitle}</h2>

Checking the result

Now, head back to your browser and click the links between the different news categories again.

This time, you should see the title of the category displayed in every page, but we didn’t need to hard-code a separate file for every one 🎉:

Fixing TypeScript errors

Finally, let’s fix that TypeScript error we saw earlier.

We will do this using a package called Invariant. This package will help us to tell TypeScript that the categoryTitle value will always be a string.

First, import the package at the top of your news.$category.tsx file:

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

Next, inside your loader function, add the following check:


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

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

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

11
  return data({ categoryTitle })
12
}
13

14
export default function NewsCategoryPage() {
8 collapsed lines
15
  const { categoryTitle } = useLoaderData<typeof loader>()
16

17
  return (
18
    <div className="container py-16">
19
      <h2 className="text-h2">{categoryTitle}</h2>
20
    </div>
21
  )
22
}

As you can see, invariant is just a function that takes two arguments. The first argument is a condition that must be true for the overall code to continue.

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

However, if the condition is false, then the function will throw an error with the message provided in the second argument.

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

The red line has disappeared, and TypeScript now knows that categoryTitle will always be a string.

Summary

In this step, we:

Read server data from the loader function using the useLoaderData hook, and displayed it on the page.
Fixed a TypeScript error by using the invariant package to tell TypeScript that the categoryTitle value will always be a string.

📄 Assignment documentation

We need to update your assignment to document the new features added in this section. 🚀

1. The Remix Outlet component

Explain what the Outlet component is and how it is used in a Remix application.
Describe how the file naming conventions in Remix map to the URL paths in the browser.
Explain how to add new routes to a Remix application and how they are served from the correct URL paths.

Explain how to create a nested route in Remix, and how to render the child route in the parent route.
Show how to create navigation links between different routes in the app using the NavLink component.

3. Dynamic routes in Remix

Explain what route params are and how they can be used to create dynamic routes in Remix.
Describe how to add a loader function to a route file.
Show how to access route params using the loader function.

4. Server/client communication with useLoaderData

Describe how to pass data like the category param value from the loader function to the page component.
Show how to fix TypeScript errors using the invariant package.
Explain how to access server data in the browser using the useLoaderData hook.