정보실

웹학교

정보실

javascript GraphQL 크래쉬 코스 (10 사진)

본문

항상 새로운 프로젝트에 GraphQL을 사용하고 싶었지만 어떻게 작동하는지 배울 시간이 없었습니까? 😃


https://dev.to/hexrcs/graphql-crash-course-in-10-pics-3b04 


새로운 GraphQL 지식을 손에 들고  한 주를 시작합시다! 🙌


👇 여기 10 분 동안 진행되는 GraphQL 충돌 코스가 있습니다! 🥳


1-GraphQL 작동 방식 


GraphQL은 유연한 API 호출을 위한 쿼리 언어입니다.


중첩 된 필드를 사용하여 단일 요청에서 원하는 것을 설명하면 정확한 모양의 데이터 페이 로드를 받게 됩니다.


데이터를 함께 스티칭 하거나 원치 않는 부분을 오버 페치 하기 위해 많은 작은 요청을 할 필요가 없습니다!


How GraphQL works 


2-GraphQL 쿼리 교환 


GraphQL은 라이브러리가 아니라 언어 사양입니다.


POST는 GET 요청으로 구조화 된 쿼리를 보냅니다. 서버는 사전 정의 된 스키마에 유효한지 확인하고, 해당 리졸버 함수를 실행하여 조작을 수행 한 다음 클라이언트에 데이터를 리턴 할 준비를 합니다.


A GraphQL Query Exchange 


3-GraphQL 스키마 


GraphQL 스키마는 유효한 쿼리의 구조와 반환 데이터 형식을 정의합니다. 클라이언트와 서버가 통신하는 데 사용하는 프로토콜입니다.


그것들은 강력하게 타이핑 되고 중첩 될 수 있습니다. 가장 일반적인 "객체"유형 외에도 스키마는 공용체, 열거 형, 인터페이스 등을 지원합니다.


GraphQL에는 쿼리, 돌연변이 또는 구독의 세 가지 작업 유형이 있습니다. 쿼리가 가장 일반적으로 사용되는 작업입니다.


The GraphQL Schema 


4-인수 


일부 쿼리를 사용하면 예를 들어 인수를 전달할 수 있습니다. 필터 결과. 스키마는 모든 유효한 인수를 정의합니다.


백엔드에는 조건부 쿼리를 수행하기 위해 해당하는 리졸버가 필요합니다.


참고 : GraphQL에는 SQL의> 또는 TOP, LIMIT와 같은 내장 비교 연산자 나 함수가 없습니다! 이러한 추가 기능은 리졸버에서 구현해야 합니다. 그러나 대부분의 GraphQL 프레임 워크에는 이러한 유틸리티 리졸버가 이미 포함되어 있습니다.


Arguments 


5-별명 


때로는 쿼리에서 동일한 필드를 여러 번 선택하지만 매번 다른 인수를 사용하여 (그림과 같이) 선택합니다. 이로 인해 이름 충돌이 발생하므로 필드에 별칭을 할당해야 합니다.


별칭은 모든 필드에 추가 할 수 있습니다.

Alias 


6-조각 


"서브 필드"를 프래그먼트로 랩핑하고 스프레드 연산자를 선택하여 재사용 할 수 있습니다. 동일한 필드를 반복해서 선택할 때 유용합니다. 이를 구조화 할 수 있는 GraphQL 필드 이름의 JS 객체로 생각하십시오!


조각은 HTTP 요청 페이로드의 쿼리 필드에서 기본 작업과 함께 서버로 전송됩니다.


Fragment 


7-변수 


GraphQL 변수를 사용하면 미리 작성된 쿼리 코드를 쉽게 모듈화하고 공유 / 재사용 할 수 있습니다. 쿼리 시작시 선언하고 기본값을 지정할 수 있습니다. 변수는 일반 JSON 객체와 같이 중첩 될 수 있습니다.


섹션 2-GraphQL 쿼리 교환의 그림에서 GraphQL 요청 페이로드에 주목했습니다. 이것이 "변수"필드의 목적입니다.


Variable 


8-인터페이스 


GraphQL 스키마의 인터페이스를 통해 복잡한 데이터 유형을 OOP 방식으로 유연하게 생성하고 사용할 수 있습니다.


유형은 여러 인터페이스를 구현할 수 있습니다.


반환 유형이 인터페이스 인 경우 on 키워드를 사용하여 특정 구현의 필드에 조건부로 액세스 할 수 있습니다.


Interface 


9-변이 조작 


쿼리와 달리 Mutation 작업은 서버 측 데이터를 변경하는 데 사용됩니다 (예 : 계정 생성, 인증 토큰 생성 또는 데이터 입력 추가


쿼리와 마찬가지로 변이에 인수를 제공 할 수 있습니다. 변이는 또한 값을 반환하므로 필요한 필드를 선택하는 것을 잊지 마십시오!


Mutation Operation 


10-구독 작업 


HTTP를 통해 쿼리를 주고 받는 대신 GraphQL에는 WebSocket 연결을 만들기 위한 구독 작업 유형도 있으므로 서버가 클라이언트에 지속적인 업데이트를 푸시 할 수 있습니다.


💹 주식 시장 또는 💬 메시징 앱과 같은 실시간 앱에 특히 유용합니다.


Subscription Operation 

보너스


온라인 운동장 


많은 GraphQL 프레임 워크에는 자동 완성 기능이 지원되는 웹 IDE와 GraphiQL 또는 GraphQL Playground와 같은 대화식 스키마 조회가 포함되어 있습니다. 쿼리를 디버깅 할 때 사용하십시오! ✨


Apollo GraphQL Server 샌드 박스를 선택하여 CodeSandbox를 사용하여 온라인으로 자신 만의 놀이터를 만들 수도 있습니다.


그러나 나처럼 게으른 경우 온라인으로 재생할 몇 가지 제로 구성 공개 GraphQL API가 있습니다. https://apis.guru/graphql-apis/


추가 자료 


Ladybug Podcast의 GraphQL에 대한 멋진 에피소드가 있습니다. 확인해보십시오!


이 GraphQL 충돌 코스를 즐기 셨기를 바랍니다. 😁 위대하고 생산적인 주를 앞당기십시오! 🙌


(@chrisachard에서 영감을 얻은 스레드 충돌 코스 형식 😁 그의 훌륭한 React / Redux, Git 충돌 코스를 확인하십시오!)



페이지 정보

조회 108회 ]  작성일19-12-04 15:38

웹학교