The SysGears Team is pleased to announce the availability of PersistGraphQL Webpack Plugin with Hot Code Reload for backend & frontend.

PersistGraphQL Webpack Plugin is a tool to gather GraphQL queries from source code of GraphQL projects and inject them into the build bundles. Unique IDs assigned to GraphQL queries and since both back end and front end are aware of the mapping of these IDs to GraphQL queries, passing of full queries is not needed and replaced by passing query IDs only. Hence usage of persistent GraphQL queries is good to reduce bandwith and for security reasons, since all supported queries are known during build time.

Installation

npm install --save-dev persistgraphql-webpack-plugin

Usage

When Webpack is used for front-end only

Sample Webpack config:

var PersistGraphQLPlugin = require('persistgraphql-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // ...
        use: [
          'babel-loader', 
          // Should come AFTER babel-loader
          'persistgraphql-webpack-plugin/js-loader'
        ]
      },
      {
        test: /\.(graphql|gql)$/,
        use: [
          'graphql-tag/loader', 
          // Should come AFTER graphql-tag/loader
          'persistgraphql-webpack-plugin/graphql-loader'
        ]
      },
    ]
  }

  plugins: [
    new PersistGraphQLPlugin({filename: 'persisted_queries.json'})
  ]
};Code language: JavaScript (javascript)

In the source code of front-end persisted GraphQL queries will be injected as a virtual module persisted_queries.json. This module will be updated if queries added or changed. Also asset with name persisted_queries.json will be generated during compilation and written to output directory.

var queryMap = require('persisted_queries.json');
console.log(queryMap);Code language: JavaScript (javascript)

When Webpack is used both for back-end and front-end

var PersistGraphQLPlugin = require('persistgraphql-webpack-plugin');

const frontendPersistPlugin = new PersistGraphQLPlugin();
const backendPersistPlugin = 
    new PersistGraphQLPlugin({provider: clientPersistPlugin});

var frontendWebpackConfig = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // ...
        use: [
          'babel-loader', 
          // Should come AFTER babel
          'persistgraphql-webpack-plugin/js-loader'
        ]
      },
      {
        test: /\.(graphql|gql)$/,
        use: [
          'graphql-tag/loader', 
          // Should come AFTER graphql-tag/loader
          'persistgraphql-webpack-plugin/graphql-loader'
        ]
      },
    ]
  }

  plugins: [
    frontendPersistPlugin
  ]
};

var backendWebpackConfig = {
  // ...
  plugins: [
    backendPersistPlugin
  ]
}Code language: JavaScript (javascript)

Both in the source code of front-end and back-end persisted GraphQL queries will be injected as a virtual module persisted_queries.json. This module will be updated if queries added or changed.

var queryMap = require('persisted_queries.json');
console.log(queryMap);Code language: JavaScript (javascript)

Options

new PersistGraphQLPlugin(options: object)Code language: JavaScript (javascript)

• filename {String} Name of the ouput file with persisted GraphQL queries.
• addTypename {Boolean} Apply a query transformation to the query documents, adding the __typename field at every level of the query. You must pass this option if your client code uses this query transformation.
• moduleName {String} Name of virtual wepback module with persisted GraphQL queries, persisted_queries.json by default.
• provider {Object} Instance of plugin running on another webpack instance which will provide persisted GraphQL queries.