backend 기본 셋업 (2)

🍔 핵심 내용

 

🥑 prisma 설치 및 postgresql 연동

DB ORM prisma를 설치해주고, DB인 postgresql 설치 및 prisma와 연결해보자.

 

다시 설명하자면, ORM은 간접적으로 DB에 접근하는 방식을 뜻한다. (CRUD)

직접 쿼리문을 작성하지 않고, 쉽게 할 수 있다. prisma(ORM 도구) <-> DB(postgresql)

 

 

 

 

위 그림은 파이썬 <-> ORM <-> DB 관계인데, 해당 프로젝트로 하게되면

apollo(graphql)<->ORM(prisma)<->postgresql 이것과 같은거라고 보면 된다.

 

일단, prisma설치를 위해서는, (www.prisma.io/)

공식 사이트의 절차 대로,  아래 2개 명령어를 통해 prisma설치 및 init를 실행한다.

 

 

그 후, postgresql을 공식사이트에서 다운 받은 후, pgadmin4를 실행한다. (GUI)

자세한 설치 방법 및 내용은 노마드코더 #3.4 강의 참조

 

 

 

🍔 코드 리뷰

 

🥑 prisma/schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

 

위 npx prisma init를 실행하면 1)schema.prisma 파일과 2).env 파일이 생성 된다.

 

이제 prisma를 어떤 db에 연결해줄 것인지에 대해 정의를 해야 하는 것이다. 아래 .env 파일을 보면 그 db의 url을 주소를 알 수 있다.

 

 

🥑.env

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables

# Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="postgresql://사용자명:randompassword@localhost:5432/DB명?schema=public"

 

.env 파일은 gitignore에서 이미 ignore처리된 파일이다.

이유는, db 관련해서 프라이빗한 데이터들이 들어가 있기 때문이다.

 

---

 

 

🍔 핵심 내용 (이번 파트는 error 주의)

 

🥑 prisma migrate

 

prisma에 postresql url을 연결해 주었다. 그리고, migrate을 해주어야 한다. migrate(이주 하다)는 A 에 있는 데이터를 B로 옮기는 것을 뜻한다. 현재 prisma에 model을 셋업해 주었고 그 model 값을 postgresql로 migrate 해주어야 한다. 그 과정에 대해 살펴보자.

 

먼저, model 값을 정의해 준 후 migrate를 해보자. (아래 코드리뷰 참고)

 

model값을 정의 한 후, npx prisma migrate dev --preview-feature를 입력한다. (나중에는 preview부분이 없어 진다고하네요). 

 

window에서는 .env에 있는 url 경로중에 유저이름과 비밀번호를 pgAdmin4에 있는 것과 같게 잘 셋팅해야 한다고 한다. (ㄳ요 drjoey님)

 

 

 

위 내용들이 모두 처리 되면, 아래와 같이 migration 된 폴더 및 파일이 생성 된다.(postgresql sql 구문)

매번 npx prisma migrate dev --preview-feature 명령어를 통해 동기화 해주기 어렵기 때문에, 간단히

package.json의 script에 해당 명령어를 넣어준다. (코드 리뷰 참고)

 

 

** 다른 에러 처리법

 

🍔 코드 리뷰

 

🥑 prisma/schema.prisma

 

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Movie {
  id        Int      @id  @default(autoincrement())
  title     String
  year      Int
  genre     String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

 

🥑 package.json

  "scripts": {
    "dev": "nodemon --exec babel-node server",
    "migrate": "npx prisma migrate dev --preview-feature" // <-- 추가

  },

 

npm run migrate로 간략히 실행!

 

 

---

 

🍔 핵심 내용 

 

🥑 graphql의 query과 mutation을 이제 db (postresql)에 연동시켜 보자

이를 위해서는 prisma의 client를 연동시켜주어야 한다. (하단 코드 리뷰 참고)

 

 

🥑 prisma의 필수값과, graphql의 typeDefs의 필수값 사용하는 방법이 다르다.

 

prisma는 디폴트값이 필수 값(required)이고, 선택사항에는(안해도 되는 거) ? 를 붙인다. (아래 String? 참고)

graphql은 디폴트값이 선택 사항이고, 필수 값(required)에는 ! 를 붙인다. (아래 ! 참고) 

 

 

 

 

 

🍔 코드 리뷰

 

🥑 server.js

 

import { PrismaClient } from "@prisma/client";
import { ApolloServer, gql } from "apollo-server";

const client = new PrismaClient() // client 객체 생성 

const typeDefs = gql`
  type Movie {
    id: Int!
    title: String!
    year: Int!
    genre: String
    createdAt: String!
    updatedAt: String!
  }
  type Query {
    movies: [Movie]
    movie(id:Int!): Movie
  }
  type Mutation {
    createMovie(title: String!, year: Int!, genre: String): Movie
    deleteMovie(id:Int!): Boolean
  }
`;

const resolvers = {
  Query: {
    movies: () => client.movie.findMany(), //여기서 movie는 prisma에서 정의한 schema (model) 테이블 값이다.
    movie: (_, {id}) => ({ title: "Hello", year: 2021 }),
  },
  Mutation: { //movie 테이블 값에 데이터를 추가해보자
    createMovie: (_, { title, year, genre }) => client.movie.create({data:{
      title,
      year,
      genre
    }}),
    deleteMovie: (_, { id }) => {
      return true;
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server
  .listen()
  .then(() => console.log("Server is running http://localhost:4000/"));

 

prisma의 client 객체를 생성하였고, query문과 mutation문에 만들어진 client를 연결해주어. client의 db table값인 movie를 연동시켜 주었다. findMany()는 모든 값을 다 가지고 오는 것이고, create({data: {값}})은 테이블 값을 만들어 주는것이다.

table에서 정의되었던 title, year, genre 값을 입력된 인자값에 넣어준다. (같은 naming을 통해 title: title 할 필요없이 1개로 통일)

 

위 코드로, 실제 graphql 서버에서 movie를 create 해보자면 아래와 같이 할 수 있다.

 

이를 query로 호출해서 보자면, (내가 같은 값을 4번 입력해서, 값이 4개 생성됨.) 아래와 같다.

 

다음 주제는, id를 통해서 query로 movie를 찾아보고, mutation을 통해 해당 id에 맞는 movie를 삭제해보자.

 

---

🍔 핵심 내용 

 

🥑 CRUD (Create, Read, Update, Delete) 기능을 모두 할 수 있다.

 

Read는 query로 간단히 할 수 있고, Create와 Delete는 위에 다루었으며, 이제 Update를 해보자.

 

🥑 npx prisma studio

 

prisma studio는 db를 visual 하게 볼 수 있는 화면이다. pgadmin4 를 사용 안해도 된다. 진짜 깔끔하게 잘되어 있음 ! 

 

그리고, npx prisma studio를 설치 한 후 바로 서버가 실행 되는데, 이를 쉽게 하기 위해 script부분에 추가해주자.

 

 

 

🍔 코드 리뷰

 

🥑 server.js

 

  type Mutation {
    createMovie(title: String!, year: Int!, genre: String): Movie
    deleteMovie(id:Int!): Movie
    updateMovie(id: Int!, year: Int!): Movie
  }
  
  //==> updateMovie 타입 추가
  
  
const resolvers = {
  Query: {
    movies: () => client.movie.findMany(), //여기서 movie는 prisma에서 정의한 schema (model) 테이블 값이다.
    movie: (_, {id}) => client.movie.findUnique({where:{id}})

  },
  Mutation: { //movie 테이블 값에 데이터를 추가해보자
    createMovie: (_, { title, year, genre }) => client.movie.create({
      data: {
      title,
      year,
      genre,
    }}),
    deleteMovie: (_, { id }) => client.movie.delete({where: { id }}),
    updateMovie: (_, { id, year }) => client.movie.update({where: { id }, data: { year }}),
  },
  
 //==> updateMovie resolver추가. 위 내용대로 update가 진행되면 Movie 데이터인
 updatedAt가 변경 된다.

 

🥑 package.json

  "scripts": {
    "dev": "nodemon --exec babel-node server",
    "migrate": "npx prisma migrate dev --preview-feature",
    "studio": "npx prisma studio" // <-- 추가
  },