Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
bin
 
 
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

relay-compiler-plus

npm version npm downloads npm npm

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

yarn add relay-compiler-plus

Make sure you have the latest version of graphql-js:

yarn upgrade graphql --latest  

Usage

  1. Add this npm command to your package.json:

    "scripts": {
        "rcp": "NODE_ENV=production relay-compiler-plus --schema <SCHEMA_FILE_PATH> --src <SRC_DIR_PATH>"
    },
    

    where

    • <SCHEMA_FILE_PATH> is the path to your schema.graphql or schema.json file or schema.js (yes! rcp now supports direct compilation from graphql-js!).
    • <SRC_DIR_PATH> 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 <SRC_DIR_PATH>/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 ../<SRC_DIR_PATH>/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 <WEBPACK_CONFIG_PATH> --src <SRC_DIR_PATH>"
    },
    

    where

    • <WEBPACK_CONFIG_PATH> 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 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.

    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.

    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 for a fully working demo.

You can’t perform that action at this time.