How does the front end call GraphQL API?

# GraphQL is both a query language for APIs and a runtime for querying your data. GraphQL provides a complete, easy-to-understand description of the data in your API, allowing the client to get exactly the data it needs without any redundancy.

GraphQL has server-side implementations for different languages ​​to help developers build GraphQL Server. (Recommended learning: Front-end video)

And gq-loader is a webpack plug-in. You can think of it as a client-side implementation for front-end projects. Its purpose is to help front-end development It makes it easier for students to call the GraphQL API. It makes it more convenient for front-end developers to use GraphQL, as easily as ordinary js modules. It allows front-end developers to import .gql and .graphql files in js files through import or require, and then Call directly.

And it also supports importing other .gql files, such as fragments, through #import syntax.

#import also provides two aliases, namely #require and #include. The usage and behavior of these two aliases are exactly the same as #import.

Installation

npm install gq-loader --save-dev

or

yarn add gq-loader

Basic use

Like other Loader is the same. First, we add the gq-loader configuration in webpack.config.js

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

Then, we can import the .gql file in the js file and use it. Let’s do a simple As an example, assuming there is already a working Graphql Server, then we first create a getUser.gql that can query users

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

As you can see, we reference another .gql file fragment through #import. gql, in this file we describe the field information of the user to be returned, so that we can "reuse" it in different places, we also create this file

fragment userFields on User {
  name
  age
}

Okay, we can Directly import getUser.gql in the js file and use it to query users. It has never been easier. Let’s take a look.

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

When calling getUser, we can pass variables to GraphQL as function parameters. These variables These are our query parameters.

Custom request

The default gq-loader will help you complete the graphql request, but in some scenarios you may want to control all requests yourself, if so necessary , we can also "customize" the request through the request attribute. Take a look at the example. You need to slightly change the loader configuration first

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

Fill in the custom request module path in your_request_module_path, gq-loader will automatically load and use the corresponding Request module, the module only needs to change a "request function", see the following custom example

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

Among them, options is the "second parameter of the function" after importing the .gql file, for example, it can be like this Pass the options parameter

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

Note that no matter what value is configured for the extensions of gq-loader, the extension cannot be omitted when importing in js. This option only applies to .gql file import and other .gql files

The above is the detailed content of How does the front end call GraphQL API?. For more information, please follow other related articles on the PHP Chinese website!