[GraphQL]GraphQL-API 서버 만들기

DongEun·2022년 11월 26일
2
post-thumbnail

GraphQL-API 서버 만들기~

ex) apollo-server

npm - @apollo/server

yarn add apollo-server

서버를 실행해보자~!

// const TEXT: string = "안녕하세요~";

// console.log(TEXT);

import { DataSource } from "typeorm";
import { Board } from "./Board.postgres";

import { ApolloServer, gql } from "apollo-server";

// 타입 제작

const typeDefs = gql`
  type Query {
    fetchBoards: String
  }
`;

// 함수 제작 API
const resolvers = {
  Query: {
    fetchBoards: () => {
      return "게시글 조회에 성공했습니다.";
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

const AppDataSource = new DataSource({
  // typeorm 연결 설정
  type: "postgres",
  host: "컴퓨터주소",
  port: "컴퓨터프로그램번호(포트번호)",
  username: "postgres",
  password: "postgres2022",
  database: "postgres", // postgress를 접속하면 폴더를 생성 해야함
  entities: [Board], // 접속해서 만들 테이블을 작성
  synchronize: true, // 코드와 DB의 테이블과 다르면 안됌 동기화를 시켜주어야함 , 클래스를 기준으로 동기화가 이루어짐
  logging: true,
});

// 설정한 파일을 시작합니다 (initialize)
AppDataSource.initialize()
  .then(() => {
    console.log("DB접속에 성공했습니다.");
    // listen은 기다려준다
    // 서버는 무한루프로 계속 실행되어야함
    // 서버 : 누군가의 접속을 기다리는 프로그램 - 포트번호 존재 ( 한 컴퓨터 안에서 포트번호는 고유번호 중복되어서는 안됌 범위 : 0 - 65535)
    server.listen(4000).then(() => {
      console.log("GRAPHQL 서버가 실행 되었습니다.");
    });
  })
  .catch((error) => {
    console.log("DB접속에 실패했습니다.");
    console.log("원인 : ", error);
  });

API를 구성해보자!

// 타입 제작 === API-Docs

const typeDefs = gql`
  input CreateBoardInput {
    writer: String
    title: String
    contents: String
  }

  type MyBoard {
    number: Int
    writer: String
    title: String
    contents: String
  }

  type Query {
    fetchBoards: [MyBoard]
  }

  type Mutation {
    # createBoard: String
    # 연습용 ()
    # createBoard(writer: String, title: String, contents: String): Return
    # 실무용 ()
    createBoard(createBoardInput: CreateBoardInput!): String
  }
`;


// 함수 제작 API === API(함수)
const resolvers = {
  Query: {
    // fetchBoards: () => {
    //   return "게시글 조회에 성공했습니다.";
    // },
    fetchBoards: async () => {
      // 모두 꺼내기
      const result = await Board.find();
      console.log(result);

      // 한개만 골라서 꺼내기
      // Board.findOne({ where: { number: 3 } });

      return result;
    },
  },

  Mutation: {
    // parent => createBoard("철수") 브라우저에서 다른곳에서 받아올때 데이터
    // args => (writer: String, title: String, contents: String) 브라우저에서 요청할떄의 데이터 , 이게 제일 중요
    // createBoard: (parent, args,context,info) => {
    //   return "게시글 등록 완료";
    // },

    // ORM 사용하여 편하게 작업
    createBoard: async (parent: any, args: any, context: any, info: any) => {
      await Board.insert({
        // number는 작성하지 않는이유 : 자동으로 작성하였기에 작성할 필요가 없음
        ...args.createBoardInput,
      });
      // await Board.insert({
      //   writer: args.createInputBoardInput.writer,
      //   title: args.createInputBoardInput.title,
      //   contents: args.createInputBoardInput.contents,
      // });

      // 만약 ORM을 사용하지 않는다면??
      // const myquery = "insert into Board(writer, title, contents) values('철수', '안녕하세요', '반갑습니다')"
      return "게시글 등록 완료";
    },
  },
};

작동화면

createBoard를 할때 즉 api를 작성할떄는
parent: any, args: any, context: any, info: any
이렇게 4가지의 매개변수가 있지만 이중에서 제일 중요한거는
args가 제일 중요해요
args란? => (writer: String, title: String, contents: String) 브라우저에서 요청할떄의 데이터


간단한 서버를 구성했지만 나중에는 Express로 좀 더 탄탄하게 제작해서 조금만 더 깁숙하게 공부해보려구해요.

항상 저희를 위해서 고생하시는 코드캠프 멘토님과 노원두 멘토님 감사합니다.

No wondo, no gain!

profile
다채로운 프론트엔드 개발자

2개의 댓글

comment-user-thumbnail
2022년 11월 28일

쵝오

1개의 답글