使用relay in react native app

Question

How to expose a graphql endpoint to react native app? Has anyone used relay in react native application? The examples in technical overview of relay https://facebook.github.io/relay/docs/getting-started.html use webpack to serve relay app and expose it to a graphql server:

import express from 'express';
import graphQLHTTP from 'express-graphql';
import path from 'path';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import {StarWarsSchema} from './data/starWarsSchema';

const APP_PORT = 3000;
const GRAPHQL_PORT = 8080;

// Expose a GraphQL endpoint
var graphQLServer = express();
graphQLServer.use('/', graphQLHTTP({schema: StarWarsSchema, pretty: true}));
graphQLServer.listen(GRAPHQL_PORT, () => console.log(
  `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}`
));

// Serve the Relay app
var compiler = webpack({
  entry: path.resolve(__dirname, 'js', 'app.js'),
  eslint: {
    configFile: '.eslintrc'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          stage: 0,
          plugins: ['./build/babelRelayPlugin']
        }
      },
      {
        test: /\.js$/,
        loader: 'eslint'
      }
    ]
  },
  output: {filename: 'app.js', path: '/'}
});
var app = new WebpackDevServer(compiler, {
  contentBase: '/public/',
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true}
});
// Serve static resources
app.use('/', express.static('public'));
app.use('/node_modules', express.static('node_modules'));
app.listen(APP_PORT, () => {
  console.log(`Relay Star Wars is now running on http://localhost:${APP_PORT}`);
});

but react native uses react-native packager to bundle its modules; has anyone tried using relay in the react native app?

Answer 1

It is now possible to use react native and relay together.

Github announcement: https://github.com/facebook/relay/issues/26

Instructions for existing RN apps: http://pulse.mixrt.com/discussion/26/technical-making-relay-work-with-existing-react-native-apps-a-step-by-step-tutorial .

Copy of the instructions:

1. Back up your project.
2. Make sure you have your GraphQL server ready and your schema.json at hand too. For more details about the latter two visit the React-Relay project page.
3. Ensure that you're using `npm` version 3 or greater.
4. If React Native's packager (`react-native start`) is running somewhere in the background, you should stop it now.
5. Run:

    watchman watch-del-all  

   and also:

    rm -rf $TMPDIR/react-*  

   to avoid running into a known packager issue ( https://github.com/facebook/react-native/issues/4968 ).
6. Delete the `./node_modules` directory from your project.
7. Edit your `package.json` file, make sure it has the following:

    "dependencies": { \n      "react": "^0.14.7", \n      "react-native": "facebook/react-native", \n      "react-relay": "^0.7.3" \n    }, \n    "devDependencies": { \n      "babel-core": "^6.6.4",  \n      "babel-preset-react-native": "^1.4.0", \n      "babel-relay-plugin": "^0.7.3"    \n    }  

   Babel version is especially important. Make sure that your project uses babel 6.5 or later, we need it for the passPerPreset feature in .babelrc file.
8. Create a new file `.babelrc` and place it in your project's directory:

    { \n      "presets": [ \n        "./scripts/babelRelayPlugin", \n        "react-native" \n      ], \n      "passPerPreset": true \n    }  

9. Create a new file in your project's directory called `babelRelayPlugin.js` with the following content:

    const getBabelRelayPlugin = require('babel-relay-plugin'); \n    const schema = require('./schema.json'); \n\n    module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };  

   Copy your `schema.json` file to the project's directory too.
10. Run:

     npm install  

Answer 2

你可以在这里找到一个工作版本，直到这个问题得到解决。

Answer 3

1. you need to install react-relay package for react-native app

2. Before the entry point of your react-native app, inject network layer with the url you exposed

 Relay.injectNetworkLayer( new Relay.DefaultNetworkLayer('http://localhost:8000/graphql') );