프런트엔드는 GraphQL API를 어떻게 호출하나요?

GraphQL은 API용 쿼리 언어이자 데이터 쿼리용 런타임입니다. GraphQL은 API의 데이터에 대한 완전하고 이해하기 쉬운 설명을 제공하므로 클라이언트는 중복 없이 필요한 데이터를 정확히 얻을 수 있습니다.

GraphQL에는 개발자가 GraphQL 서버를 구축하는 데 도움이 되도록 다양한 언어에 대한 서버 측 구현이 있습니다. (추천 학습: 프론트엔드 동영상)

그리고 gq-loader는 프론트엔드 프로젝트를 위한 클라이언트 측 구현이라고 생각하면 됩니다. 그 목적은 프론트엔드 개발을 돕는 것입니다. 학생들은 GraphQL API를 더 쉽게 호출할 수 있어 프런트엔드 개발자가 일반 js 모듈처럼 쉽게 GraphQL을 사용할 수 있어 프런트엔드 개발자가 import 또는 require를 통해 .gql 및 .graphql 파일을 js 파일로 가져올 수 있습니다. 그런 다음 직접 전화하세요.

그리고 #import 구문을 통해 조각과 같은 다른 .gql 파일 가져오기도 지원합니다.

#import는 #require 및 #include라는 두 가지 별칭도 제공합니다. 이 두 별칭의 사용법과 동작은 #import와 완전히 동일합니다.

Installation

npm install gq-loader --save-dev

또는

yarn add gq-loader

기본 사용법

다른 로더와 마찬가지로 먼저 webpack.config.js에 gq-loader 구성을 추가합니다.

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: {
    loader: 'gq-loader'
    options: {
      url: 'Graphql Server URL'
    }
  }
}

그런 다음 import를 통해 js 파일을 가져올 수 있습니다. .gql 파일을 가져와서 사용합니다. 이미 작동 중인 Graphql 서버가 있다고 가정합니다. 그런 다음 먼저 사용자를 쿼리할 수 있는 getUser.gql을 만듭니다. , 우리는 다른 . #import를 통해 gql 파일 조각.gql을 반환합니다. 이 파일에서는 반환할 사용자의 필드 정보를 설명하므로 이를 다른 위치에서 "재사용"할 수도 있습니다. 이 파일

#import './fragment.gql' 
query MyQuery($name: String) {
  getUser(name: $name)
    ...userFields
  }
}

좋아요. js 파일에서 getUser.gql을 가져와 사용자를 쿼리하는 데 사용합니다. 살펴보겠습니다.

fragment userFields on User {
  name
  age
}

getUser를 호출할 때 함수 매개변수를 GraphQL 전달 변수에 제공할 수 있으며 이러한 변수는 쿼리 매개변수입니다. .

사용자 정의된 요청

기본적으로 gq-loader는 graphql 요청을 완료하는 데 도움이 되지만 일부 시나리오에서는 모든 요청을 직접 제어할 수도 있습니다. 그렇다면 요청 속성을 통해 "사용자 정의"할 수도 있습니다. 예시를 보세요. 먼저 로더 구성을 약간 변경해야 합니다.

import getUser from './getUser.gql';
import React from 'react';
import ReactDOM from 'react-dom';
async function query() {
  const user = await getUser({ name: 'bob' });
  console.log('user', user);
}
function App() {
  return <button onClick={query}>click</button>;
}
ReactDOM.render(<App />, document.getElementById(&#39;root&#39;));

your_request_module_path에 사용자 정의 요청 모듈 경로를 입력하세요. gq-loader는 자동으로 해당 요청 모듈을 로드하고 사용하며, 모듈은 "요청 기능"만 변경하면 됩니다. ", 다음 사용자 정의 예를 보세요

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: {
    loader: 'gq-loader'
    options: {
      url: 'Graphql Server URL',
      //指定自动请求模块路径
      request: require.resolve('your_request_module_path');
    }
  }
}

그 중 options는 .gql 파일을 가져온 후 "함수의 두 번째 매개 변수"입니다. 예를 들어 this

onst $ = require('jquery');
//url 是要请求的 GraphQL 服务地址
//data 是待发送的数据
//options 是自定义选项
module.exports = function(url, data, options){
  //如果有需要还可以处理 options
  return $.post(url, data);
};

와 같이 options 매개 변수를 전달할 수 있습니다. js에서 gq-loader의 확장자에 대해 값이 구성됩니다. 가져올 때 확장자는 생략할 수 없습니다. 이 옵션은 .gql 파일 및 기타 .gql 파일에만 적용됩니다.

위 내용은 프런트엔드는 GraphQL API를 어떻게 호출하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!