Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prisma-archive/babel-plugin-react-relay
Babel plugin for Relay Classic which works out of the box with your GraphQL endpoint
https://github.com/prisma-archive/babel-plugin-react-relay
Last synced: 8 days ago
JSON representation
Babel plugin for Relay Classic which works out of the box with your GraphQL endpoint
- Host: GitHub
- URL: https://github.com/prisma-archive/babel-plugin-react-relay
- Owner: prisma-archive
- License: mit
- Created: 2016-03-04T08:07:08.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-01T18:58:22.000Z (about 7 years ago)
- Last Synced: 2024-10-29T18:05:57.749Z (13 days ago)
- Language: JavaScript
- Homepage:
- Size: 396 KB
- Stars: 53
- Watchers: 7
- Forks: 9
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-react-relay [](https://badge.fury.io/js/babel-plugin-react-relay)
Babel plugin for [Relay Classic](https://github.com/facebook/relay) which works out of the box with your GraphQL endpoint
> **DEPRECATED**: Given the new `relay-compiler` setup (for Relay Modern) this babel plugin is no longer necessary.
#### How does this relate to [babel-relay-plugin](https://www.npmjs.com/package/babel-relay-plugin)?
This package uses `babel-relay-plugin` internally but **makes usage more convenient** and extends its functionality. For example you no longer need to have a `build/babelRelayPlugin.js` script.
(The version is the same as `babel-relay-plugin` by the way.)
## Install
```sh
$ npm install -D babel-plugin-react-relay
```
## Configuration
> Note: We recently switched over to [graphql-config](https://github.com/graphcool/graphql-config), so this might be a breaking change for you.
### Step 1: Add plugin to `.babelrc`
Add the following to your `.babelrc` file or the corresponding babel configuration.
```json
{
"plugins": ["react-relay"]
}
```
### Step 2: Configure your GraphQL schema
This plugin uses the [graphql-config](https://github.com/graphcool/graphql-config) format and already works out of the box if you're using another GraphQL dev tool such as [this great IntelliJ Plugin](https://github.com/jimkyndemeyer/js-graphql-intellij-plugin).
Add one of the following source options to your `package.json` file. **See [here](https://github.com/graphcool/graphql-config#usage) for more configuration details.**
For your convenience, here is the easiest way to configure your GraphQL endpoint:
```sh
export GRAPHQL_ENDPOINT="https://your.api/graphql"
```
## Troubleshooting
### Using `graphql-js` as configuration option
For those intending to directly reference their backend `schema.js`, you will need to ensure a single version of `graphql` exists in `node_modules`. However as of this writing, `babel-relay-plugin` and `graphql-config-parser` reference incompatible versions of `graphql` ([context](https://github.com/facebook/relay/issues/1400)). A workaround is to force the graphql dependency within `npm-shrinkwrap.json` at your project's root (make sure to adapt as currently relevant):
```
{
"dependencies": {
"babel-relay-plugin": {
"version": "0.9.3",
"from": "[email protected]",
"dependencies": {
"graphql": {
"version": "0.7.1",
"from": "[email protected]"
}
}
}
}
}
```
Then run `npm prune`, `npm install` and `npm dedupe` for good measure.
## License
[MIT License](http://opensource.org/licenses/MIT)
## Help & Community [](https://slack.graph.cool)
Join our [Slack community](http://slack.graph.cool/) if you run into issues or have questions. We love talking to you!
