소개

이번에는 GraphQL의 개요를 소개합니다!

GraphQL이 나올 때까지 어떤 데이터 통신이 있었습니까?

REST의 문제점은 무엇입니까?

GraphQL로 할 수있는 일

GraphQL을 시작하는 방법

설명합니다!

동영상으로, 템포 잘 배우고 싶은 분은 이쪽을 부디!
【YouTube 동영상】 GraphQL을 사용하고 싶지만 아직하고 있지 않은 분에게! GraphQL의 시작 방법을 설명합니다!

데이터 통신의 역사

최초로 나온 데이터 통신으로서 RPC라고 하는 규약이 있습니다.
이것은 Remote Procedure Call의 약자로 클라이언트 측에서 서버 측 메서드를 호출할 수 있습니다.
최근에는 Google이 고안한 HTTP/2 준거의 gRPC라는 것도 나오고 있네요.

다음에 나온 것은 Microsoft가 고안한 SOAP입니다.
이것은 XML을 사용하여 데이터 통신을 수행합니다.
SAML 인증에서도 사용되고 있네요.
아래와 같은 xml 파일을 만들어야 합니다.
잠깐, 읽기가 어렵습니다.

<?xml version="1.0"?>
<PurchaseOrder PurchaseOrderNumber="99503" OrderDate="1999-10-20">
  <Address Type="Shipping">
    <Name>Ellen Adams</Name>
    <Street>123 Maple Street</Street>
    <City>Mill Valley</City>
    <State>CA</State>
    <Zip>10999</Zip>
    <Country>USA</Country>
  </Address>
  <Address Type="Billing">
    <Name>Tai Yee</Name>
    <Street>8 Oak Avenue</Street>
    <City>Old Town</City>
    <State>PA</State>
    <Zip>95819</Zip>
    <Country>USA</Country>
  </Address>
  <DeliveryNotes>Please leave packages in shed by driveway.</DeliveryNotes>
  <Items>
    <Item PartNumber="872-AA">
      <ProductName>Lawnmower</ProductName>
      <Quantity>1</Quantity>
      <USPrice>148.95</USPrice>
      <Comment>Confirm this is electric</Comment>
    </Item>
  </Items>
</PurchaseOrder>

SOAP보다 쉽게 ​​데이터 통신할 수 있는 규약으로서 태어난 것이 REST입니다.
REST는 리소스 URL에 HTTP 메서드(GET, POST, PUT, PATCH, DELETE)를 사용하여 응답을 반환하여 사용합니다.
백엔드 측에서 제어하기 쉽고, 간단하고 도입하기 쉽습니다!

REST 문제

REST는 간단하고 사용하기 쉽지만 응답이 고정되어 있으므로 다음과 같은 문제가 있습니다.

응답이 고정 때문에 ...
- 여러 데이터를 곱하여 사용하려는 경우 하나의 API로 어렵습니다.
- 사용하는 정보가 적은 경우 전면에서 필터링해야 함

GraphQL은 위의 문제를 해결하기 위해 Facebook에서 개발했습니다.
이것은 프론트 측이 쿼리를 요청하는 프론트 주체의 데이터 통신입니다.
또, API의 사양을 스키마로서 정해 개발을 진행합니다.

GraphQL로 할 수 있는 일

GraphQL은 다음과 같은 기능을 제공합니다.
분위기만으로도 잡을 수 있도록 코드도 써 두었습니다.

쿼리

뮤테이션

구독

쿼리

쿼리는 SQL 문과 같이 원하는 데이터를 씁니다.

query {
  # 欲しいデータのモデル名を書く
  person(personId: 1) {
    # 実際に取得したいデータを書く
    name
    age
    address
    # リレーションを設定している場合、紐づいている先のデータも取れます！
    company {
      name
    }
  }
}

뮤테이션

값을 변경하는 데 사용합니다.
이것은 REST와 마찬가지로 사용할 수 있습니다.

mutation personMutation {
  update(name: "Namae!!!") {
    id
    name
  }
}

구독

클라이언트 측이 데이터 변경을 감지했을 때 작동합니다.

subscription {
  nameChange {
    name
  }
}

GraphQL의 시작

REST API의 paw와 postman과 같이 GraphQL에도 전용 도구가 있습니다.
GraphiQL 또는 GraphQL playground 중 하나가 좋다고 생각합니다.
이것들을 사용하면, 쿼리문의 발행을 시험할 수가 있습니다.

또한 쿼리 문을 두드리는 서버로는 스타 워즈 API와 GitHub API가 있습니다.
쿼리 문장만이라면 스타 워즈 API, 뮤테이션도 시도하고 싶다면 GitHub API에서 놀아 볼 수 있습니다!

시도해보고 실제로 직접 만들고 싶다면 Apollo 또는 Relay 프로젝트에서 사용하려는 서버를 선택하고 만들어보십시오! !

요약

이번에 GraphQL에 대해 간단하게 소개했습니다.

감상이나 코멘트 등 있으면 잘 부탁드립니다!
또, 트위터 이나 youtube 에서의 코멘트도 기다리고 있습니다!