Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @shopify/webpack-persisted-graphql-plugin with all npm packages installed. Try it out:

var webpackPersistedGraphqlPlugin = require("@shopify/webpack-persisted-graphql-plugin")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@shopify/webpack-persisted-graphql-plugin v1.0.7

Generates a GraphQL metadata file mapping hash identifiers to the original source

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'
    }),
  ],
};
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free