Graphql Prisma 연습 (0) - 환경셋팅

 

#1. 백 셋팅

#1.1

# gprahql-yoga grpahql-tools merge-graphql-schemas@1.7.3 prisma prisma-client-lib 

#는 필수로 설치해야한다.

# 그외 모듈은 추가적인 셋팅

# babel은 ES 최신문법을 사용하기 위해

# dotenv는 설정 파일 한곳으로 모으기, morgan은 서버 로깅 툴

# nodemailler 와 sendgrid는 이메일 전송을 위해

#passport는 로그인 인증을 위함.

# DOStody

## 환경 설정 - Grapqh + Prisma 를 기본 프로젝트 셋팅으로 가져가자.

```js
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)
```

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

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

```

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

```

```js
//설치후 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"
  }
}

```

 

#1.2

# datamodel.prisma 

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

#1.2

# models.graphql

 

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

 

#2. 프론트 셋팅

# 다음을 설치, 아폴로 부스트는 = 아폴로 클라인트 ,  graphql 문법을 사용하기 위해,  graphql 과 graphql-tag, 훅 사용을 위해 react-hooks 설치

• apollo-boost: Package containing everything you need to set up Apollo Client
• @apollo/react-hooks: React hooks based view layer integration
• graphql: Also parses your GraphQL queries

yarn add apollo-boost @apollo/react-hooks graphql graphql-tag

 

# 클라이언트 셋팅

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "http://localhost:4000/"
});

export default client;

 

# 클라언트 - 훅 프로바이더 연결

import React from "react";
import Router from "./Router";
import GlobalStyles from "./GlobalStyles";
import { ApolloProvider } from "@apollo/react-hooks";
import client from "../apolloClient";

function App() {
  return (
    <ApolloProvider client={client}>
      <Router />
      <GlobalStyles />
    </ApolloProvider>
  );
}
export default App;

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA