이 글은 nomadcoder instagram clone 강의를 듣고 개인적으로 정리하는 글입니다.
Instagram clone with express, prisma, react
git clone {repository-url}
yarn init
yarn add graphql-yoga
GraphQLServer
는 express 서버가 내장되어 있다.yarn add nodemon
nodemon --exec your/source/path
yarn add babel
yarn add dotenv
.env
파일을 생성하고 사용할 수 있게 해주는 모듈yarn add morgan
yarn add graphql-tools
yarn add merge-graphql-schemas
graphQLserver를 사용할 때 props로 typeDefs, resolvers를 구현해서 사용한다.
graphQL에서 CRUD를 하는 구문
graghQL에서 자료구조 형태를 명시하는 구문
type Character {
name: String!
appearsIn: [Episode!]!
}
graphQL에서 query, mutation을 이용해 구제적인 과정을 담당하는 구문
Query: {
allUsers: () => prisma.users(), // 기본적으로 prisma는 promise 함수를 return 한다.
}
Query: {
userById: async (_, args) => {
const { id } = args;
return await prisma.users({id})
}
}
사용되는 schema/type, query/mutation를 모아놓은 것
사용되는 resolver를 모아놓은 것
├─🗂api
│ └── 🗂Hello
│ └── 🗂sayHello
│ ├─sayHello.graphql <- typeDef
│ └─sayHello.js <- resolver
├─schema.js
└─server.js
typeDefs files + resolvers files
api 폴더내에 있는 모든 typeDefs, resolvers들을 import해서 server.js에서 schema.js만 import하여 관리
graphql-tools
, merge-graphql-schemas
prisma에서 제공하는 demo db로 my sql을 사용한다.
graphql을 통해 Database와 커뮤니케이션 할 수 있도록 해주는 ORM
prisma login
prisma init
generated
폴더와 datamodel.prisma
파일을 생성함prisma deploy
prisma deploy
를 통해 prisma update를 하면 됨prisma generate
를 통해서 prisma-client 파일 내려받기 하면 됨├─🗂generated
│ └── 🗂prisma-client
│ ├── index.d.ts
│ ├── index.js
│ └── prisma-schema.js
├─ prisma.yml
└─ datamodel.prisma
prisma init
명령어로 생성 시에 만들어지는 yml 파일
prisma 서버 값, datamodel, generate 경로, generate type 등을 저장하는 파일
endpoint: {database server}
datamodel: datamodel.prisma
generate:
- generator: javascript-client
output: ./generated/prisma-client/
database model 정의 하는 파일(sql에서 create or replace table에 대항함)
prisma가 계속해서 나은 버전으로 개발되면서 v1.x 버전이랑 v2.x 버전 등 syntax부터 다른데 헷갈리지 말고 버전과 맞춰서 코드 작성해야함
(점점 더 sql 문법에 가까워 지는거 같은 건 내 느낌인가...)
🆅1.34.8
type User {
id: ID! @id
name: String
email: String! @unique
}
🆅2.x
model User {
id Int @id @default(autoincrement())
name String?
email String @unique
}
모델에 재귀적 호출이 가능한 타입들은 prisma-client에 제공되지 않는다.
(서버에 취약점을 가질 수 있기 때문에, 무한 재귀로 공격할 수 있음)
그래서 graphql에서는 $fragment을 사용하여 더 깊게 데이터를 접근하고 사용할 수 있다.
sql로 치자면 table에 해당한다.
vscode에서 prisma plugin(syntax lint 등)을 설치하고 사용하려 하는데 prisma 2.0 업데이트 되었다고 plugin 자체를 2.0에 맞춰서 내버리고 1.x prisma는 아예 syntax를 이해하지를 못한다.
1.x prisma를 강제로 쓰더라도 계속 lint error가 나면서 사용할 수 없게 만들어버렸다.
문제는 npm에 prisma를 찾으면 version 이 1.x가 나온다.
공식 홈페이지에 따르면 @prisma/client를 사용해서 prisma2를 이용하라고 적혀있다.
npm에 가보면 reamde에는 이미지도 깨져서 나오기도 하고 업데이트가 자주 일어나고 있다.
어째뜬 vscode plugin에 버전 별로 .prismarc라던지 설정파일로 설정할 수 있게 해줘야 할거 같은데. 만약 지금 prisma1을 사용하고 plugin을 통해서 code lint를 이용하려면 지금은 사용할 수 없다.
(https://github.com/prisma/vscode/issues/26, https://github.com/prisma/vscode/issues/11) 이런 글이 올라오는 걸 보면(근데 답변조차 없다. 앞에 글은 작년 11월에 올라온 글인데) 댓글에 보면 이런 글 조차 있다.
I have a temporary solution:
In your prisma.yml file change datamodel.prisma to datamodel.graphql
and finally change your datamodel.prisma filename to datamodel.graphql
whalaaa!
.prisma 파일을 .graphql로 바꿔놓고 prisma.yml에서 아예 .graphql파일을 바라보게 하는건데 굳이 이렇게 쓸 수는 있겠다.