GraphQL - GraphQL Server 시작하기

GraphQL

 

 

✅ GraphQL?

---

GraphQL
API를 위한 쿼리 언어
GraphQL은 클라이언트가 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며, 시간이 지남에 따라 API를 더 쉽게 발전시키고 강력한 개발자 도구를 활성화합니다.
https://graphql.org/

Graphile
PostgreSQL를 위한 확장 가능한 고성능 자동 GraphQL API
https://www.graphile.org/

Hasura
모든 데이터에 대한 즉각적인 GraphQL
Hasura는 신규 및 기존 데이터 소스에 대한 즉각적인 GraphQL 및 REST API를 제공합니다. Hasura를 데이터에 연결하고 1분 이내에 API를 받으세요.
https://hasura.io/

 

 

✅ API란?

---

API (Application Programming Interface)

API는 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 즉, 프로그램들이 서로 소통하는 방법이다.
주로 프로그래밍할 때 사용하고, 어플리케이션과 상호작용할 때 사용한다.

인터페이스
무엇인가와(TV) 무언가를(리모컨) 이용해서 상호작용하는 방식이다.
리모컨을 이용해서 TV를 컨트롤하고, TV와 상호작용할 수 있는 것이다.

Web API
https://developer.mozilla.org/ko/docs/Web/API

 

 

✅ REST API란?

---

“REST라는 설계 원칙을 따르도록 만든 HTTP 기반 API”

• REST = 설계 철학
• API = 그 철학을 구현한 인터페이스

 

 

GraphQL이 해결하는 REST API의 문제점

---

1. Overfetching
필요한 데이터보다 더 많은 데이터를 fetch하는 것을 말합니다.
GraphQL을 사용하면 API에 GraphQL 쿼리를 보내고 필요한 것만 정확히 얻을 수 있습니다.
GraphQL 쿼리는 항상 예측 가능한 결과를 반환합니다.

 

2. Underfetching
필요한 데이터보다 적은 데이터를 fetch하는 것을 말합니다.
일반적인 REST API는 여러 URL에서 로딩해야 하지만 GraphQL API는 앱에 필요한 모든 데이터를 단일 request로 가져옵니다. GraphQL을 사용하는 앱은 느린 모바일 네트워크 연결에서도 빠를 수 있습니다.

 

 

✅ Apollo Server

---

Apollo Server소개
Apollo 서버는 Apollo 클라이언트를 포함한 모든 GraphQL 클라이언트와 호환되는 사양 준수(spec-compliant)의 오픈 소스 GraphQL 서버입니다. 모든 소스의 데이터를 사용할 수 있는 자체 문서화 가능한 production-ready GraphQL API를 구축하는 가장 좋은 방법입니다.
https://www.apollographql.com/docs/apollo-server/

Apollo Server시작하기
npm install apollo-server graphql
npm install nodemon -D
```
const server = new ApolloServer({
typeDefs,
resolvers,
csrfPrevention: true,
});

server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});

 

 

✅ GraphQL Schema 정의 (type, query, mutation)

---

GraphQL은 Schema가 필요하다.

그 중에서도 Query type은 필수

 

Query와 Mutation

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

const typeDefs = gql`
  type User {
    id: ID!
    username: String!
    firstName: String!
    lastName: String
  }
  type Tweet {
    id: ID!
    text: String!
    author: User!
  }
  type Query {
    allTweets: [Tweet!]!
    tweet(id: ID!): Tweet
  }
  type Mutation {
    postTweet(text: String!, userId: ID!): Tweet!
    deleteTweet(id: ID!): Boolean!
  }
`;

const server = new ApolloServer({ typeDefs });

server.listen().then(({ url }) => {
  console.log(`Running on ${url}`);
});

 

 

✅ Resolvers

---

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

 

이와 같이 ApolloServer는 typeDefs와 resolvers를 받는다.

typeDefs는 위에서 작성한 type들과 query, mutation이 들어가고,

resolvers는 작성한 type과 query, mutation을 바탕으로 실제 데이터를 처리할 함수들이 들어간다.

 

resolvers는 object다.

const resolvers = {
  Query: {
    allTweets() {
      return tweets;
    },
    tweet(root, { id }) {
      return tweets.find((tweet) => tweet.id === id);
    },
  },
};

 

resolver function의 첫 번째 arg에는 root라는 값이 들어오고, 두 번째 arg에는 query나 mutation시 사용한 arg가 들어온다.

 

 

✅ Type Resolvers

---

let users = [
  {
    id: "1",
    firstName: "nico",
    lastName: "las",
  },
  {
    id: "2",
    firstName: "elon",
    lastName: "musk",
  },
];

 

만약 위와 같은 user 데이터가 있다고 했을 때, user의 type에 fullName이 있다면, query로 모든 user의 정보들을 불러올 때 에러가 발생한다.

 

const typeDefs = gql`
  type User {
    id: ID!
    firstName: String!
    lastName: String!
    fullName: String!
  }

 

데이터베이스에는 없는 fullName을 동적으로 query 해와야 한다.

어떠한 type에도 resolver field를 사용할 수 있다.

 

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

let tweets = [
  {
    id: "1",
    text: "first one!",
    userId: "2",
  },
  {
    id: "2",
    text: "second one!",
    userId: "1",
  },
];

let users = [
  {
    id: "1",
    firstName: "nico",
    lastName: "las",
  },
  {
    id: "2",
    firstName: "elon",
    lastName: "musk",
  },
];

const typeDefs = gql`
  type User {
    id: ID!
    firstName: String!
    lastName: String!
    fullName: String!
  }
  type Tweet {
    id: ID!
    text: String!
    author: User
  }
  type Query {
    allUsers: [User!]!
    allTweets: [Tweet!]!
    tweet(id: ID!): Tweet
  }
  type Mutation {
    postTweet(text: String!, userId: ID!): Tweet!
    deleteTweet(id: ID!): Boolean!
  }
`;

const resolvers = {
  Query: {
    allTweets() {
      return tweets;
    },
    tweet(root, { id }) {
      return tweets.find((tweet) => tweet.id === id);
    },
    allUsers() {
      console.log("allUsers called!");
      return users;
    },
  },
  Mutation: {
    postTweet(_, { text, userId }) {
      const newTweet = {
        id: tweets.length + 1,
        text,
        userId,
      };
      tweets.push(newTweet);
      return newTweet;
    },
    deleteTweet(_, { id }) {
      const tweet = tweets.find((tweet) => tweet.id === id);
      if (!tweet) return false;
      tweets = tweets.filter((tweet) => tweet.id !== id);
      return true;
    },
  },
  User: {
    fullName({ firstName, lastName }) {
      return `${firstName} ${lastName}`;
    },
  },
  Tweet: {
    author({ userId }) {
      const user = users.find((user) => user.id === userId);
      return user;
    },
  },
};

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

server.listen().then(({ url }) => {
  console.log(`Running on ${url}`);
});

 

Query 타입과 Mutation 타입에 resolver field를 준 것처럼 User 타입에도 resolver field를 줄 수 있다.

그리고 앞에서 언급했었던 resolver function의 첫 번째 arg인 root에는 해당 필드를 소유한 상위 타입의 resolver가 반환한 객체가 담겨있다.

 

Resolver 함수에는 parent(root or source), args, context, info 의 네 가지 인수가 순서대로 전달됩니다.

  User: {
    fullName: (parent, args, context, info) => {
      return "hello";
    },
  },

 

 

✅ Document 작성 방법

---

  type Mutation {
    postTweet(text: String!, userId: ID!): Tweet!
    """
    Deletes a Tweet if found, else returns false
    """
    deleteTweet(id: ID!): Boolean!
  }

 

"""사이에 설명을 적어준다.

 

✅ Tools: Apollo Studio & Altair GraphQL Client

---

https://altairgraphql.dev/

Altair GraphQL Client

 

웹 버전으로도 사용 가능하며, 설치하여 offline으로도 사용이 가능하다.

 

✅ Migrating from REST to GraphQL

---

async allMovies() {
      const response = await (
        await fetch("https://yts.torrentbay.st/api/v2/list_movies.json")
      ).json();
      return response.data.movies;
    },
    async movie(_, { id }) {
      const response = await (
        await fetch(
          `https://yts.torrentbay.st/api/v2/movie_details.json?movie_id=${id}`
        )
      ).json();
      return response.data.movie;
    },

 

fetch를 사용하여 REST API의 반환값을 GraphQL로 감싸 반환해준다.