GraphQL은 API용 쿼리 언어이자 데이터 쿼리용 런타임입니다. GraphQL은 API의 데이터에 대한 완전하고 이해하기 쉬운 설명을 제공하므로 클라이언트는 중복 없이 필요한 데이터를 정확히 얻을 수 있습니다.
GraphQL에는 개발자가 GraphQL 서버를 구축하는 데 도움이 되도록 다양한 언어에 대한 서버 측 구현이 있습니다. (추천 학습: 프론트엔드 동영상)
그리고 gq-loader는 프론트엔드 프로젝트를 위한 클라이언트 측 구현이라고 생각하면 됩니다. 그 목적은 프론트엔드 개발을 돕는 것입니다. 학생들은 GraphQL API를 더 쉽게 호출할 수 있어 프런트엔드 개발자가 일반 js 모듈처럼 쉽게 GraphQL을 사용할 수 있어 프런트엔드 개발자가 import 또는 require를 통해 .gql 및 .graphql 파일을 js 파일로 가져올 수 있습니다. 그런 다음 직접 전화하세요.
그리고 #import 구문을 통해 조각과 같은 다른 .gql 파일 가져오기도 지원합니다.
#import는 #require 및 #include라는 두 가지 별칭도 제공합니다. 이 두 별칭의 사용법과 동작은 #import와 완전히 동일합니다.
Installation
1 |
|
또는
1 |
|
기본 사용법
다른 로더와 마찬가지로 먼저 webpack.config.js에 gq-loader 구성을 추가합니다.
1 2 3 4 5 6 7 8 9 10 |
|
그런 다음 import를 통해 js 파일을 가져올 수 있습니다. .gql 파일을 가져와서 사용합니다. 이미 작동 중인 Graphql 서버가 있다고 가정합니다. 그런 다음 먼저 사용자를 쿼리할 수 있는 getUser.gql을 만듭니다. , 우리는 다른 . #import를 통해 gql 파일 조각.gql을 반환합니다. 이 파일에서는 반환할 사용자의 필드 정보를 설명하므로 이를 다른 위치에서 "재사용"할 수도 있습니다. 이 파일
1 2 3 4 5 6 |
|
좋아요. js 파일에서 getUser.gql을 가져와 사용자를 쿼리하는 데 사용합니다. 살펴보겠습니다.
1 2 3 4 |
|
getUser를 호출할 때 함수 매개변수를 GraphQL 전달 변수에 제공할 수 있으며 이러한 변수는 쿼리 매개변수입니다. .
사용자 정의된 요청기본적으로 gq-loader는 graphql 요청을 완료하는 데 도움이 되지만 일부 시나리오에서는 모든 요청을 직접 제어할 수도 있습니다. 그렇다면 요청 속성을 통해 "사용자 정의"할 수도 있습니다. 예시를 보세요. 먼저 로더 구성을 약간 변경해야 합니다.
1 2 3 4 5 6 7 8 9 10 11 |
|
your_request_module_path에 사용자 정의 요청 모듈 경로를 입력하세요. gq-loader는 자동으로 해당 요청 모듈을 로드하고 사용하며, 모듈은 "요청 기능"만 변경하면 됩니다. ", 다음 사용자 정의 예를 보세요
1 2 3 4 5 6 7 8 9 10 11 12 |
|
그 중 options는 .gql 파일을 가져온 후 "함수의 두 번째 매개 변수"입니다. 예를 들어 this
1 2 3 4 5 6 7 8 |
|
와 같이 options 매개 변수를 전달할 수 있습니다. js에서 gq-loader의 확장자에 대해 값이 구성됩니다. 가져올 때 확장자는 생략할 수 없습니다. 이 옵션은 .gql 파일 및 기타 .gql 파일에만 적용됩니다.
위 내용은 프런트엔드는 GraphQL API를 어떻게 호출하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!