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
The name of the | instructions | The default value |
---|---|---|
URL | Specify the GraphQL service URL | /graphql |
request | Custom request functions | Use built-in modules |
extensions | Default extension, which will be looked up by configuration if the extension is omitted during import | .gql/.graphql |
string | Specifies the import mode, when true, as a string rather than an executable function | false |
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