Comment le front-end appelle-t-il l'API GraphQL ?

GraphQL est à la fois un langage de requête pour les API et un environnement d'exécution pour interroger vos données. GraphQL fournit une description complète et facile à comprendre des données de votre API, permettant au client d'obtenir exactement les données dont il a besoin sans aucune redondance.

GraphQL propose des implémentations côté serveur pour différents langages pour aider les développeurs à créer GraphQL Server. (Apprentissage recommandé : Vidéo front-end)

Et gq-loader est un plug-in webpack. Vous pouvez le considérer comme une implémentation côté client pour les projets front-end. Le but est d'aider au développement front-end. Il permet aux étudiants d'appeler plus facilement l'API GraphQL, ce qui permet aux développeurs front-end d'utiliser plus facilement GraphQL aussi facilement que les modules js ordinaires. Il permet aux développeurs front-end d'importer .gql. et les fichiers .graphql dans les fichiers js via l'importation ou l'exigence, puis appelez directement.

Et il prend également en charge l'importation d'autres fichiers .gql, tels que des fragments, via la syntaxe #import.

#import fournit également deux alias, à savoir #require et #include. L'utilisation et le comportement de ces deux alias sont exactement les mêmes que #import.

Installer

npm install gq-loader --save-dev

ou

yarn add gq-loader

Utilisation de base

comme les autres Loader est le même. Tout d'abord, nous ajoutons la configuration de gq-loader dans webpack.config.js

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

Ensuite, nous pouvons importer le fichier .gql dans le fichier js et l'utiliser. un exemple, en supposant qu'il existe déjà un serveur Graphql fonctionnel, nous créons d'abord un getUser.gql

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

qui peut interroger les utilisateurs. Comme vous pouvez le voir, nous référençons un autre fragment de fichier .gql via #import. dans ce fichier nous décrivons les informations de champ de l'utilisateur à retourner, afin que nous puissions les "réutiliser" à différents endroits. Nous créons également ce fichier

fragment userFields on User {
  name
  age
}

D'accord, nous pouvons importer directement getUser.gql dans le fichier. js et utilisez-le pour interroger les utilisateurs. Cela n'a jamais été aussi simple. Jetons un coup d'œil

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

Lors de l'appel de getUser, nous pouvons transmettre des variables à GraphQL en tant que paramètres de fonction.

Demande personnalisée

Le gq-loader par défaut vous aidera à compléter la requête graphql, mais dans certains scénarios, vous souhaiterez peut-être contrôler toutes les requêtes vous-même, si nécessaire, nous pouvons également "personnaliser" la requête via l'attribut request. Jetez un œil à l'exemple. Vous devez d'abord modifier légèrement la configuration du chargeur

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

Remplissez le chemin du module de requête personnalisé dans your_request_module_path et gq-loader. chargera et utilisera automatiquement le module Request correspondant, le module n'a besoin que de modifier une "fonction de requête", voir l'exemple personnalisé suivant

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

Parmi eux, options est le "deuxième paramètre de la fonction" après avoir importé le Fichier .gql. Par exemple, cela peut être comme ceci Passez le paramètre d'options

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

Notez que quelle que soit la valeur configurée pour les extensions de gq-loader, l'extension ne peut pas être omise lors de l'importation dans js. l'option s'applique uniquement au fichier .gql et à l'importation d'autres fichiers .gql

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!