#2 Setting Up Prisma

#2.0 Introduction to Prisma

1. npm i -g prisma 설치를 하자. 프리즈마 홈페이지에서 가입 후 그리고, 서비스 진행해보자.

 

가입을 하게되면, 바로 서비스 진행하는 화면이 나온다. 그 다음, prisma init을 하게 되면 내용 대로 진행 하면 된다. (지금은 연습이기 때문에 demo 버전으로 진행)

 

init 후 

 

>datamodel.prisma파일과 generated폴더가 생성된다.

 

>datamodel.prisma

type User {
  id: ID! @id
  name: String!
  lastName: String!
}

 그 후, prisma deploy를 하게 되면, 위 datamodel이 연동이 된다.

---

#2.1 Datamodel with Prisma

 

datamodel.prisma 수정

 

>datamodel.prisma

type User {
  id: ID! @id
  username: String! @unique
  email: String! @unique
  firstName: String @default(value: "")
  lastName: String
  bio: String
  following: [User!]! @relation(name: "FollowRelation")
  followers: [User!]! @relation(name: "FollowRelation")
  posts: [Post!]!
  likes: [Like!]!
  comments: [Comment!]!
}

type Post {
  id: ID! @id
  location: String
  caption: String!
  user: User!
  files: [File!]!
  likes: [Like!]!
  comments: [Comment!]!
}

type Like {
  id: ID! @id
  user: User!
  post: Post!
}

type Comment {
  id: ID! @id
  text: String!
  user: User!
  post: Post!
}

type File {
  id: ID! @id
  url: String!
  post: Post!
}

장고의 모델 연결 부분과 유사하다..

 

그리고, 다시 npm run deploy를 하게 되면 위 내용이 반영 되어 있다. 그리고

명령어에 뜨는 위 주소로 가게 되면, grapqlserver와 거의 유사한 창이 뜨는데 위 내용을 다 사용 할 수 있다. 조회, 수정 이런것들,,, 이 주소는 숨겨야 한다. 뒤 강의에 나올듯?

---

#2.2 Testing Prisma OMG

아래와 같이 모델을 수정하고, 테스트를 해보자.

 

>datamodel.prisma

type User {
  id: ID! @id
  username: String! @unique
  email: String! @unique
  firstName: String @default(value: "")
  lastName: String
  bio: String
  following: [User!]! @relation(name: "FollowRelation")
  followers: [User!]! @relation(name: "FollowRelation")
  posts: [Post!]!
  likes: [Like!]!
  comments: [Comment!]!
  rooms: [Room!]!
}

type Post {
  id: ID! @id
  location: String
  caption: String!
  user: User!
  files: [File!]!
  likes: [Like!]!
  comments: [Comment!]!
}

type Like {
  id: ID! @id
  user: User!
  post: Post!
}

type Comment {
  id: ID! @id
  text: String!
  user: User!
  post: Post!
}

type File {
  id: ID! @id
  url: String!
  post: Post!
}

type Room {
  id: ID! @id
  participants: [User!]!
  messages: [Message!]!
}

type Message {
  id: ID! @id
  text: String!
  from: User! @relation(name: "From")
  to: User! @relation(name: "To")
  room: Room!
}

> 유저 생성

>유저 조회하기

>유저 mutation

다시 유저 조회를 해보면, firstname과 lastname이 추가된것을 확인 할 수 있다.!

 

>유저 다시 조회하기

 

>유저1이 유저2를 following 하기

 

유저1 id : ck7znn5qrfhnf0950udd1v4y8

유저2 id: ck7zsy28im00x0986v0qgx3vc

 

그다음 유저2의 follower를 조회해보자. (반대로 유저1의 following을 조회해보면 유저2가 나온다)

으억 신기하다.

---

#2.3 Integrating Prisma in our Server

모듈설치

-npm i prisma-client-lib

 

프리즈마와 서버를 연결해주는 작업을 해보자.

 

>package.json

  "scripts": {
    "deploy": "prisma deploy",
    "generate": "prisma generate",
    "prisma": "npm run deploy && npm run generate",
    "dev": "nodemon --exec babel-node src/server.js"
  },

 generate는, prisma를 서버와 연결해주는 역할을 한다. 따라서, deploy와 generate 를 동시에 할 수 있게, prisma 라는 스크립트를 하나 만들자. (dev는 graphql서버 여는 명렁어)

 

테스트로, sayHello.js에 콘솔로그를 찍어보자.

 

>sayHello.js

import { prisma } from "../../../../generated/prisma-client";
export default {
  Query: {
    sayHello: async () => {
      console.log(await prisma.users());
      return "HELLO";
    }
  }
};

위와 같이 입력 후, npm run deploy 와 npm run dev를 해보자.

 

그 후 query에 sayHello라고 입력하면 콘솔로그에 아래와 같이 프리즈마에 들어간 유저 데이터를 확인 할 수 있다.

이를 응용하여, 프론트엔드 부분에 db값을 보여줄 수 있게 하는 것이다.

---

#2.4 Resolvers with Prisma

기존 모든 Prisma data를 graphql로 가지고 와보자.

 

models.graphql 파일 생성 후, api 폴더 안에 넣어주자.(schema.js파일에서 모든 graphql을 api폴더 안에서 찾는 걸로 이전에 정의 했음) 해당 파일에는 기존 datamodel.prisma 내용이 모두 들어가 있어야 한다.(복붙해야만함,,ㅋㅋ) 하지만 기존 datamodel.prisma에 있는 내용중 프리즈마 문법들은 제거해주자. (graphql에서 못읽음)

 

>models.graphql

type User {
  id: ID!
  username: String!
  email: String!
  firstName: String
  lastName: String
  bio: String
  following: [User!]!
  followers: [User!]!
  posts: [Post!]!
  likes: [Like!]!
  comments: [Comment!]!
  rooms: [Room!]!
  loginSecret: String!
}

type Post {
  id: ID!
  location: String
  caption: String!
  user: User!
  files: [File!]!
  likes: [Like!]!
  comments: [Comment!]!
}

type Like {
  id: ID!
  user: User!
  post: Post!
}

type Comment {
  id: ID!
  text: String!
  user: User!
  post: Post!
}

type File {
  id: ID!
  url: String!
  post: Post!
}

type Room {
  id: ID!
  participants: [User!]!
  messages: [Message!]!
}

type Message {
  id: ID!
  text: String!
  from: User!
  to: User!
  room: Room!
}

먼저, graphql의 모든 스키마를 정의해 주었다.

 

그 후, alluser와 1개의 user를 볼 수 있는 파일들을 만들어 보자. (Query파일과 resolver파일)

 

먼저, 파일 트리는 이와 같다.

>allUsers.graphql

type Query {
  allUsers: [User!]!
}

 Query에서 allUsers라는 query 를 정의 하였고 결과값은 User배열값이다.  

 

>allUsers.js

import { prisma } from "../../../../generated/prisma-client";

export default {
  Query: {
    allUsers: () => prisma.users()
  }
};

 allUsers 를 실행하면 유저값들이 들어가야하는데, 그 값들은 prisma.users를 통해 가지고 온다. 따라서 해당 users안에는 프리즈마에서 저장했던 user의 모든 값들 (id, username 등) 이 담겨져 있다. 이를 불러내기만 하면 되는데, 불러내는 방식은 models.graphql에서 스키마를 정의하였기 때문에 이를 통해 불러내면 된다.

 

이제, 특정 user의 id값을 통해 query하는 법을 알아보자.

 

>userById.graphql

type Query {
  userById(id: String!): User!
}

userById라는 query를 추가해 주었고 인자로, id값을 받는다. 결과값는 1개의 user이다.

 

>userById.js

import { prisma } from "../../../../generated/prisma-client";
export default {
  Query: {
    userById: (_, args) => {
      const { id } = args;
      return prisma.user({ id });
    }
  }
};

  userById 쿼리에서 인자값을 받으면 해당 인자값을 id라는 이름에 담는다. (콘솔로그 해보면 args 는 {id : "~~~"} 객체이다.

그리고 prisma.user의 인자값으로 id값을 넘겨준다. ({id : id}) 인것임.