1 | # Relay Compiler Webpack Plugin
|
2 |
|
3 | [![npm version](https://badge.fury.io/js/relay-compiler-webpack-plugin.svg)](https://badge.fury.io/js/relay-compiler-webpack-plugin)
|
4 | [![Build Status](https://travis-ci.org/danielholmes/relay-compiler-webpack-plugin.svg?branch=master)](https://travis-ci.org/danielholmes/relay-compiler-webpack-plugin)
|
5 |
|
6 | Are you running Relay Modern? Are you annoyed with constantly running the `relay-compiler` to generate code, especially
|
7 | if you're already running Webpack?
|
8 |
|
9 | Well be annoyed no more! Simply install this plugin to automatically hook into Webpack's build process to generate these
|
10 | files for you.
|
11 |
|
12 |
|
13 | ## Installation
|
14 |
|
15 | 1. Add this to your project:
|
16 |
|
17 | ```sh
|
18 | yarn add --dev relay-compiler-webpack-plugin
|
19 | # Or if you're using npm
|
20 | npm install --save-dev relay-compiler-webpack-plugin
|
21 | ```
|
22 |
|
23 | 2. Add the plugin to your Webpack configuration:
|
24 |
|
25 | ```javascript
|
26 | const RelayCompilerWebpackPlugin = require('relay-compiler-webpack-plugin')
|
27 | const path = require('path')
|
28 |
|
29 | module.exports = {
|
30 | // ... Your existing Webpack configuration
|
31 | plugins: [
|
32 | // ...
|
33 | new RelayCompilerWebpackPlugin({
|
34 | schema: path.resolve(__dirname, './relative/path/to/schema.graphql'), // or schema.json
|
35 | src: path.resolve(__dirname, './relative/path/to/source/files'),
|
36 | })
|
37 | ]
|
38 | // ...
|
39 | }
|
40 | ```
|
41 |
|
42 | 3. :tada:
|
43 |
|
44 |
|
45 | ### Gotchas
|
46 |
|
47 | If there are multiple versions of GraphQL in your dependency tree it will cause schema validation errors. To get around
|
48 | this, ensure you have the same graphql version as your relay-compiler version depends on. To assist this you can
|
49 | [install dependencies as flat](https://yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-flat) which ensures only
|
50 | one version of each dependency.
|
51 |
|
52 |
|
53 | ### Plugin hooks
|
54 |
|
55 | `relay-compiler-webpack-plugin` exposes a few [tapable](https://github.com/webpack/tapable/tree/master) hooks, for plugins or tooling to use.
|
56 |
|
57 | - `beforeWrite` called before the plugin starts to compile queries
|
58 | - `afterWrite(compileResult)`: called after writing is complete
|
59 |
|
60 | ```js
|
61 | class MyPlugin {
|
62 | apply (compiler) {
|
63 | compiler.hooks.compilation.tap('MyPlugin', async (compilation) => {
|
64 | RelayCompilerWebpackPlugin.getHooks(compilation).afterWrite.tapPromise(
|
65 | 'MyPlugin', // <-- Set a meaningful name for stacktraces
|
66 | async (compileResult) => {
|
67 | if (compileResult === 'HAS_CHANGES') {
|
68 | await doSomething()
|
69 | }
|
70 | }
|
71 | )
|
72 | })
|
73 | }
|
74 | }
|
75 | ```
|
76 |
|
77 | ## Example Project
|
78 |
|
79 | To see an example of its usage within a project, see
|
80 | [relay-compiler-webpack-plugin-example](https://github.com/danielholmes/relay-compiler-webpack-plugin-example).
|
81 |
|
82 |
|
83 | ## Development
|
84 |
|
85 | Running tests:
|
86 |
|
87 | ```bash
|
88 | yarn test
|
89 | ```
|
90 |
|
91 | Running tests with coverage:
|
92 |
|
93 | ```bash
|
94 | yarn test:coverage
|
95 | ```
|
96 |
|
97 |
|
98 | ## License
|
99 |
|
100 | Relay Compiler Webpack Plugin may be redistributed according to the [BSD 3-Clause License](LICENSE).
|
101 |
|
102 | Copyright 2019
|