Front-end calls to the GraphQL API have never been so convenient!

GraphQL is both a query language for the API and a runtime for your data queries. GraphQL provides a complete set of easy-to-understand descriptions of the data in your API, enabling clients to get exactly what they need without any redundancy.

GraphQL has server-side implementations for different languages to help developers build GraphQL Server.

Gq-loader is a Webpack plug-in, you can think of it as a client implementation for front-end projects, its purpose is to help front-end developers easier to call GraphQL API, it makes front-end developers more convenient to use GraphQL. It works like a normal JS module, allowing front-end developers to import.gql and.graphQL files in JS files via import or require and call them directly. It also supports importing other.gQL files, such as fragments, through the #import syntax.

#import also provides two aliases, #require and #include, which are identical in usage and behavior to #import.

To follow or use gQ-Loader, visit GitHub: github.com/Houfeng/gq-…

To learn more about GraphQL or use it, go to github.com/facebook/gr…

The installation

npm install gq-loader --save-dev
Copy the code

or

yarn add gq-loader
Copy the code

The basic use

As with other loaders, 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'}}}Copy the code

We can then use it in our.gql file by importing it from our js file. Let’s take a simple example. Assuming we already have a working Graphql Server, let’s create a getUser.gql that can query users

#import './fragment.gql' 



query MyQuery($name: String) {

  getUser(name: $name)

. userFields

  }

}

Copy the code

As you can see, we refer to another.gql file fragment. GQL with #import. In this file we trace the field information of the user to be returned so that we can “reuse” it in different places

fragment userFields on User {

  name

  age

}

Copy the code

Now we can import getUser.gql directly into our js file and use it to query users. It’s 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('root'));
Copy the code

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

Custom request

By default, gQ-Loader will do the graphQL request for you, but in some cases you may want to control all the requests yourself. If so, you can “customize” the request via the Request attribute

{
  test: /\.(graphql|gql)$/.exclude: /node_modules/.use: {
    loader: 'gq-loader'
    options: {
      url: 'Graphql Server URL'.// Specify the automatic request module path
      request: require.resolve('your_request_module_path'); }}}Copy the code

Fill in the path of a custom request module in your_request_module_path, and the GQ-loader will automatically load and use the corresponding request module. The module only needs to change a “request function”, as shown in the following custom example

const$=require('jquery');

// The URL is the GraphQL service address to request
// Data is the data to be sent
//options are custom options
module.exports = function(url, data, options){
  // You can also handle options if necessary
  return $.post(url, data);
};
Copy the code

Where options is the “second argument to the function” after the.gql file is imported, for example, the options argument can be passed like this

import getUser from './getUser.gql';

async function query() {
  constoptions = {... };const user = await getUser({ name: 'bob' }, options);
  console.log('user', user);
}
Copy the code

Complete options

Note that no matter what value is configured for the extensions of gQ-Loader, the extension cannot be omitted when importing from js. This option only applies to.gql files and other.gql files