JavaScript API 상태로 GraphQL 쿼리를 연습하십시오-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

JavaScript API 상태로 GraphQL 쿼리를 연습하십시오

William Shakespeare

Apr 12, 2025 am 11:33 AM

JavaScript API 상태로 GraphQL 쿼리를 연습하십시오

GraphQL API를 구축하는 방법을 배우는 것은 매우 어려울 수 있습니다. 그러나 10 분 안에 GraphQL API를 사용하는 방법을 배울 수 있습니다! 그리고 그 일이 일어납니다. 완벽한 API를 얻었습니다 : 새롭고 신선한 VS 코드 상태의 JavaScript GraphQL API.

JavaScript Survey의 상태는 JavaScript 환경에 대한 연례 조사입니다. 우리는 지금 4 년 동안 해왔으며 가장 최근의 판은 20,000 명 이상의 개발자에 도달했습니다.

우리는 항상 Gatsby에 쇼케이스 사이트를 구축하기 위해 Gatsby에 의존했지만 올해까지는 Mere Mercals Miscals를 통해“Elasticsearch”로 알려진 일종의 비전 마법을 통해 생성 된 정적 Yaml 파일의 형태로 Gatsby에게 데이터를 공급했습니다.

그러나 Gatsby는 어쨌든 GraphQL로 섭취하는 모든 데이터 소스를 푸데하기 때문에 우리는 Middleman을 건너 뛰고 직접 Feed DraphQL을 먹일 수도 있습니다! 예,이 은유는 두 번째에 의해 더 심해지고 이미 후회합니다. 요점은 : 우리는 데이터를위한 내부 그래프 QL API를 구축했으며 이제는 데이터 세트를 쉽게 이용할 수 있도록 모든 사람이 사용할 수있게 만들었습니다!

“하지만 잠깐만 요.”당신은 말합니다. "나는 평생 GraphQL을 배울 시간이없는 칼날을 연구하는 데 보냈다!" 걱정하지 마십시오 :이 기사가 들어오는 곳입니다.

GraphQL이란 무엇입니까?

핵심적으로 GraphQL은 API에서받을 데이터를 지정할 수있는 구문입니다. 데이터베이스가 아닌 API를 말했습니다. SQL과 달리 GraphQL 쿼리는 데이터베이스로 직접 이동하지 않고 GraphQL API 엔드 포인트로 이동하여 데이터베이스 또는 기타 데이터 소스에 연결할 수 있습니다.

REST와 같은 오래된 패러다임에 대한 GraphQL의 가장 큰 장점은 원하는 것을 요청할 수 있다는 것입니다. 예를 들어:

 쿼리 {
  사용자 (id : "foo123") {
  이름
 }
}

단일 이름 필드가있는 사용자 객체를 얻을 수 있습니다. 이메일도 필요하십니까? 그냥 :

 쿼리 {
 사용자 (id : "foo123") {
  이름
  이메일
 }
}

보시다시피,이 예제의 사용자 필드는 ID 인수를 지원합니다. 그리고 이제 우리는 GraphQL의 가장 멋진 특징, 중첩에 이르렀습니다.

 쿼리 {
 사용자 (id : "foo123") {
  이름
  이메일
    게시물 { 
      제목
      몸
    }
  }
}

여기서 우리는 사용자의 게시물을 찾고 제목과 신체를로드하고 싶다고 말합니다. GraphQL의 좋은 점은 API 계층이 실제 데이터베이스 내부에 중첩 된 형식으로 저장되지 않더라도 데이터베이스와 직접 대화하지 않기 때문에 해당 추가 정보를 해당 형식으로 가져 오는 방법을 알아내는 작업을 수행 할 수 있다는 것입니다.

Sebastian Scholl은 칵테일 믹서에서 처음으로 만나는 것처럼 GraphQL을 설명하는 훌륭한 작업을 수행합니다.

Graphiql 소개

Graphiql (거기에있는“i”참고)은 가장 일반적인 GraphQL IDE이며, JavaScript API 상태를 탐색하는 데 사용하는 도구입니다. 지금 당장 graphiql.stateofjs.com에서 시작할 수 있으며 엔드 포인트 (api.stateofjs.com/graphql)에 자동으로 연결됩니다. UI는 Explorer 패널, 쿼리 빌더 및 결과 패널의 세 가지 주요 요소로 구성됩니다. 나중에 문서 패널을 추가하지만 지금은 간단하게 유지하겠습니다.

Explorer 탭은 OneGraph에 의해 개발되고 유지되는 Turbo-Boosted GraphiqL 버전의 일부입니다. 우리가 통합하도록 도와 주셔서 감사합니다. 자신의 GraphIQL 인스턴스를 배포하려면 예제 리포를 확인하십시오.

걱정하지 마세요. 아직 코드를 작성하게하지 않겠습니다. 대신, 지난 4 년간 RECT의 개발자 경험에 해당하는 기존 GraphQL 쿼리에서 시작하겠습니다.

내부적으로 GraphQL을 사용하여 사이트를 구축했다고 말한 것을 기억하십니까? 우리는 API를 노출 할뿐만 아니라 쿼리 자체를 노출하고 있습니다. 작은 "내보내기"버튼을 클릭하고 "GraphQL"탭에서 쿼리를 복사하고 GraphIQL의 쿼리 빌더 창 안에 붙여 넣은 다음 "재생"버튼을 클릭하십시오.

모든 것이 계획에 따라 진행되면 결과 패널에 데이터가 나타납니다. 잠시 시간을내어 쿼리를 분석합시다.

 query react_experifequery {
  설문 조사 (조사 : JS) {
    도구 (ID : 반응) {
      ID
      엔티티 {
        홈페이지
        이름
        github {
          URL
        }
      }
      경험 {
        Allyears {
          년도
          총
          완성 {
            세다
            백분율
          }
          인식 interestsatisfaction {
            의식
            관심
            만족
          }
          버킷 {
            ID
            세다
            백분율
          }
        }
      }
    }
  }
}

먼저 쿼리 이름 인 React_experienceQuery와 함께 GraphQL 쿼리의 시작을 정의하는 쿼리 키워드가 제공됩니다. 쿼리 이름은 GraphQL에서 선택 사항이지만 디버깅 목적으로 유용 할 수 있습니다.

그런 다음 첫 번째 필드 인 설문 조사를 통해 설문 조사 논쟁을합니다. (우리는 또한 CSS 상태 설문 조사가 있으므로 문제의 설문 조사를 지정해야했습니다.) 그런 다음 ID 인수를 취하는 도구 필드가 있습니다. 그 후 모든 것은 해당 특정 도구의 API 결과와 관련이 있습니다. 엔티티는 선택한 특정 도구 (예 : React)에 대한 정보를 제공하는 반면 경험에는 실제 통계 데이터가 포함되어 있습니다.

이제 여기에서 모든 필드를 계속 통과하기보다는 약간의 트릭을 가르쳐 줄 것입니다 : 명령 Click (또는 Control Click). 축하합니다. 방금 GraphQL의 멋진 속임수 중 하나 인 자기 문서화를 목격했습니다! API 정의에 문서를 직접 쓸 수 있으며 GraphIQL은 결국 최종 사용자가 사용할 수있게합니다.

변수 변경

쿼리 빌더에서 "react"를 "vuejs"로 바꾸면 또 다른 멋진 그래프 QL 인 자동 완성을 알아야합니다. 이것은 실수를 피하거나 시간을 절약하는 데 큰 도움이됩니다! "Play"를 다시 누르면 동일한 데이터를 얻을 수 있지만 이번에는 Vue에 대해서는 동일한 데이터를 얻을 수 있습니다.

탐색기 사용

이제 하나 더 GraphQL 전동 공구 인 Explorer를 잠금 해제합니다. Explorer는 기본적으로 전체 API의 트리로, 구조를 시각화 할뿐만 아니라 한 줄의 코드를 작성하지 않고도 쿼리를 구축 할 수 있습니다! 이번에는 Explorer를 사용하여 React 쿼리를 재현 해 보겠습니다.

먼저 새 브라우저 탭을 열고 graphiql.stateofjs.com을로드하여 새로운 시작하겠습니다. 탐색기의 설문 조사 노드를 클릭하고 그 아래에서 도구 노드에서 "재생"을 클릭하십시오. 도구의 ID 필드는 결과에 자동으로 추가되어야하며, 이는 기본 인수 값 ( "TypeScript")을 "React"로 변경하기에 좋은시기입니다.

다음으로, 계속 드릴 다운합시다. 서브 필드가없는 엔터티를 추가하는 경우 그 아래에 약간의 삐걱 거리는 빨간 선이 표시되어야합니다. 따라서 ID, 이름 및 홈페이지를 최소한 추가하겠습니다. 또 다른 유용한 트릭 : Explorer에서 옵션 제어 클릭을 통해 Field의 모든 서브 필드를 추가하도록 GraphIQL을 자동으로 알려줄 수 있습니다.

다음은 경험입니다. JavaScript 사이트 상태에서 처음 복사 한 쿼리에 접근하는 무언가를 얻을 때까지 필드와 서브 필드를 계속 추가하십시오. 선택한 모든 항목은 쿼리 빌더 패널 내부에 즉시 반영됩니다. 거기에서 당신은 방금 당신의 첫 번째 GraphQL 쿼리를 썼습니다!

필터링 데이터

경험이있는 보라색 필터 항목을 발견했을 수도 있습니다. 이것은 실제로 우리 사이트를 탐색하는 것과 달리 GraphQL API를 사용하려는 주요 이유입니다. API가 제공하는 집계는 응답자의 성별, 회사 규모, 급여 또는 국가와 같은 여러 요인으로 필터링 할 수 있습니다.

필터를 확장하고 CompanySize를 선택한 다음 EQ 및 Range_more_than_1000을 선택하십시오. 대기업들 사이에서 React의 인기를 계산했습니다! 대신 Range_1을 선택하면 이제 프리랜서 및 독립 개발자 간의 동일한 데이터 포인트와 비교할 수 있습니다.

GraphQL은 필드 및 인수와 같은 매우 낮은 수준의 프리미티브 만 정의하므로 이러한 EQ, IN, NIN 등, 필터는 GraphQL 자체의 일부가 아니지만 API를 설정할 때 스스로 정의한 인수는 단순히 논쟁을합니다. 이것은 처음에는 많은 작업 일 수 있지만 클라이언트가 API를 쿼리하는 방법을 완전히 제어 할 수 있습니다.

결론

GraphQL API를 쿼리하는 것이 그다지 큰 거래가 아니라는 것을 알았기를 바랍니다. 이제 실제로 GraphQL 데이터를 실제 앱에 통합하는 것은 또 다른 문제이지만, 이는 대부분 클라이언트와 서버 간의 데이터 전송을 처리하는 복잡성 때문입니다. GraphQL 부분 자체는 실제로 매우 쉽습니다!

GraphQL을 시작하거나 데이터를 쿼리하고 놀라운 새로운 통찰력을 얻을만큼 충분히 배우려면이 가이드가 유용한 것으로 입증되기를 바랍니다.

다음 설문 조사 (CSS 2020 상태 여야 함)에 참여하는 데 관심이 있으시면 메일 링리스트에 가입하여 시작할 때 알림을받을 수 있습니다.