Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yusinto/relay-compiler-plus
Custom relay compiler which supports persisted queries
https://github.com/yusinto/relay-compiler-plus
compiler custom graphql graphql-client graphql-js graphql-schema graphql-server graphql-tools modern persisted plus queries relay relay-compiler relay-compiler-plus relay-modern relaycompiler relaycompilerplus relayjs
Last synced: 4 months ago
JSON representation
Custom relay compiler which supports persisted queries
- Host: GitHub
- URL: https://github.com/yusinto/relay-compiler-plus
- Owner: yusinto
- License: mit
- Created: 2017-11-06T07:55:36.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-26T02:54:34.000Z (over 6 years ago)
- Last Synced: 2024-10-11T12:34:31.381Z (4 months ago)
- Topics: compiler, custom, graphql, graphql-client, graphql-js, graphql-schema, graphql-server, graphql-tools, modern, persisted, plus, queries, relay, relay-compiler, relay-compiler-plus, relay-modern, relaycompiler, relaycompilerplus, relayjs
- Language: JavaScript
- Size: 869 KB
- Stars: 71
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# relay-compiler-plus
[](https://www.npmjs.com/package/relay-compiler-plus) [](https://www.npmjs.com/package/relay-compiler-plus) [](https://www.npmjs.com/package/relay-compiler-plus) [](https://www.npmjs.com/package/relay-compiler-plus)
> **Custom relay compiler which supports persisted queries** :bowtie:
Relay modern is awesome. However it's missing a few things, one of which is persisted queries. This package
is a custom relay compiler which supports:
* persisted queries
* direct compilation of graphql-js
Direct graphql-js support means you can generate your relay queries, schema.graphql and query map files all
in a single step!
## Installation
```bash
yarn add relay-compiler-plus
```
Make sure you have the latest version of [graphql-js](https://github.com/graphql/graphql-js):
```bash
yarn upgrade graphql --latest
```
## Usage
1. Add this npm command to your package.json:
```
"scripts": {
"rcp": "NODE_ENV=production relay-compiler-plus --schema --src "
},
```
where
* `` is the path to your schema.graphql or schema.json file or schema.js (yes! rcp now
supports direct compilation from graphql-js!).
* `` is the path to your src directory
then:
```
npm run rcp
```
this should generate:
* query files (*.graphql.js) containing query ids and null query text. Note that if you omit NODE_ENV=production,
rcp will include both the query id and the query text in your query files. This can be useful for debugging in
development.
* A `queryMap.json` file under `/queryMap.json`.
This file can be consumed by the server to map the query ids to actual queries.
* If you specified a schema.js file, this will also generate a `schema.graphql`
file under `..//schema.graphql`. The `schema.graphql` has to sit
outside the src folder otherwise the relay-compiler will complain.
If your graphql-js file is complex and you need to override the default webpack config
you can do so like this:
```
"scripts": {
"rcp": "NODE_ENV=production relay-compiler-plus --webpackConfig --src "
},
```
where
* `` is the path to your custom webpack config to transpile your graphql-js
schema. In your custom webpack config, you need to set `output.libraryTarget: 'commonjs2'`. See the [example config](https://github.com/yusinto/relay-compiler-plus/blob/master/example/src/server/webpack.config.js)
for a working copy.
2. On the server, use `matchQueryMiddleware` prior to `express-graphql` to match queryIds to actual queries. Note
that `queryMap.json` is auto-generated by relay-compiler-plus at step 1.
```javascript
import Express from 'express';
import expressGraphl from 'express-graphql';
import {matchQueryMiddleware} from 'relay-compiler-plus'; // do this
import queryMapJson from '../queryMap.json'; // do this
const app = Express();
app.use('/graphql',
matchQueryMiddleware(queryMapJson), // do this
expressGraphl({
schema: graphqlSchema,
graphiql: true,
}));
```
3. On the client, modify your relay network fetch implementation to pass a `queryId` parameter in the
request body instead of a `query` parameter. Note that `operation.id` is generated by `relay-compiler-plus` in step 1.
```javascript
function fetchQuery(operation, variables) {
return fetch('/graphql', {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
queryId: operation.id, // do this
variables,
}),
}).then(response => {
return response.json();
});
}
```
Run your app and that's it!
## Example
Check the [example](https://github.com/yusinto/relay-compiler-plus/tree/master/example)
for a fully working demo.