#4_graphql

graphql api를 사용하기 위해 npm 또는 yarn 에서 apollo/server를 다운받아 실행 해보자

graphql server는 기본포트가 4000번 이므로 실행할 때 주의해야 한다.

# 1. install apollo server
npm i @apollo/server

<index.js>
import { ApolloServer } from "@apollo/server";
// server listener 역할
import { startStandaloneServer } from "@apollo/server/standalone";

// swagger
const typeDefs = `#graphql
     type Query {
          home: String
     }
`

// qeury(read) 또는 muation(update, delete, create) 설정, API 역할
const resolvers = {
     Query: {
          // endpoint
          home: () => {
               return "home"
          }
     },
}

// typeDefs 및 resolvers을 서버에 등록
const server = new ApolloServer({
     typeDefs: typeDefs,
     resolvers: resolvers
})

// server listener 역할, 기본 포트 4000
startStandaloneServer(server)

게시판 실습

# 1. schema 및 resolver 생성
<index.js>
import { ApolloServer } from "@apollo/server";
// server listener 역할
import { startStandaloneServer } from "@apollo/server/standalone";

// swagger(Dogs) graphql은 API를 구축해도 Docs를 만들어야 실행
const typeDefs = `#graphql
     type MyResult {
          number: Int
          writer: String
          title: String
          contents: String
     }

     # type input 주의
     input CreateBoardInput {
          writer: String
          title: String
          contents: String
     }

     type Query {
          fetchBoard: [MyResult] # 배열 안 객체 1개 이상 / MyResult => 객체 1개
     }

     type Mutation {
          # createBoard(writer: String, title: String, contents: String): String
          createBoard(createBoardInput: CreateBoardInput!): String
     }
`

// qeury(read) 또는 muation(update, delete, create) 설정
const resolvers = {
     Query: {
          // endpoint
          // 안쓰는 parameter는 '_' 사용
          // parent : could send data to others in backend , args : data, context : req, res, info: information of graphql
          fetchBoard: (parent, args, context, info) => {
               const result = [
                    {contents: 'hi', number: 1, writer: 'jordan', title: 'welcome'},
                    {contents: 'hi2', writer: 'jordan2', title: 'welcome2'},
                    {contents: 'hi3', writer: 'jordan3', title: 'welcome3'}
          ]
               return result
          }
     },

     Mutation: {
          createBoard: (_, args) => {
               console.log(args.createBoardInput.writer);
               console.log(args.createBoardInput.title);
               console.log(args.createBoardInput.contents);
               return 'succeeded to create a new board'
          }
     }
}

// typeDefs 및 resolvers을 서버에 등록
const server = new ApolloServer({
     typeDefs: typeDefs,
     resolvers: resolvers,
     cors: true
})

// server listener 역할, 기본 포트 4000
startStandaloneServer(server)


# 2. server에서 board 생성
<apollo server>
mutation {
  createBoard(createBoardInput: {
    writer: "jordan",
    contents: "hello"
    title: "title"
  })
}