@shopify/webpack-persisted-graphql-plugin

webpack-persisted-graphql-plugin

Usage

This plugin hooks into emit stage of the Webpack compilation, finds all modules that were originally .graphql files, extracts some metadata, and writes it to a JSON file. The contents of this file are a map from unique identifier to the "resolved" GraphQL document. In order for this process to work, you must use the graphql-mini-transforms Webpack loader to transform GraphQL documents, as this plugin depends on the shape of that loader's output.

With this file, it is easy to implement persisted queries:

• Send the unique identifier from the GraphQL document instead of its contents (for example, using the graphql-persisted Apollo link)
• On the server, read the manifest file produced by this plugin
• Take the identifier from the GraphQL request, and look that value up in the manifest file
• If a value is found, use that as the GraphQL document (otherwise, send a response that forces the client to send the full GraphQL document)

The JSON file produced by this plugin is written in the outputPath of the compilation, with the filename set when constructing this plugin.

import {PersistedGraphQLPlugin} from '@shopify/webpack-persisted-graphql-plugin';

const webpackConfig = {
  //
  // Rest of the config...
  //
  plugins: [
    new PersistedGraphQLPlugin({
      filename: 'graphql.json', // default is 'persisted-graphql.json'
    }),
  ],
};