フロントエンドはどのようにして GraphQL API を呼び出しますか?

# GraphQL は、API のクエリ言語であると同時に、データをクエリするためのランタイムでもあります。 GraphQL は API 内のデータの完全でわかりやすい説明を提供するため、クライアントは冗長性を持たずに必要なデータを正確に取得できます。

GraphQL には、開発者が GraphQL サーバーを構築できるように、さまざまな言語のサーバー側実装が用意されています。 (推奨学習: フロントエンド ビデオ)

また、gq-loader は Webpack プラグインであり、フロントエンド プロジェクトのクライアント側実装と考えることができます。目的は、フロントエンド開発を支援することです。これにより、学生が GraphQL API を呼び出すことが容易になります。これにより、フロントエンド開発者は、通常の JS モジュールと同じくらい簡単に GraphQL を使用できるようになります。フロントエンド開発者は、 をインポートできるようになります。 import または require を通じて js ファイル内の gql および .graphql ファイルを直接呼び出します。

また、#import 構文を使用した、フラグメントなどの他の .gql ファイルのインポートもサポートしています。

#import には、#require と #include という 2 つのエイリアスも用意されており、これら 2 つのエイリアスの使用法と動作は #import とまったく同じです。

インストール

npm install gq-loader --save-dev

または

yarn add gq-loader

基本的な使用方法

他のものと同様ローダーも同様です。まず、webpack.config.js

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

に gq-loader の設定を追加します。次に、.gql ファイルを js ファイルにインポートして使用します。たとえば、すでに動作している Graphql サーバーがあると仮定すると、まずユーザーをクエリできる getUser.gql を作成します

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

ご覧のとおり、この例では #import.gql を通じて別の .gql ファイル フラグメントを参照しています。ファイルに返されるユーザーのフィールド情報を記述し、さまざまな場所で「再利用」できるようにします。また、このファイルも作成します

fragment userFields on User {
  name
  age
}

わかりました。js ファイルに getUser.gql を直接インポートできます。

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;));

getUser を呼び出すとき、変数を関数パラメータとして GraphQL に渡すことができます。これらの変数はクエリ パラメータです。

カスタム リクエスト

デフォルトの gq-loader は、graphql リクエストを完了するのに役立ちますが、シナリオによっては、必要に応じてすべてのリクエストを自分で制御したい場合があります。 request 属性を使用してリクエストを「カスタマイズ」することもできます。例を見てください。最初にローダー設定を少し変更する必要があります

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

your_request_module_path にカスタム リクエスト モジュールのパスを入力すると、gq-loader が実行します対応する Request モジュールを自動的にロードして使用します。モジュールは「リクエスト関数」を変更するだけで済みます。次のカスタム例を参照してください。

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

このうち、options は、 をインポートした後の「関数の 2 番目のパラメーター」です。 gql ファイルは、たとえば次のようになります オプションパラメータを渡します

import getUser from './getUser.gql';
async function query() {
  const options = {...};
  const user = await getUser({ name: 'bob' }, options);
  console.log('user', user);
}

gq-loader の拡張子にどのような値が設定されていても、js でインポートするときに拡張子を省略できないことに注意してください。 .gql ファイルのインポートと他の .gql ファイルにのみ適用されます

以上がフロントエンドはどのようにして GraphQL API を呼び出しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。