I have a server-side component getting an id from the url query string to fetch data before displaying it. Everything works, but the request failure handling looks off. I'm just not sure what to put instead.

I first request pokémon because I figured out there's no point in fetching species data if I don't have a pokémon.

import React from 'react';

async function Details({ params }: { params: { id: string } }) {
  const id = Number(params.id);

  // request pokémon + species data by id
  const pokemon = await prismadb.pokemon.findUnique({
    // params.id is guaranteed to be parsed into a valid number
    where: { id },

  if (pokemon === null) {
    return <div>Missing pokémon data</div>;

  const species = await prismadb.species.findUnique({
    // pokémon and species share the same id
    where: { id },

  if (species === null) {
    return <div>Missing species data</div>;

  return (
    // bunch of JSX


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.