220114_TIL_05

CORS

: 데이터를 나눠주는데 있어서 원본이 바뀐것

• 해당하는 브라우저에 대해서 허용을 해줘야지만 데이터의 요청과 응답이 가능해지는데, 요청해주지 않으면 cors 에러 발생
• 따라서, 백엔드 컴퓨터 express로 가서 허용해주고 싶은 주소를 입력해줘야됨

cors 설치 및 사용

: express 를 같이 사용한다고 하면 app.use(cors())까지 적용시켜줘야하는것

• yarn add cors
• 설치하고 나면 cors import 해주기
• app.use(cors()) 추가
  - cors() : ()로 비워두면 모든 주소에 대해서 허용한다는 뜻
  - cors({origin}) : origin 을 넣으면 원하는 주소에만 허용

import cors from 'cors' 
const app = express()   
app.use(cors())

Apollo-server

Apollo-server 와 grqphql 설치

• yarn add apollo-sever
• yarn add graphql
• import로 apollo-server 와 graphql 불러오기

import { ApolloServer, gql } from 'apollo-server'

Apollo-server 와 grqphql 실행

resolvers

• API 부분
• query 를 사용하여 데이터 조회하는 get
• mutation 를 사용하여 post, put, delete

typeDefs

• 반환될 데이터의 타입을 지정
• swagger 와 같은 역할로 반환될 데이터에 따라 지정

return

• Rest-API : res.send를 이용해서 데이터를 반환
• graphql-API : return 을 사용해 함수를 종료하면서 데이터를 반환

• resolvers api 를 만들고 type 까지 만들고 나면
• apollo-server 에 등록을 해줘야됨

const server = new ApolloServer({
  mytypeDefs,
  myresolvers,
});

// npm 사이트 appollo-server에서 가져온것
// const { ApolloServer, gql } = require('apollo-server');
import { ApolloServer, gql } from "apollo-server";

// The GraphQL schema
// graphql 에서는 스웨거가 자동적으로 만들어지는데 그 스웨거 부분이 typeDefs
const mytypeDefs = gql`
  type Query {
    fetchBoards: String
  }

  type Mutation {
    createBoard: String
  }
`;

// A map of functions which return data for the schema.
// resolvers 는 express에서 api 와 같은것
const myresolvers = {
  Query: {
    fetchBoards: () => {
      // 데이터베이스에서 데이터를 꺼내오는 로직

      return "조회에 성공하였습니다."; // 결과물
    },
  },

  Mutation: {
    createBoard: () => {
      // 데이터베이스에 데이터를 저장하는 로직

      return "등록에 성공하였습니다!!!";
    },
  },
};

const server = new ApolloServer({
  typeDefs : mytypeDefs,
  reslovers : myresolvers, 
// 만약 key와 value가 같을때 value값 생략가능(shorthand property) 
// => typeDefs(key) : typeDefs(value) 가 되면 typeDefs 한개만(value 생략) 써줘도됨!
//typeDefs
  resolvers: myresolvers
});

// listen : 서버는 기다리는것이 필요
server.listen(3000).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

Apollo-server 와 grqphql 실행 결과

• 서버가 잘 실행되었다면 localhost:3000/graphql 을 들어가 Query your server를 클릭하면 playground로 들어 갈 수 있음
  

배열안에 객체 형태로 받아오기

• Rest-API : 요청 데이터를 확인하기 위해 Parameter(매개변수) req 사용
• graphql-API : Parameter(매개변수) args를 사용해 요청된 데이터 확인 ( 만약 사용하지 않는 파라미터를 사용할때는 _(언더바)를 파라미터로 사용 )

// const { ApolloServer, gql } = require('apollo-server');
import { ApolloServer, gql } from "apollo-server";

// The GraphQL schema
const typeDefs = gql`
  type BoardReturn {
    # 객체형태
    number: Int
    writer: String
    title: String
    contents: String
  }

  type Query {
    # fetchBoards: BoardReturn => 객체 1개를 의미  // # 뒤는 주석
    fetchBoards: [BoardReturn] # 배열안의 객체 형태 (객체가 1개 이상일 경우 사용)
  }

  type Mutation {
    createBoard(writer: String, title: String, contents: String): String
  }
`;

// A map of functions which return data for the schema.
const resolvers = {
  Query: {
    fetchBoards: (_, args) => {
      // 데이터베이스에서 데이터를 꺼내오는 로직

      return [
        // 배열안에 객체 형태로 응답
        {
          number: 1,
          writer: "철수",
          title: "제목입니다",
          contents: "내용입니다",
        },
        {
          number: 2,
          writer: "영희",
          title: "좋은 날씨!",
          contents: "내용입니다",
        },
        {
          number: 3,
          writer: "훈이",
          title: "점심 맛있어요!",
          contents: "내용입니다",
        },
        {
          number: 4,
          writer: "맹구",
          title: "안녕하세요~",
          contents: "내용입니다",
        },
      ];
    },
  },

  Mutation: {
    createBoard: (_, args) => {
       // fetchBoards: (parent, args, context, info) => {} 가 있는데
      // args 만 사용할것이기에 (_, args)로 작성
      // 데이터베이스에서 데이터를 꺼내오는 로직

      console.log(args);

      return "등록에 성공하였습니다!!!";
    },
  },
};

const server = new ApolloServer({
  typeDefs, // 키와 벨류가 같을때 벨류값 생략가능 = shorthand property
  resolvers,
});

server.listen(3000).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

게시물 조회

• 필요한 정보만 골라서 받을수있음!

게시물 등록

• createBoard:string 이므로 따로 중괄호를 사용하지않고 바로 실행가능한것
• 작성한 내용들이 실제로 args로 전달되었는지 확인 => console.log로 찍어두었기에 터미널에서 확인 가능!