{"id":14975984,"url":"https://github.com/yusinto/relay-compiler-plus","last_synced_at":"2025-10-10T07:20:36.093Z","repository":{"id":57352722,"uuid":"109664293","full_name":"yusinto/relay-compiler-plus","owner":"yusinto","description":"Custom relay compiler which supports persisted queries","archived":false,"fork":false,"pushed_at":"2018-07-26T02:54:34.000Z","size":890,"stargazers_count":71,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-11T12:34:31.381Z","etag":null,"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"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yusinto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-06T07:55:36.000Z","updated_at":"2023-10-04T23:44:15.000Z","dependencies_parsed_at":"2022-09-16T08:10:36.560Z","dependency_job_id":null,"html_url":"https://github.com/yusinto/relay-compiler-plus","commit_stats":null,"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Frelay-compiler-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Frelay-compiler-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Frelay-compiler-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Frelay-compiler-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yusinto","download_url":"https://codeload.github.com/yusinto/relay-compiler-plus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219860932,"owners_count":16556009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-09-24T13:53:05.381Z","updated_at":"2025-10-10T07:20:31.056Z","avatar_url":"https://github.com/yusinto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# relay-compiler-plus\n\n[![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)\n\n\u003e **Custom relay compiler which supports persisted queries** :bowtie:\n\nRelay modern is awesome. However it's missing a few things, one of which is persisted queries. This package\nis a custom relay compiler which supports:\n\n* persisted queries\n* direct compilation of graphql-js \n\nDirect graphql-js support means you can generate your relay queries, schema.graphql and query map files all\nin a single step!\n\n## Installation\n```bash\nyarn add relay-compiler-plus\n```\n\nMake sure you have the latest version of [graphql-js](https://github.com/graphql/graphql-js):\n```bash\nyarn upgrade graphql --latest  \n```\n\n## Usage\n1. Add this npm command to your package.json:\n\n    ```\n    \"scripts\": {\n        \"rcp\": \"NODE_ENV=production relay-compiler-plus --schema \u003cSCHEMA_FILE_PATH\u003e --src \u003cSRC_DIR_PATH\u003e\"\n    },\n    ```\n\n    where \n    * `\u003cSCHEMA_FILE_PATH\u003e` is the path to your schema.graphql or schema.json file or schema.js (yes! rcp now\n    supports direct compilation from graphql-js!).\n    * `\u003cSRC_DIR_PATH\u003e` is the path to your src directory\n\n    then:\n    ```\n    npm run rcp\n    ``` \n    \n    this should generate:\n    * query files (*.graphql.js) containing query ids and null query text. Note that if you omit NODE_ENV=production,\n    rcp will include both the query id and the query text in your query files. This can be useful for debugging in \n    development.\n    * A `queryMap.json` file under `\u003cSRC_DIR_PATH\u003e/queryMap.json`.\n    This file can be consumed by the server to map the query ids to actual queries.\n    * If you specified a schema.js file, this will also generate a `schema.graphql` \n    file under `../\u003cSRC_DIR_PATH\u003e/schema.graphql`. The `schema.graphql` has to sit\n    outside the src folder otherwise the relay-compiler will complain.\n    \n    If your graphql-js file is complex and you need to override the default webpack config\n    you can do so like this:\n    \n    ```\n    \"scripts\": {\n        \"rcp\": \"NODE_ENV=production relay-compiler-plus --webpackConfig \u003cWEBPACK_CONFIG_PATH\u003e --src \u003cSRC_DIR_PATH\u003e\"\n    },\n    ```\n    \n     where \n    * `\u003cWEBPACK_CONFIG_PATH\u003e` is the path to your custom webpack config to transpile your graphql-js\n    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)\n    for a working copy. \n      \n\n2. On the server, use `matchQueryMiddleware` prior to `express-graphql` to match queryIds to actual queries. Note \n    that `queryMap.json` is auto-generated by relay-compiler-plus at step 1.\n\n    ```javascript\n    import Express from 'express';\n    import expressGraphl from 'express-graphql';\n    import {matchQueryMiddleware} from 'relay-compiler-plus'; // do this\n    import queryMapJson from '../queryMap.json'; // do this\n\n    const app = Express();\n\n    app.use('/graphql',\n      matchQueryMiddleware(queryMapJson), // do this\n      expressGraphl({\n        schema: graphqlSchema,\n        graphiql: true,\n      }));\n    ```\n\n3. On the client, modify your relay network fetch implementation to pass a `queryId` parameter in the\n request body instead of a `query` parameter. Note that `operation.id` is generated by `relay-compiler-plus` in step 1.\n\n    ```javascript\n    function fetchQuery(operation, variables) {\n      return fetch('/graphql', {\n        method: 'POST',\n        headers: {\n          'content-type': 'application/json'\n        },\n        body: JSON.stringify({\n          queryId: operation.id, // do this\n          variables,\n        }),\n      }).then(response =\u003e {\n        return response.json();\n      });\n    }\n    ```\n\nRun your app and that's it! \n\n## Example\nCheck the [example](https://github.com/yusinto/relay-compiler-plus/tree/master/example)\nfor a fully working demo.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusinto%2Frelay-compiler-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyusinto%2Frelay-compiler-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusinto%2Frelay-compiler-plus/lists"}