Como nós faríamos para mostrar também o gênero do jogo e não apenas a imagem e o título na página de detalhamento?

[emersonbroga]

Como nós faríamos para mostrar também o gênero do jogo e não apenas a imagem e o título na página de detalhamento?

Eu tentei fazer alguma coisa aqui, mas não funcionou. Provavelmente por que o gênero vem de outra tabela?

Eu tinha pensado em qualquer coisa assim lá no modelo:

async function main() {
  const games = await prisma.games.findOne({
    include: {
      genres: true,
    },
  })
}

e depois na page, algo assim:

{
  games.data.map ((game) => {
    return (
      <div key={game.id}>{game.image} - {game.title} - {game.genre} </div>
    )
  })
}

Mas não deu certo.

[emersonbroga]

Ótima pergunta Douglas, vamos lá...

Primeiramente tenho que falar que o seu raciocínio foi muito correto, seria necessário apenas o { include: genres: true }, porém como estamos trabalhando com um relacionamento many-to-many, esse genres true, vai trazer apenas os dados da tabela GameGenre que são apenas gameId e o genreId.

Para incluir os registros dos próprios gêneros, você deve ir um passo a mais e colocar da seguinte forma { include: { genres: { include: { genre: true } } } }, conforme mostrado aqui

const record = await prisma.games.findUnique({
  where,
  include: { genres: { include: { genre: true } } },
});

Aí vc terá o resultado no seguinte formato:

{
  "id": 10,
  "slug": "all-star-baseball-2001",
  "title": "All-Star Baseball 2001",
  "year": 2000,
  "image": "bd099431-4f3c-4c64-a1d5-4ba76b1714c7-all-star-baseball-2001.png",
  "link": "https://en.wikipedia.org/wiki/All-Star_Baseball_2001",
  "platform": "Nintendo 64",
  "createdAt": "2024-06-13T14:25:01.677Z",
  "updatedAt": "2024-06-13T14:25:01.677Z",
  "genres": [
    {
      "gameId": 10,
      "genreId": 3,
      "genre": {
        "id": 3,
        "slug": "sports",
        "title": "Sports",
        "createdAt": "2024-06-13T14:25:01.671Z",
        "updatedAt": "2024-06-13T14:25:01.671Z"
      }
    },
    {
      "gameId": 10,
      "genreId": 13,
      "genre": {
        "id": 13,
        "slug": "baseball",
        "title": "Baseball",
        "createdAt": "2024-06-13T14:25:01.676Z",
        "updatedAt": "2024-06-13T14:25:01.676Z"
      }
    }
  ]
}

e a exibição na pagina de detalhe ficaria da seguinte forma:

{game.genres.map((item) => {
    return (
      <span key={item.genre.id}>
        {item.genre.title}
      </span>
    );
})}