PersistGraphQL Webpack Plugin with Hot Code Reload Released

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

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

Installation

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

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

Usage

When Webpack Is Used for Frontend 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'})
  ]
};

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

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

var queryMap = require('persisted_queries.json');
console.log(queryMap);

var queryMap = require('persisted_queries.json');
console.log(queryMap);

When Webpack Is Used for Both Backend and Frontend

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
  ]
}

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
  ]
}

Both in the source code of the frontend and the backend, persisted GraphQL queries will be injected as a virtual module persisted_queries.json. This module will be updated if queries are added or changed.

var queryMap = require('persisted_queries.json');
console.log(queryMap);

var queryMap = require('persisted_queries.json');
console.log(queryMap);

Options

new PersistGraphQLPlugin(options: object)

new PersistGraphQLPlugin(options: object)

• 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 a plugin running on another webpack instance, which will provide persisted GraphQL queries.