/ STUDY

GraphQL 영화 API 만들기 (2) - Query & Mutation

목차

Query & Mutation

Query

DB에서 어떤 데이터를 가져올 정보에 대한 설명(데이터).

type Query {
  people: [Person]!
  person(id: Int!): Person
}

type Person {
  id: Int!
  name: String!
  age: Int!
  gender: String!
}

Mutation

DB에 어떤 변화를 가져다 줄 지에 대한 설명

type Mutation {
  addMovie(score: Int!, name: String!): Movie!
  deleteMovie(id: Int!): Boolean!
}

GraphQL 작동 원리

  1. 1. Query OR Mutation 요청 => GraphQLServer in “index.js”
  2. 2. GraphQLServer => GraphQL Resolvers
  3. 3. GraphQL Resolvers 에 2가지 args 전달
    • Object : 추후 사용 (현재 몰라도 상관 X)
    • Args : User가 전달할 수 있는 변수

세부 사용 방법

꼭 순서대로 파일을 수정할 필요는 없지만 3가지 파일 모두 수정해주어야 한다.

Schema.graphql 수정

Schema.graphql는 데이터의 형태가 이럴 것이다라고 미리 정해주는 검문소 매뉴얼이다. 해당 데이터 타입에 대한 정보를 담고 있다. 따라서 이 곳에 먼저 data의 type에 대한 코드들을 추가해야한다.

resolvers.js 수정

db.js 파일에 어떤 함수에 어떤 변수들을 전달할지 연결해주는 곳이다.

db.js 수정

세부적으로 어떤 함수(알고리즘)을 실행할지 서술하는 코드들이 작성되있는 곳이다.

사용 예시

아래 코드들은 영화 데이터 Array에 새로운 정보를 추가하는 코드를 작성한 예시이다.

Schema.graphql 수정

addMovie의 args는 score 그리고 name이고 type은 Movie이다. 라는 내용의 코드를 작성한 것이다.

type Movie {
  id: Int!
  name: String!
  score: Int!
}

type Mutation {
  addMovie(score: Int!, name: String!): Movie!
}

resolvers.js 수정

db.js 파일에서 addMovie라는 함수에는 (_, { name, score })라는 변수가 전달되고 이 때 name,score만 받아서 사용한다. 라는 내용의 코드를 작성한 것이다.

import { addMovie } from "./db";

const resolvers = {
  Mutation: {
    addMovie: (_, { name, score }) => addMovie(name, score),
  },
};

export default resolvers;

db.js 수정

addMovie라는 함수는 name,score이라는 변수를 받아서 movies Array에 새로운 Object를 추가한다. 라는 내용의 코드를 작성한 것이다.

export const addMovie = (name, score) => {
  const newMovie = {
    id: `${movies.length + 1}`,
    name,
    score,
  };
  movies.push(newMovie);
  return newMovie;
};