Shulou(Shulou.com)06/02 Report--

This article mainly introduces the front end how to call GraphQL API, the article is very detailed, has a certain reference value, interested friends must read it!

GraphQL is both a query language for API and a runtime for your data queries. GraphQL provides an easy-to-understand and complete 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 study: 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 developers to call GraphQL API more easily, it makes front-end developers more convenient to use GraphQL, like ordinary js modules, so that front-end developers can import .gql and .graphql files through import or require in js files, and then call them directly.

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

# import also provides two aliases, # require and # include, which have exactly the same usage and behavior as # import.

Installation

Npm install gq-loader-save-dev

Or

Yarn add gq-loader

Basic use

As with other loader, first of all, we add the configuration of gq-loader to 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 through import to use it. Let's take a simple example, assuming that we already have a working Graphql Server, so let's first create a getUser.gql that can query the user.

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

As you can see, we referenced another .gql file, fragment.gql, through # import, in which we traced the field information of the user to be returned, so we can "reuse" it in different places, and let's create this file.

Fragment userFields on User {name age}

Well, we can import getUser.gql directly into the 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 click;} ReactDOM.render (, document.getElementById ('root'))

When we call getUser, we can pass variables to the function parameters to GraphQL, which 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 the requests yourself. If necessary, we can also "customize" the request through the request attribute. Take a look at the example. You need to change the loader configuration slightly first.

{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');}

Fill in the custom request module path in your_request_module_path, and 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 is the address of the GraphQL service to be requested / / data is the data to be sent / / options is the custom option module.exports = function (url, data, options) {/ / you can also handle options return $.post (url, data) if necessary;}

Where options is the "second argument to the function" after importing the .gql file. For example, you can pass the options parameter like this

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 the configuration value of gq-loader 's extensions, the extension cannot be omitted when import in js. This option only applies to .gql files, import and other .gql files.

The above is all the contents of the article "how to call GraphQL API at the front end". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.