TIL DAY 217

오늘 배운 일

<4> 노마드 인스타그램 클론코딩

이번에는 GraphQL 복습과 검증에 대해 알아보는 시간을 가지겠다.

다음 수업으로 넘어가기 전에, 과거에 배운 개념들을 완벽히 이해하고 알아보자!

그럼, 우리는 개념을 다뤄보기 위해 Prisma 를 통해 GraphQL 영화 API 를 만들어 볼 것 이다.

인스타 클론 프로젝트로 돌아가서, server.js 로 가서...

type Query 의 hello 대신 movies 로 바꿔주고 type 을 선언해준다.

server.js

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

const typeDefs = gql`
  type Movie {
    title: String
    year: Int
  }
  type Query {
    movies: [Movie]
  }
`;

const resolvers = {
  Query: {
    hello: () => "apple",
  },
};

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

server
  .listen()
  .then(() => console.log("Server is running on http://localhost:4000"));

실행해보면...

hello 라는 resolvers 는 존재하는데 schema 에 없다고 경고하고 있다.

그리하여, 해당 파트만 약간 수정해준다.

const resolvers = {
  Query: {
    movies: () => [],
  },
};

그리고 typeDefs 에서 movie schema 를 선언해준다.

const typeDefs = gql`
  type Movie {
    title: String
    year: Int
  }
  type Query {
    movies: [Movie]
    movie: Movie
  }
`;

다음으로, resolvers 에서 movie 함수를 만들어주고 객체 형태로 생성해준다.

그럼 이제 터미널에서 npm run dev 를 실행하고, 웹을 열어서 잘 작동하는지 확인해보자!

결과는...

빈 배열을 리턴하고 있다.

지금까지 단순히 GraphQL 영화 API 만들기 강의를 복습한 것 이다.

그럼 이제 movies 대신, movie 라고 바꾸고 실행해보면...

결과는...

우리가 resolvers 에 작성한 코드가 잘 작동한다.

그럼 이제 typeDefs 에서 Mutation 도 만들어주자!

밑에 있는 코드를 해당 부분에 그대로 붙여넣어준다.

server.js

const typeDefs = gql`
  type Movie {
    title: String
    year: Int
  }
  type Query {
    movies: [Movie]
    movie: Movie
  }
  type Mutation {
    createMovie(title: String!): Boolean
    deleteMovie(title: String!): Boolean
  }
`;

const resolvers = {
  Query: {
    movies: () => [],
    movie: () => ({ title: "Hello", year: 2021 }),
  },
  Mutation: {
    createMovie: () => "",
    deleteMovie: () => "",
  },
};

GraphQL 에 대해 모를 수 있으니, resolvers 안에는 기본적으로 갖고 있는
파라미터들이 존재한다.

Mutation: {
  createMovie: (root, args, context, info) => "",
  deleteMovie: () => "",
},

그러면 resolvers 안에 아규먼트가 있는지 파악해보자!

Mutation: {
  createMovie: (_, args) => "",
  deleteMovie: () => "",
},

뒤에 있던 2개의 파라미터들을 지워주고, root 를 _(언더스코어)로 표현해준다.
그 이유는 root 는 필요 없기 때문이다.

그리고 함수 안에 콘솔 로그를 작성해주고, 리턴 true 를 코드로 써준다.

Mutation: {
   createMovie: (_, args) => {
     console.log(args);
     return true;
   },
   deleteMovie: (_, args) => {
     console.log(args);
     return true;
   },
},

이제 Mutation 에 createMovie 의 args 와 deleteMovie 의 args 가 있다.

다 됐으면, 다시 playground 로 돌아가서 조금씩 사용해보자!

결과는...

movie 는 title 과 year 를 잘 보여주고, movies 는 알다시피 빈 배열을 보여준다.

그럼 이제 mutation 을 알아보면...

결과는...

코드에서 리턴 true 를 지정해두어서, 이렇게 결과를 보여준다.

콘솔을 확인해보면...

아! 콘솔은 우리 프로젝트 터미널에 출력된다!

파라미터로 args 로 쓰는 대신, 원하는 프로퍼티를 구조 분해를 해서 작성하는게 훨씬 효율적이고 빠르다.

Mutation: {
  createMovie: (_, {title}) => {
    console.log(title);
    return true;
  },
  deleteMovie: (_, {title}) => {
    console.log(title);
    return true;
  },
},

이러한 방식은 위에서 선언한 모든 인자들을 가져오는 방식이다.

하지만 이러한 방식의 문제점은 코드가 지나치게 길어질 거라는 점이다!

그래서 코드를 나누는 방법을 찾아야 한다.

왜냐면 typeDefs 에 Movie 에 댓글, 좋아요, 사진, 영상 등등 넣을게 산더미다.

Query 또 한 마찬가지다.

다시 한 번 말하자면...

resolvers 의 두 번째 파라미터는 Mutation 이나 Query 에게 주는 인자다.

끝으로 :

• 노마드 인스타그램 클론 코딩이 너무나도 길다 ㅠㅠ.
• 얼른 완성하는 그날까지 열공하자!