백단 환경 구축하기 - GraphQL + Prisma

# 백단 환경 구축하기 - GraphQL + Prisma

https://github.com/DosImpact/grapqhl-prisma-template/commit/461eccc659cf67a03a28e4297e54cf5faa57682e

update docs · DosImpact/grapqhl-prisma-template@461eccc

 

짜잔: 완성된 결과!>

 

1. 설치하기

프리즈마는 글로벌로 한번만 설치하면 됨!

yarn add graphql-yoga graphql-tools merge-graphql-schemas@1.7.3
yarn add @babel/core @babel/node @babel/preset-env nodemon -D
yarn add dotenv morgan
yarn add nodemailer nodemailer-sendgrid-transport
yarn add passport passport-jwt jsonwebtoken
yarn add prisma-client-lib
(yarn add prisma -g)

2.  추가파일 : 루트경로에 다음 추가.

//nodemon.json
{
  "ext": "js graphql"
}

//.babelrc
{
  "presets": ["@babel/preset-env"]
}

 

3. 확인 - scripts 추가

//설치후 package.json
{
  "name": "Grapqhl",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^8.2.0",
    "graphql-tools": "^4.0.6",
    "graphql-yoga": "^1.18.3",
    "jsonwebtoken": "^8.5.1",
    "merge-graphql-schemas": "1.7.3",
    "morgan": "^1.9.1",
    "nodemailer": "^6.4.2",
    "nodemailer-sendgrid-transport": "^0.2.0",
    "passport": "^0.4.1",
    "passport-jwt": "^4.0.0",
    "prisma-client-lib": "^1.34.10"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/node": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "nodemon": "^2.0.2"
  },
  "scripts": {
    "dev": "nodemon --exec babel-node src/server.js",
    "generate": "prisma generate",
    "deploy": "prisma deploy",
    "prisma": "yarn run deploy && yarn run generate"
  }
}

4. server.js

import { GraphQLServer } from "graphql-yoga";
import schema from "./schema";

const server = new GraphQLServer({
  schema
});

server.start({ port: 4000 }, () =>
  console.log(" Graphql QL Server is running : http://localhost:4000")
);

5. 스키마 만들기

import path from "path";
import { makeExecutableSchema } from "graphql-tools";
import { fileLoader, mergeResolvers, mergeTypes } from "merge-graphql-schemas";
const allTypes = fileLoader(path.join(__dirname, "/api/**/*.graphql"));
const allResolvers = fileLoader(path.join(__dirname, "/api/**/*.js"));

const schema = makeExecutableSchema({
  typeDefs: mergeTypes(allTypes),
  resolvers: mergeResolvers(allResolvers)
});

export default schema;

6. datamodel.prisma

type User {
  id: ID! @id
  name: String!
  password:String!
  picture:String
}

7. models.graphql

type User {
  id: ID!
  name: String!
  password: String!
  picture: String
}

8.  api/User/User.graphql

type Query {
  Users: [User!]
}

9. api/User/User.js

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

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

 

10. 프리즈마 서버 작업해주기

-데모서버로 돌아가는 서비스 생성후 프리즈마 데이터 모델을 데모서버로 올리고, prisma가 만든 데이터 ORM을 받아온다.

prisma login -k // by 홈페이지에서 service 추가후
prisma init // 홈페이지 설명서 대로 따라 -> demo 서버 선택 -> js 클라이언트 -> 끝!
prisma deploy
prisma generate

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA