UNPKG

2.91 kBMarkdownView Raw
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
11yarn add relay-compiler-plus
12```
13
14Make sure you have the latest version of [graphql-js](https://github.com/graphql/graphql-js):
15```bash
16yarn upgrade graphql --latest
17```
18
19## Usage
201. 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
382. 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
573. 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
78Check the [example](https://github.com/yusinto/relay-compiler-plus/tree/master/example)
79for a fully working demo.
80