项目作者: sysgears

项目描述 :
PersistGraphQL Webpack Plugin
高级语言: JavaScript
项目地址: git://github.com/sysgears/persistgraphql-webpack-plugin.git
创建时间: 2017-03-28T13:31:30Z
项目社区:https://github.com/sysgears/persistgraphql-webpack-plugin

开源协议:MIT License

下载


PersistGraphQL Webpack Plugin

Build Status
Greenkeeper badge Twitter Follow

Webpack Plugin that gathers all the GraphQL queries/mutation/subscriptions both from .graphql files and from embedded queries in JavaScript/TypeScript source code. It generates virtual module persisted_queries.json with all the queries as a map object (query -> id) available for require from any place within source code and output file on file system with all the queries.

Installation

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

Usage

When Webpack is used for front-end only

Sample Webpack config:

  1. var PersistGraphQLPlugin = require('persistgraphql-webpack-plugin');
  2. module.exports = {
  3. module: {
  4. rules: [
  5. {
  6. test: /\.(graphql|gql)$/,
  7. use: 'graphql-tag/loader'
  8. },
  9. ]
  10. }
  11. plugins: [
  12. new PersistGraphQLPlugin({filename: 'persisted_queries.json',
  13. moduleName: path.resolve('node_modules/persisted_queries.json')})
  14. ]
  15. };

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.

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

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

  1. var PersistGraphQLPlugin = require('persistgraphql-webpack-plugin');
  2. const moduleName = path.resolve('node_modules/persisted_queries.json');
  3. const frontendPersistPlugin = new PersistGraphQLPlugin({ moduleName });
  4. const backendPersistPlugin =
  5. new PersistGraphQLPlugin({ provider: frontendPersistPlugin, moduleName });
  6. var frontendWebpackConfig = {
  7. module: {
  8. rules: [
  9. {
  10. test: /\.(graphql|gql)$/,
  11. use: 'graphql-tag/loader'
  12. },
  13. ]
  14. }
  15. plugins: [
  16. frontendPersistPlugin
  17. ]
  18. };
  19. var backendWebpackConfig = {
  20. // ...
  21. plugins: [
  22. backendPersistPlugin
  23. ]
  24. }

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.

  1. var queryMap = require('persisted_queries.json');
  2. console.log(queryMap);
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, default: true
hashQuery {Function} Function to hash queries in hash map, default: SHA-256 from query, if false passed - counter values are used
provider {Object} Instance of plugin running on another webpack instance which will provide persisted GraphQL queries
excludeRegex {RegExp} RegExp to match file path that will be excluded from processing by the plugin, default: /[\\/]node_modules[\\/]/
graphqlRegex {RegExp} RegExp to match files loaded by graphql-tag/loader that should be processed by the plugin, default: `/(.graphql\ .gql)$/`
jsRegex {RegExp} RegExp to match js files that have embedded GraphQL queries marked with gql tag, default: `/(.jsx?\ .tsx?)$/`

License

Copyright © 2017 SysGears INC. This source code is licensed under the MIT license.