upvotes 일대다 관계를 생성하는 Prisma

현재 list of Spotify playlists 에 추가할 수 있는 애플리케이션용 Postgres database through Prisma 이 있습니다.

이 기사에서는 이 믹스에 upvotes 모델을 추가할 것입니다. 이 upvotes 모델은 사용자에게 재생 목록에 대한 투표를 추가할 수 있는 옵션을 제공해야 합니다.

애플리케이션에 사용자 테이블이 없으므로 고유한 이메일을 사용하여 찬성 투표를 제출합니다.

따라하고 싶다면 다음GitHub branch을 시작점으로 삼으십시오.

스키마 생성

Prisma 파일에 upvote 스키마를 추가하여 시작하겠습니다. 이렇게 하려면 prisma/prisma.schema 파일을 열고 다음 모델을 추가합니다.

model Upvote {
  id            Int      @id @default(autoincrement())
  playlist      Playlist @relation(fields: [playlistId], references: [id])
  playlistId    Int
  votedBy       String
}

또한 재생 목록 측에서 관계를 정의해야 하므로 거기에 upvotes 배열을 추가합니다.

model Playlist {
  id           Int @default(autoincrement()) @id
  title        String
  image        String?
  uri          String @unique
  addedBy      String
  upvotes      Upvote[]
}

이제 새로운 데이터베이스 구조를 구축할 차례입니다.

npx prisma db push

각 데이터베이스 수정 후 로컬 클라이언트를 최신 상태로 유지하려면 다음 명령을 실행해야 합니다.

npx prisma generate

찬성 버튼 만들기

내 아이디어는 로그인한 사람들에게만 찬성 버튼을 표시하는 것입니다.
익명 사용자가 재생 목록을 탐색하는 것은 괜찮지만 찬성 투표를 해서는 안 됩니다.

따라서 pages/index.js 파일을 열고 세션을 페이지에 추가하십시오.

const Index = ({ playlists }) => {
  const { data: session } = useSession();

    // Rest of page 
}

그런 다음 재생 목록 제목이 처음 있었던 곳에서 이제 새 버튼을 확장하고 소개합니다.

<div className='m-4'>
    <h3 className='text-2xl '>{playlist.title}</h3>
    {session && (
      <button
        className='block mt-4 underline'
        onClick={() => upvote(playlist.id)}
      >
        Upvote playlist)
      </button>
    )}
</div>

Note: I also only made the image clickable in the new version.

이 버튼은 활성 세션이 있는 사용자에게만 표시됩니다.
클릭하면 upvote 함수를 호출하고 해당 재생 목록 ID를 전달합니다.

이 upvote 함수를 만들어 봅시다.

const upvote = async (playlistId) => {
    const res = await fetch('api/upvotes', {
      method: 'POST',
      body: JSON.stringify({ playlistId: playlistId }),
    });
    const data = await res.json();
};

보시다시피 이것은 upvotes 라는 새 API 엔드포인트를 호출합니다. 게시를 수행하고 재생 목록 ID를 개체로 전달합니다.

우리는 반환 데이터를 사용하지 않지만 나중에 이를 사용하여 실시간으로 투표를 추가할 수 있습니다.

업보트 게시를 위한 API 엔드포인트 생성

이제 upvotes.js 폴더에 pages/api라는 새 파일을 만듭니다.

대략적인 구조는 다음과 같습니다.

import { getSession } from 'next-auth/react';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

const handler = async (req, res) => {
  const {
    token: { email },
  } = await getSession({ req });
  if (req.method === 'POST') {
    // POST REQUEST
  }
  res.end();
};

export default handler;

이POST 캡처 내부에서 마법을 부리고 새로운 찬성 투표를 만들 수 있습니다.

const { body } = req;
const upvote = { ...JSON.parse(body), votedBy: email };
const vote = await prisma.upvote.create({
  data: upvote,
});
return res.status(200).json(vote);

보시다시피 playlistId(본문)를 사용자를 나타내는 votedBy 개체와 결합합니다.
그런 다음 upvotes 모델에서 create 함수를 호출합니다.

이제 코드를 실행하고 버튼 중 하나를 클릭하면 데이터베이스에서 upvote를 볼 수 있습니다.



이것으로 우리는 이 글을 마칩니다. 이제 Prisma 클라이언트를 통해 일대다 관계를 만들 수 있습니다.

GitHub에서 전체 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나