GraphQL 소개

소개

우리는 API를 구축하기 위해 REST 아키텍처를 사용해 왔습니다. 이 구조는 여전히 잘 사용되지만 문제도 있습니다. REST에는 다음과 같은 몇 가지 문제가 있습니다. 여러 URL을 사용해야 하고 데이터를 많이 가져와야 합니다. 우리가 건드리지 않을 거대한 개체 대신 우리가 원하는 정확한 데이터를 얻기 위한 솔루션이 필요합니다. 이것이 GraphQL이 작동하는 곳입니다.

GraphQL이란 무엇입니까?

GraphQL은 Facebook에서 개발한 오픈 소스 쿼리 언어입니다.
GraphQL은 강력한 쿼리 구문을 사용하여 그래프 형태로 데이터를 구조화합니다. 데이터가 그래프처럼 구조화되어 있기 때문에 데이터 탐색, 검색 및 수정을 통해 그래프처럼 데이터를 정렬할 수 있습니다. API를 보다 효율적으로 설계, 생성 및 사용할 수 있는 방법을 제공합니다. 백엔드에서 GraphQL이 하는 일은 본질적으로 API에서 얻는 것을 필터링하는 중개자 서비스를 생성하는 것입니다. 이렇게 하면 데이터의 과도한 가져오기와 여러 URL의 사용을 피할 수 있습니다.

GraphQL 시작하기

작동하려면 GraphQL은 서버와 클라이언트가 필요합니다. 서버에 대해 알아보겠습니다. 그래프QL을 노드 서버나 다른 유형의 서버에 연결할 수 있습니다. 이것이 첨부될 때 우리는 본질적으로 node/graphql 서버 또는 express/graphql 서버를 생성합니다. 이제 express를 사용하여 이 작업을 수행해 보겠습니다. 가장 먼저 할 일은 기본 익스프레스 서버를 만드는 것입니다. 다음으로 익스프레스 graphql 서버를 만들어야 합니다. 이것
/graphql 끝점을 생성하는 express-graphql이라는 플러그인이 필요합니다.

서버 설정

const express = require('express')
const app = express()
const { graphqlHTTP } = require('express-graphql')

var schema = buildSchema(`
  type Query {
    welcome: String
  }
`);
// root gives us a resolver
var root = {
  welcome: () => {
    return 'Welcome to the GraphQL World!';
  },
};
app.use('/graphql', graphqlHTTP( req => {
  return {
   schema: schema,
   rootValue: root,
   graphiql: true,
  }
}))
app.listen(3000)
console.log('Listening')

데이터 가져오기를 보다 효율적으로 만듭니다.

API에 요청을 보내면 필요한 것보다 더 많은 데이터를 반환할 수 있습니다. GraphQL을 사용하면 API에 쿼리를 보내 원하는 결과를 얻을 수 있습니다. 서버에서 가져와야 하는 데이터를 제한합니다. 데이터를 가져오는 쿼리의 예를 살펴보겠습니다.

데이터 가져오기 예

// basic query
{
   students {
      id
      firstName
   }
}

// Result of the query

{
   "data": {
      "students": [
         {
            "id": "1",
            "firstName": "Paula"
         },
         {
            "id": "2",
            "firstName": "Greg"
         },
         {
            "id": "3",
            "firstName": "Stephanie"
         }
      ]
   }
}

여러 URL 사용 방지

GraphQL 단일 요청에서 여러 관계형 데이터를 쿼리할 수 있습니다. 따라서 여러 URL/엔드포인트의 필요성이 줄어듭니다. 이를 통해 GraphQL은 선택적 끝점을 활용합니다.
예를 들어 보겠습니다

여러 개의 URL이 필요한 사람은 누구입니까? 예시

// multiple url query
{
   student(id: "10"){
      firstName
      lastName
      college{
         name
         location
      }
   }
}

/// result
{
   "data": {
      "students": [
         {
            "firstName": "Max",
            "lastName": "Kelly",
            "college": {
               "name": " University",
               "location": "Alabama"
              }
         },
   }
}

일반적으로 여러 URL에 요청을 보내야 하지만 GraphQL을 사용하면 단 한 번의 요청으로 이 작업을 수행할 수 있습니다.

스키마 예

type Query {
  Students[Students!]!
}

type Mutation {
  createStudent(collegeId:ID,firstName:String,lastName:String):String 
  updateStudent(collegeId:ID,firstName:String,lastName:String): Student!    
  deleteStudent(collegeId: ID!): Student!   
}

type Student {
   id:ID!
   firstName:String!
   lastName:String!
   college:College
}

type College {
   id:ID!
   name:String!
   location:String
   students:[Student]
}

이 스키마에서는 데이터를 요청할 때 데이터가 표시되는 방식을 설정합니다. 또한 데이터를 조작하기 위해 구현할 수 있는 선택적 변형을 설정합니다.

돌연변이

돌연변이는 쿼리에서 선택 사항입니다. REST의 CRUD 애플리케이션과 동일합니다. 돌연변이는 서버의 데이터를 수정하고 업데이트된 데이터를 다시 가져오는 방법입니다. 이러한 변형을 통해 데이터 항목을 생성, 업데이트 및 삭제할 수 있습니다.

결론

결론적으로 GraphQL을 사용하면 외부 API에서 다시 수신하는 데이터를 더 쉽게 선택할 수 있습니다. GraphQL은 언어에 구애받지 않으므로 모든 유형의 언어에 쉽게 통합할 수 있습니다. GraphQL은 이러한 동일한 기술과 스키마 중 일부를 사용하여 데이터베이스와 상호 작용할 수 있습니다. 유형이 문서 데이터베이스에 더 적합해 보이지만 문서 및 관계형 데이터베이스와 잘 짝을 이룹니다.