使用relay in react native app

Question

如何公開graphql端點以響應本機應用程序？ 有沒有人使用中繼反應本機應用程序？ 中繼技術概述中的示例https://facebook.github.io/relay/docs/getting-started.html使用webpack來服務中繼應用並將其暴露給graphql服務器：

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}`);
});

但本機使用react-native packager來捆綁其模塊; 有沒有人試過在本機應用程序中使用中繼？

Answer 1

現在可以使用本機反應和繼電器。

Github公告： https ： //github.com/facebook/relay/issues/26

現有RN應用程序的說明： http ： //pulse.mixrt.com/discussion/26/technical-making-relay-work-with-existing-react-native-apps-a-step-by-step-tutorial 。

副本說明：

1. 備份您的項目。
2. 確保您已准備好GraphQL服務器並且手頭上還有schema.json。 有關后兩者的更多詳細信息，請訪問React-Relay項目頁面。
3. 確保您使用的是`npm`版本3或更高版本。
4. 如果React Native的打包器（`react-native start`）在后台的某個地方運行，你應該立即停止它。
5. 跑：

     守望者看全部 

   並且：

     rm -rf $ TMPDIR / react- * 

   避免遇到已知的打包者問題（https://github.com/facebook/react-native/issues/4968）。
6. 從項目中刪除`。/ node_modules`目錄。
7. 編輯你的`package.json`文件，確保它有以下內容：

     “依賴”：{\n       “反應”：“^ 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 6.5或更高版本，我們需要它用於.babelrc文件中的passPerPreset功能。
8. 創建一個新文件`.babelrc`並將其放在項目的目錄中：

     {\n       “預設”：[\n         “./scripts/babelRelayPlugin”\n         “反應天然的”\n       ]\n       “passPerPreset”：是的\n     } 

9. 在項目目錄中創建一個名為`babelRelayPlugin.js`的新文件，其中包含以下內容：

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

   將`schema.json`文件復制到項目目錄中。
10. 跑：

      npm安裝 

Answer 2

你可以在這里找到一個工作版本，直到這個問題得到解決。

Answer 3

1. 你需要為react-native app安裝react-relay包

2. 在您的react-native應用程序的入口點之前，使用您公開的URL注入網絡層

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