GraphQL

1. graphQL의 장점
   • REST APi의 경우, 데이터 테이블을 요철할 때 모든 필드를 받아 온다.
     • 예) user의 username만 필요하더라도 profile,email등등을 모두 꺼내서 response로 보냄
     • 이것을 over fetching이라고 한다.
   • graphQL
     • 필요한 데이터를 받기 위해 1번 이상의 request를 보냄
       • 예) 앱 실행 시, feed 데이터, user데이터, notification데이터 etc. 모두 각각의 request를 보냄
2. 서버 만들기
   • graphql폴더 밑에 schema.graphql 파일 만들기

     • 여기서 Query와 Mutation을 선언한다

     • Query

       • 정보를 받을때 쓰인다.

     • Mutation

       • 서버에서 혹은 데이터베이스에서, 메모리에서 정보를 바꾸는 작업을 할 때 이런 것들을 Mutation이라고 한다

     • 이름이 string / isrequred 인 정보를 받는다는 뜻

     • 이 파일에서 data가 어떻게 보일 지 정의한다. (database schema정의하는 거랑 비슷)

       type Query {
         name: String!
       }
       

   • graphql폴더 밑에 resolvers.js 파일 만들기
     • graphql서버가 query나 mutation의 정의를 발견하면 Resolver을 찾을 것이고, 해당 함수를 실행한다.

	const resolvers = {
          Query: {
            name: () => "nicolas", // 함수의 첫번째 인자는 Object이다.
          },
        };
        
        export default resolvers;

- index.js
    
    ```jsx
    import { GraphQLServer } from "graphql-yoga";
    import resolvers from "./graphql/resolvers.js";
    
    const server = new GraphQLServer({
      typeDefs: "./graphql/schema.graphql",
      resolvers,
    });
    
    server.start(() => console.log("Graphql Server Running"));
    ```
    

3. id가 1인 person가져오기
   • db.js

     export const people = [
       {
         id: "0",
         name: "Nicolas",
         age: 18,
         gender: "female",
       },
       {
         id: "1",
         name: "Jisu",
         age: 18,
         gender: "female",
       },
       {
         id: "2",
         name: "Japan Guy",
         age: 18,
         gender: "male",
       },
     ];
     
     export const getMyId = id => { 
       const filteredPeople = people.filter(person => person.id === String(id));
       return filteredPeople[0];
     };

   • query 설정

     type Person {
       id: Int!
       name: String!
       age: Int!
       gender: String!
     }
     type Query {
       people: [Person]! 
       person(id: Int!): Person
     }

   • resolvers.js

     • people

       import { people, getMyId } from "./db.js";
       
       const resolvers = {
         Query: {
           people: () => people,
           person: (_, { id }) => getMyId(id), //두번쩨 argumnet를 console에 찍어보면
       																				// {id:~}라고 나옴
         },
       };
       
       export default resolvers;

   • 1) 결과

     query {
       people {        
         age
         name
       }
     }

     위의 내용을 치면 아래의 data를 보여준다

     • resolver 함수에서 설정한것처럼 people을 보여준다.

       {
         "data": {
           "people": [
             {
               "age": 18,
               "name": "Nicolas"
             },
             {
               "age": 18,
               "name": "Jisu"
             },
             {
               "age": 18,
               "name": "Japan Guy"
             }
           ]
         }
       }

   • 2) 결과

     {
       person(id:1) {
         name
       }
     }

     위의 내용을 치면 아래의 data를 보여준다

     • resolver함수에서 설정한 것과 같이 인자로 넣은id를 가진 person을 찾아준다.

       {
         "data": {
           "person": {
             "name": "Jisu"
           }
         }
       }

4. Mutation
   • Mutation은 Database상태가 변할 때 사용되는 것이다.
   • Mutation 사용해보기

     • schema.graphql

       type Movie {
         id: Int!
         name: String!
         score: Int!
       }
       type Query {
         movies: [Movie]!
         movie(id: Int!): Movie
       }
       type Mutation {
         addMovie(name: String!, score: Int!): Movie!
         deleteMovie(id: Int!): Boolean!
       }

     • resolvers.js

       import { getMovies, getById, addMovie, deleteMovie } from "./db.js";
       
       const resolvers = {
         Query: {
           movies: () => getMovies(),
           movie: (_, { id }) => getById(id),
         },
         Mutation: {
           addMovie: (_, { name, score }) => addMovie(name, score),
           deleteMovie: (_, { id }) => deleteMovie(id),
         },
       };
       
       export default resolvers;

     • db.js

       export const getMovies = () => {
         return movies;
       };
       
       export const getById = id => {
         const filteredMovies = movies.filter(movie => movie.id === id);
         return filteredMovies[0];
       };
       
       export const deleteMovie = id => {
         const cleanedMovies = movies.filter(movie => movie.id !== id);
         if (movies.length > cleanedMovies.length) {
           movies = cleanedMovies;
           return true;
         } else {
           return false;
         }
       };
       
       export const addMovie = (name, score) => {
         const newMovie = {
           id: `${movies.length + 1}`,
           name,
           score,
         };
         movies.push(newMovie);
         return newMovie;
       };