https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

GraphQL은 API용 쿼리 언어이며 데이터용 유형 시스템을 사용하여 쿼리를 실행하기 위한 서버 측 런타임입니다.

이 기사에서는 GraphQL API에 대한 기본 쿼리를 만드는 방법을 살펴보겠습니다.

API 정의

해당 유형에 대한 유형과 필드를 정의하여 API를 정의하고 각 유형의 각 필드에 대한 기능을 제공합니다.

예를 들어 다음 유형이 있는 경우:

type Query {  
  person: Person  
}

그런 다음 데이터를 반환하는 해당 유형에 대한 함수를 만들어야 합니다.

function Query_person(request) {  
  return request.person;  
}

쿼리 만들기

GraphQL 서비스가 실행되면 GraphQL 쿼리를 보내 서버에서 유효성을 검사하고 실행할 수 있습니다.

예를 들어 다음과 같이 쿼리를 만들 수 있습니다.

{  
  person {  
    firstName  
  }  
}

그러면 다음과 같은 JSON을 얻을 수 있습니다.

{  
  "person": {  
    "firstName": "Joe"  
  }  
}

쿼리 및 변형

쿼리는 GraphQL 서버에서 데이터를 가져오기 위한 것이고 돌연변이는 서버에 저장된 데이터를 조작하는 데 사용됩니다.

예를 들어 다음은 사람의 이름을 가져오는 쿼리입니다.

{  
  person {  
    name  
  }  
}

그런 다음 서버에서 다음 JSON을 얻을 수 있습니다.

{  
  "data": {  
    "person": {  
      "name": "Joe"  
    }  
  }  
}

필드name는 String 유형을 반환합니다.

더 많은 데이터를 얻으려면 쿼리를 원하는 대로 변경할 수 있습니다. 예를 들어 다음 쿼리를 작성하는 경우:

{  
  person {  
    name  
    friends {  
      name  
    }  
  }  
}

그러면 다음과 같은 응답을 얻을 수 있습니다.

{  
  "data": {  
    "person": {  
      "name": "Joe",  
      "friends": [  
        {  
          "name": "Jane"  
        },  
        {  
          "name": "John"  
        }  
      ]  
    }  
  }  
}

위의 예에는 friends가 배열입니다. 쿼리 관점에서 보면 동일하게 보이지만 서버는 지정된 유형에 따라 무엇을 반환할지 알고 있습니다.

인수

쿼리와 돌연변이에 인수를 전달할 수 있습니다. 쿼리에 인수를 전달하면 쿼리로 더 많은 작업을 수행할 수 있습니다.

예를 들어 다음과 같이 인수를 전달할 수 있습니다.

{  
  person(id: "1000") {  
    name      
  }  
}

그러면 다음과 같이 됩니다.

{  
  "data": {  
    "person": {  
      "name": "Luke"  
    }  
  }  
}

서버에서.

GraphQL을 사용하면 중첩된 객체에 인수를 전달할 수 있습니다. 예를 들어 다음과 같이 작성할 수 있습니다.

{  
  person(id: "1000") {  
    name  
    height(unit: METER)  
  }  
}

그러면 다음과 같은 응답을 받을 수 있습니다.

{  
  "data": {  
    "person": {  
      "name": "Luke",  
      "height": 1.9  
    }  
  }  
}

예에서 height 필드에는 유한한 값 집합을 나타내는 열거형 유형인 unit가 있습니다.
unit METER 또는 FOOT일 수 있습니다.

파편

복잡한 쿼리를 재사용할 수 있도록 프래그먼트를 정의할 수 있습니다.

예를 들어 조각을 정의하고 다음과 같이 사용할 수 있습니다.

{  
  leftComparison: person(episode: FOO) {  
    ...comparisonFields  
  }  
  rightComparison: person(episode: BAR) {  
    ...comparisonFields  
  }  
}  
​  
fragment comparisonFields on Character {  
  name  
  appearsIn  
  friends {  
    name  
  }  
}

위의 코드에서 각 쿼리에 포함하려는 필드 목록이 있는 comparisonFields 조각을 정의했습니다.

그런 다음 leftComparison 연산자를 사용하여 rightComparison 조각의 필드를 포함하는 comparisonFields 및 ... 쿼리가 있습니다.

그러면 다음과 같이 됩니다.

{  
  "data": {  
    "leftComparison": {  
      "name": "Luke",  
      "appearsIn": [  
        "FOO",  
        "BAR"  
      ],  
      "friends": [  
        {  
          "name": "Jane"  
        },  
        {  
          "name": "John"  
        }  
      ]  
    },  
    "rightComparison": {  
      "name": "Mary",  
      "appearsIn": [  
        "FOO",  
        "BAR"  
      ],  
      "friends": [  
        {  
          "name": "Mary"  
        },  
        {  
          "name": "Alex"  
        }  
      ]  
    }  
  }  
}

프래그먼트 내에서 변수 사용

다음과 같이 변수를 조각으로 전달할 수 있습니다.

query PersonComparison($first: Int = 3){  
  leftComparison: person(episode: FOO) {  
    ...comparisonFields  
  }  
  rightComparison: person(episode: BAR) {  
    ...comparisonFields  
  }  
}  
​  
fragment comparisonFields on Character {  
  name  
  appearsIn  
  friends(first: $first) {  
    name  
  }  
}

그러면 다음과 같은 결과를 얻을 수 있습니다.

{  
  "data": {  
    "leftComparison": {  
      "name": "Luke",  
      "appearsIn": [  
        "FOO",  
        "BAR"  
      ],  
      "friends": [  
        {  
          "name": "Jane"  
        },  
        {  
          "name": "John"  
        }  
      ]  
    },  
    "rightComparison": {  
      "name": "Mary",  
      "appearsIn": [  
        "FOO",  
        "BAR"  
      ],  
      "friends": [  
        {  
          "name": "Mary"  
        },  
        {  
          "name": "Alex"  
        }  
      ]  
    }  
  }  
}

응답으로.

작업 유형은 쿼리, 변형 또는 구독이 될 수 있으며 수행하려는 연산자를 설명합니다. 쿼리 약식 구문을 사용하지 않는 한 필수입니다. 이 경우 작업에 대한 이름이나 변수 정의를 제공할 수 없습니다.

작업 이름은 작업에 대한 의미 있고 명시적인 이름입니다. 다중 작업 문서에 필요합니다. 그러나 디버깅 및 서버 측 로깅에 도움이 되므로 사용을 권장합니다.

이름으로 작업을 식별하기 쉽습니다.

결론

GraphQL은 명확한 방식으로 서버에 요청을 보낼 수 있는 쿼리 언어입니다. 서버에 변수와 함께 작업 유형 및 이름이 포함된 중첩 개체를 전송하여 작동합니다.

그런 다음 서버는 우리가 찾고 있는 응답을 반환합니다.

작업 유형에는 데이터를 가져오기 위한 쿼리와 서버의 데이터를 변경하기 위한 변형이 포함됩니다.