1 | # relay-compiler-plus
|
2 |
|
3 | [![npm version](https://img.shields.io/npm/v/relay-compiler-plus.svg?style=flat-square)](https://www.npmjs.com/package/relay-compiler-plus) [![npm downloads](https://img.shields.io/npm/dm/relay-compiler-plus.svg?style=flat-square)](https://www.npmjs.com/package/relay-compiler-plus) [![npm](https://img.shields.io/npm/dt/relay-compiler-plus.svg?style=flat-square)](https://www.npmjs.com/package/relay-compiler-plus) [![npm](https://img.shields.io/npm/l/relay-compiler-plus.svg?style=flat-square)](https://www.npmjs.com/package/relay-compiler-plus)
|
4 |
|
5 | > **Custom relay compiler which supports persisted queries** :bowtie:
|
6 |
|
7 | #### Note: This is still unstable! A stable release is coming soon.
|
8 |
|
9 | ## Installation
|
10 | ```bash
|
11 | yarn add relay-compiler-plus
|
12 | ```
|
13 |
|
14 | Make sure you have the latest version of [graphql-js](https://github.com/graphql/graphql-js):
|
15 | ```bash
|
16 | yarn upgrade graphql --latest
|
17 | ```
|
18 |
|
19 | ## Usage
|
20 | 1. Add this npm command to your package.json:
|
21 |
|
22 | ```json
|
23 | "scripts": {
|
24 | "relay-compiler-plus": "relay-compiler-plus --schema <SCHEMA_FILE_PATH> --src <SRC_DIR_PATH> -f",
|
25 | },
|
26 | ```
|
27 |
|
28 | where
|
29 | * `<SCHEMA_FILE_PATH>` is the path to your schema.graphql or schema.json file.
|
30 | * `<SRC_DIR_PATH>` is the path to your src directory
|
31 | * `-f` will delete all `__generated__/*.graphql.js` files under `SRC_DIR_PATH`
|
32 |
|
33 | Running this should generate:
|
34 | * query files (*.graphql.js) containing query ids and null query text.
|
35 | * A `queryMap.json` file under `<SRC_DIR_PATH>/queryMap.json`.
|
36 | This file can be consumed by the server to map the query ids to actual queries.
|
37 |
|
38 | 2. On the server, use `matchQueryMiddleware` prior to `express-graphql` to match queryIds to actual queries. Note
|
39 | that `queryMap.json` is auto-generated by relay-compiler-plus at step 1.
|
40 |
|
41 | ```javascript
|
42 | import Express from 'express';
|
43 | import expressGraphl from 'express-graphql';
|
44 | import {matchQueryMiddleware} from 'relay-compiler-plus'; // do this
|
45 | import queryMapJson from '../queryMap.json'; // do this
|
46 |
|
47 | const app = Express();
|
48 |
|
49 | app.use('/graphql',
|
50 | matchQueryMiddleware(queryMapJson), // do this
|
51 | expressGraphl({
|
52 | schema: graphqlSchema,
|
53 | graphiql: true,
|
54 | }));
|
55 | ```
|
56 |
|
57 | 3. On the client, modify your relay network fetch implementation to pass a `queryId` parameter in the
|
58 | request body instead of a `query` parameter.
|
59 |
|
60 | ```javascript
|
61 | function fetchQuery(operation, variables,) {
|
62 | return fetch('/graphql', {
|
63 | method: 'POST',
|
64 | headers: {
|
65 | 'content-type': 'application/json'
|
66 | },
|
67 | body: JSON.stringify({
|
68 | queryId: operation.id, // do this
|
69 | variables,
|
70 | }),
|
71 | }).then(response => {
|
72 | return response.json();
|
73 | });
|
74 | }
|
75 | ```
|
76 |
|
77 | ## Example
|
78 | Check the [example](https://github.com/yusinto/relay-compiler-plus/tree/master/example)
|
79 | for a fully working demo.
|
80 |
|