API 시리즈 섹션 3: GraphQL 및 fetch()로 쿼리 보내기

소개하다.

이 자습서에서는 GraphQL API에서 데이터를 조회하는 방법을 학습합니다.이 과정에서 GraphQL API, GraphQL 문법, 구조를 처리하는 데 자주 사용하는 도구를 접할 수 있고, 로컬 시스템에서 학습하고 실행하는 데 사용될 VanillaJS GraphQL 저장소를 받을 수 있습니다.
만약 당신이 앞부분을 놓쳤다면, 당신은 이곳에서 그것들을 찾을 수 있습니다.

선결 조건

HTML, Git 및 JavaScript에 익숙합니다.

GraphQL 소개

RESTful API가 REST 아키텍처 스타일을 따르는 것과 마찬가지로 GraphQL API는 엄격한 GraphQL 아키텍처를 따른다.GraphQL은 이런 GraphQL 아키텍처 조직을 사용하는 API를 위한 쿼리 언어다.그러나 RESTful API와 달리 GraphQL은 REST API를 사용하는 것보다 장점이 있고 REST API는 서로 다른 데이터에 서로 다른 URL 단점을 제공해야 한다.또한 GraphQL API는 필요한 데이터만 반환하고 REST API는 일반적으로 객체와 관련된 모든 데이터를 제공합니다.예를 들어, 사용자 이름을 가져오는 경우 REST API는 사용자 객체와 모든 속성을 반환합니다.이것은 캡처가 너무 많다고 불리며 응용 프로그램의 속도를 떨어뜨릴 수 있다.보시다시피 GraphQL을 사용하면 사용자 이름만 되돌려줍니다.
프런트엔드 개발자는 이미 구축된 API와 상호 작용하지만 이러한 API가 어떻게 구축되는지 이해하는 것이 매우 유용합니다.GraphQL 모델 구조는 GraphQL Foundation 사이트의 다음과 같은 일련의 유형 기반 모델로 정의된다.

type Query {
  hero: Character
}

type Character {
  name: String
  friends: [Character]
  homeWorld: Planet
  species: Species
}

type Planet {
  name: String
  climate: String
}

type Species {
  name: String
  lifespan: Int
  origin: Planet
}

위의 예에서 몇 가지 유형이 있는데 그것이 바로 조회, 역할, 행성과 종이다.검색 언어에 몇 가지 유형이 내장되어 있습니다.이런 유형의 예에는 조회와 변이가 있으니, 우리는 잠시 후에 깊이 있게 토론할 것이다.캐릭터, 행성, 종의 사용자 정의 유형을 대상 유형이라고 한다.각 유형에는 일반적으로 필드라고 하는 하나 이상의 속성이 있습니다.위의 예에서, 검색 형식은hero 필드가 있는데, 문자 대상 형식의 그룹을 되돌려줍니다.예를 들어, 문자열 또는 문자열에 지정된 객체(예: 문자열에 지정된 객체, 유형에 지정된 객체, 유형에 지정된 객체)를 예로 들 수 있습니다.JavaScript의 구문과 마찬가지로 괄호의 객체 유형은 객체 유형의 배열을 반환합니다.

조회와 돌연변이

RESTAPI는 몇 가지 방법이 있는데 예를 들어POST,GET,PATCH,PUT와DELETE이다. 그러나GraphQL은 조회와 변이 두 가지 방법밖에 없다.
질의는 REST API GET 메서드와 유사합니다.API에 저장된 데이터를 반환합니다.
돌연변이는 REST API의 POST, PUT, PATCH 및 DELETE 메서드를 포함하여 데이터를 변경합니다.

GraphQL API 쿼리 시작

설치 개발 환경의 수렁에 빠지지 않도록 OneGraphe의 GraphiQL 자원 관리자https://www.onegraph.com/graphiql에 있는 GraphiQL API를 어떻게 사용하는지 먼저 배울 것입니다.
홈 페이지는 다음과 같습니다.

OneGraph는 업무에서 가장 자주 사용하는 모든 API를 하나의 GraphQL API에 통합하는 회사이기 때문에 개발자는 하나의 조회에서 트위터, Salesforce, Slack, UPS를 조회할 수 있다.GraphiQL은 OneGraph에 속하지 않습니다.이것은 네가 독립적으로 사용할 수 있는 도구다.
GraphiQL에 대한 자세한 내용은 https://github.com/graphql/graphiql를 참조하십시오.
맨 왼쪽 열에는 OneGraph이 제품에 통합된 모든 API가 표시됩니다.우리는 중간의 열에서 조회를 작성할 것이다.맨 오른쪽 열은 검색 출력을 표시하는 위치입니다.
다음 예제에서는 사용자nbhankes로부터 기사 정보를 얻기 위해 DEV blogging API를 조회합니다.

GraphiQL 브라우저는 API를 개발하는 GraphiQL API 모드 구조를 보여주고 API에서 검색할 데이터를 선택할 수 있도록 합니다.이 선택을 할 때 자원 관리자가 검색어를 만들었습니다. 중간 열에서 이 검색어를 보았습니다.검색이 이루어지면 도구 모음의play 단추를 눌러서 검색을 실행합니다.그런 다음 질의를 DEV API로 보내면 결과가 오른쪽에 표시됩니다.
다음은 당신이 배울 수 있는 실제 코드입니다.GraphQL 질의로 표시된 섹션의 용어인 모서리 및 노드에 주의하십시오.노드 정의 대상, 모서리 정의 대상 간의 관계, 그리고 선택 사항(중계 GraphQL 클라이언트 제외).복잡한 API 모드를 처리할 때 질의에 이를 추가하는 것이 유용할 수 있습니다.소개하기 편리하도록 그것들을 이해하는 것이 매우 중요하다.에지 및 노드에 대한 자세한 내용을 보려면 https://www.apollographql.com/blog/explaining-graphql-connections-c48b7c3d6976/를 방문하십시오.
다음 코드에 대해 자세히 살펴보겠습니다.

//GraphQL Query

query MyQuery {
  devTo {
    articles(username: "nbhankes") {
      edges {
        node {
          title
        }
      }
    }
  }
}


//API Response

{
  "data": {
    "devTo": {
      "articles": {
        "edges": [
          {
            "node": {
              "title": "The API Series - Part 2: The REST API, fetch(), and AXIOS"
            }
          },
          {
            "node": {
              "title": "The API Series - Part 1: An Intro to APIs"
            }
          },
          {
            "node": {
              "title": "Classless CSS Isn't Trashy"
            }
          },
          {
            "node": {
              "title": "Upgrade Your CSS: The Syntax.fm Typography Sizing Strategy"
            }
          }
        ]
      }
    }
  }
}




//GraphQL Query without edges or node

query MyQuery {
  devTo {
    articles(username: "nbhankes") {
      title
    }
  }
}


//API Response without edges or node

{
  "data": {
    "devTo": {
      "articles": [
          {
              "title": "The API Series - Part 2: The REST API, fetch(), and AXIOS"
          },
          {
              "title": "The API Series - Part 1: An Intro to APIs"
          },
          {
              "title": "Classless CSS Isn't Trashy"
          },
          {
              "title": "Upgrade Your CSS: The Syntax.fm Typography Sizing Strategy"
          }
        ]
      }
    }
  }

위 코드에서 조회의 모양이 API 응답의 모양을 정의하는 것을 볼 수 있습니다.응답 형태는 중첩된 JavaScript 객체와 유사하며 이와 유사한 처리를 할 수 있습니다.

프로젝트에서 GraphQL 사용: 프레젠테이션

GraphiQL 브라우저는 매우 유용하지만, 코드에만 GraphiQL 조회를 추가하고 작업을 기대할 수는 없습니다.다음은 GitHub repo에 대한 링크로, GavaScript와 Fetch() API를 사용하여GraphQL 조회를 수행합니다.이 프레젠테이션 저장소는 조회SpaceX GraphQL API에 사용되고 응답 데이터를 브라우저에 보여주는 웹 사이트의 코드를 포함한다.프레젠테이션은 다음과 같은 기능을 제공합니다.

API를 사용하는 장점은 스페이스X의 최고경영자가 바뀌면 우리 사이트는 API가 업데이트된 후에 이러한 변화를 자동으로 반영한다는 것이다.
액세스Live Demo
재구매 링크: https://github.com/nbhankes/vanillaJS-GraphQL-demo
저장소의 주석과 코드를 연구하고 자술한 파일의 설명에 따라 조작한다.md 파일은 프로젝트를 로컬 환경에서 실행합니다.연습용으로 질의 및 템플릿 텍스트를 사용자 정의합니다.

결론

이 자습서에서는 GraphQL API에서 데이터를 조회하는 방법을 학습합니다.GraphQL API를 처리하는 데 자주 사용하는 도구, GraphQL 문법과 구조를 접하였으며, 로컬 시스템에서 학습하고 실행하는 데 사용되는VanillaJS GraphQL 저장소를 받았습니다.