Wie ruft das Frontend die GraphQL-API auf?

GraphQL ist sowohl eine Abfragesprache für APIs als auch eine Laufzeit zum Abfragen Ihrer Daten. GraphQL bietet eine vollständige, leicht verständliche Beschreibung der Daten in Ihrer API, sodass der Client ohne Redundanz genau die Daten erhält, die er benötigt.

GraphQL verfügt über serverseitige Implementierungen für verschiedene Sprachen, um Entwicklern beim Aufbau von GraphQL Server zu helfen. (Empfohlenes Lernen: Front-End-Video)

Und gq-loader ist ein Webpack-Plug-in. Sie können es sich als clientseitige Implementierung für Front-End-Projekte vorstellen Der Zweck besteht darin, die Front-End-Entwicklung zu unterstützen. Es ist für Studenten einfacher, die GraphQL-API aufzurufen. Es macht es für Front-End-Entwickler einfacher, GraphQL zu verwenden, und ermöglicht Front-End-Entwicklern den Import von .gql und .graphql-Dateien in js-Dateien durch Import oder Require und dann direkt aufrufen.

Und es unterstützt auch den Import anderer .gql-Dateien, wie z. B. Fragmente, über die #import-Syntax.

#import stellt außerdem zwei Aliase bereit, nämlich #require und #include. Die Verwendung und das Verhalten dieser beiden Aliase sind genau die gleichen wie bei #import.

Installieren

npm install gq-loader --save-dev

oder

yarn add gq-loader

Grundlegende Verwendung

wie andere Loader ist dasselbe. Zuerst fügen wir die Konfiguration von gq-loader in webpack.config.js hinzu

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

Dann können wir die .gql-Datei in die js-Datei importieren und sie verwenden Ein Beispiel: Angenommen, es gibt bereits einen funktionierenden Graphql-Server. Dann erstellen wir zunächst eine getUser.gql

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

, die Benutzer abfragen kann. Wie Sie sehen, verweisen wir über #import auf ein anderes .gql-Dateifragment. In dieser Datei beschreiben wir die Feldinformationen des Benutzers, die zurückgegeben werden sollen, damit wir sie an verschiedenen Stellen „wiederverwenden“ können. Wir erstellen auch diese Datei

fragment userFields on User {
  name
  age
}

Okay, wir können getUser.gql direkt in importieren js-Datei und verwenden Sie sie, um Benutzer abzufragen.

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

Beim Aufruf von getUser können wir Variablen als Funktionsparameter übergeben.

Benutzerdefinierte Anfrage

Der Standard-GQ-Loader hilft Ihnen beim Ausfüllen der GraphQL-Anfrage, aber in einigen Szenarien möchten Sie bei Bedarf möglicherweise alle Anfragen selbst steuern. Wir können die Anfrage auch über das Anfrageattribut „anpassen“. Schauen Sie sich das Beispiel an. Sie müssen zuerst die Loader-Konfiguration leicht ändern.

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

Geben Sie den benutzerdefinierten Anfragemodulpfad in your_request_module_path und gq-loader ein Das entsprechende Anforderungsmodul wird automatisch geladen und verwendet. Das Modul muss lediglich eine „Anforderungsfunktion“ ändern. Siehe das folgende benutzerdefinierte Beispiel.

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

Unter diesen sind Optionen der „zweite Parameter der Funktion“ nach dem Import .gql-Datei kann beispielsweise wie folgt aussehen: Übergeben Sie den Optionsparameter

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

. Beachten Sie, dass die Erweiterung beim Importieren in js nicht weggelassen werden kann, unabhängig davon, welcher Wert für die Erweiterungen von gq-loader konfiguriert ist Die Option gilt nur für den Import anderer GQL-Dateien in .gql-Dateien

Das obige ist der detaillierte Inhalt vonWie ruft das Frontend die GraphQL-API auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!