graphql-study's Introduction

왜 GraphQL을 사용할까?

REST API처럼 수많은 API를 만들지 않아도 됨

간단하게 API를 한 곳으로 묶을 수 있음

REST API의 오버패칭 같은 경우, 내가 원하지 않는 정보까지 가져옴

GraphQL은 필요한 정보만 요청해서 가져옴

REST API의 언더패칭 같은 경우, 내가 필요한 정보를 덜 가져옴

GraphQL은 원하는 정보를 쉽게 가져옴

설치 할 것

  "dependencies": {
    "apollo-server": "^3.13.0",
    "graphql": "^16.8.1"
  },

기본 코드 (server.js)

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

// query - GET
// Mutationn - POST DELETE PUT
// !가 없다면 null이 들어가도 됨 -> !가 붙었다면 꼭 값이 있어야함 (!=required)

const tweets = [
  {
    id: "1",
    text: "hello",
  },
  {
    id: "2",
    text: "hi",
  },
];

const typeDefs = gql`
  type User {
    id: ID
    username: 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 resolvers = {
  Query: {
    allTweets() {
      return tweets;
    },
    tweet(root, { id }) {
      return tweets.find((tweet) => tweet.id === id);
    },
  },
};

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

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

예시 코드

요청코드

query HeroNameAndFriendsQuery {
  hero {
    id
    name
    friends {
      id
      name
    }
  }
}

응답코드

{
  "hero": {
    "id": "2001",
    "name": "R2-D2",
    "friends": [
      {
        "id": "1000",
        "name": "Luke Skywalker"
      },
      {
        "id": "1002",
        "name": "Han Solo"
      },
      {
        "id": "1003",
        "name": "Leia Organa"
      }
    ]
  }
}

Recommend Projects