challenges
August 8, 2024
[
Dev W rkshop
]

Next.js Data Fetching: Part 2

Workshops in this series

  1. Quotation endpoint
  2. Display fetched data
  3. Loading state
  4. Error state
  5. Custom hook
  6. Conditional rendering

Prerequisites

Workshop context

Before this workhsop

  • The previous workshop in this series created an endpoint that serves (for now) a random quotation.

This workshop

  • This workshop will use the Button and Card components and the endpoint to create a UI that displays a random quote.

After this workshop

  • The next workshop in this series will handle the loading state for fetching the quote.

Workshop goal

By the end of this workshop you should have the following:

  1. A button that, when clicked, contacts the route handler to fetch a random quotation.
    • note: the Home component (found in src/app/page.tsx) is the main component for this app. You can use Home as the parent component for the UI in this workshop.
    • JSX returned from the Home component will show up at the top level of the app.
  2. A Card that displays the returned quotation.
    • for now, you can choose whatever colors you want for the textColor and backgroundColor props; in the next series, we will generate colors appropriate to the quote using the OpenAI Node SDK
    • don’t worry about handling errors; we’ll take care of that in a future workshop
    • it’s fine to display the Card even if you haven’t received the quote from the server yet. We’ll improve the user experience in a future workshop.
  3. A Separator component that separates the Button and the Card.

Example UI after the button has been pressed and the response has been returned:

UI with a 'use random quote' button, a dotted horizontal line beneath that, and then a quotation beneath the dotted line

Hints

Hint 1 Create the button in the Home component using the Button component, with the “filled” variant.

You can import the Button component using the @ alias for the src directory, like this:

import Button from "@/components/Button";

Hint 2 Create a piece of state to store the results after you contact the server endpoint. You can declare the state like this:

const [quote, setQuote] = React.useState<string>();

(<string> specifies the type of the state value, for TypeScript)

Hint 3 The button onClick handler should run a fetch call to the server endpoint and set the quote state value with the result.

Hint 4 Because of the async nature of fetch , you’ll either need to await the fetch response, or use .then(). Same goes for the .json() method to extract the JSON from the response.

Here’s an example function that could serve as the value to onClick for the Button (using async / await):

const handleClick = async () => {
  const response = await fetch('/api/get-quote-styles');
  const json = await response.json();
  // expecting JSON to have a `quote` property,
  // based on the route handler from last workshop
  setQuote(json.quote); 
}

Hint 5 If you’re not sure what colors to use for the Card, try choosing from these named colors — say, aliceBlue for textColor and mediumBlue for backgroundColor.

Hint 6 If your app isn’t functioning the way you think it should be, there are two places to check for errors:

  1. the browser JavaScript console (for example, in Chrome ), for any errors that occur for the code running on the client
  2. the command-line where the server is running (where you ran npm run dev to start the server), for any errors that occur for the code running on the server

Resources

Go to solution and explanation