Package Exports

@benjie/persistgraphql-webpack-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@benjie/persistgraphql-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PersistGraphQL Webpack Plugin

Webpack Plugin for working with Persisted GraphQL Queries with Hot Code Replacement support.

Installation

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

Usage with Webpack 2

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', 
        moduleName: path.resolve('node_modules/persisted_queries.json')})
  ]
};

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);

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

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

const moduleName = path.resolve('node_modules/persisted_queries.json');
const frontendPersistPlugin = new PersistGraphQLPlugin({ moduleName });
const backendPersistPlugin = 
    new PersistGraphQLPlugin({ provider: clientPersistPlugin, moduleName });

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 front-end and back-end persisted GraphQL queries will be injected as a virtual module node_modules/persisted_queries.json. This module will be updated if queries added or changed.

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

Usage with Webpack 1

When Webpack is used for front-end only

Sample Webpack config:

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

module.exports = {
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: [
          'babel?' + JSON.stringify(
            {
              cacheDirectory: __DEV__,
              presets: ['es2015', 'es2017', 'react'],
              plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties']
            }
          ),
          // Should come AFTER babel-loader
          'persistgraphql-webpack-plugin/js-loader'
        ],
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loaders: [
          'graphql-tag/loader',
          // Should come AFTER graphql-tag/loader
          'persistgraphql-webpack-plugin/graphql-loader'
        ]
      },
    ]
  }
  
  plugins: [
    new PersistGraphQLPlugin({filename: 'persisted_queries.json', 
        moduleName: path.resolve('node_modules/persisted_queries.json')})
  ]
};

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

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

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

const moduleName = path.resolve('node_modules/persisted_queries.json');
const frontendPersistPlugin = new PersistGraphQLPlugin({ moduleName });
const backendPersistPlugin = 
    new PersistGraphQLPlugin({ provider: clientPersistPlugin, moduleName });

var frontendWebpackConfig = {
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: [
          'babel?' + JSON.stringify(
            {
              cacheDirectory: __DEV__,
              presets: ['es2015', 'es2017', 'react'],
              plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties']
            }
          ),
          // Should come AFTER babel-loader
          'persistgraphql-webpack-plugin/js-loader'
        ],
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loaders: [
          'graphql-tag/loader',
          // Should come AFTER graphql-tag/loader
          'persistgraphql-webpack-plugin/graphql-loader'
        ]
      },
    ]
  }
  
  plugins: [
    frontendPersistPlugin
  ]
};

var backendWebpackConfig = {
  // ...
  plugins: [
    backendPersistPlugin
  ]
}

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

Options

new PersistGraphQLPlugin(options: object)

Name	Type	Description
`moduleName`	`{String}`	Name of virtual wepback module with persisted GraphQL queries, this option is required
`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.
`provider`	`{Object}`	Instance of plugin running on another webpack instance which will provide persisted GraphQL queries

@benjie/persistgraphql-webpack-plugin

Package Exports

Readme

PersistGraphQL Webpack Plugin

Installation

Usage with Webpack 2

When Webpack is used for front-end only

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

Usage with Webpack 1

When Webpack is used for front-end only

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

Options

License