使用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

现在可以一起使用 React Native 和 Relay。

\n\n

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

\n\n

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

\n\n

说明副本：

\n\n

\n
1. 备份您的项目。
\n
2. 确保您已准备好 GraphQL 服务器以及 schema.json。有关后两者的更多详细信息，请访问 React-Relay 项目页面。
\n
3. 确保您\xe2\x80\x99 使用 `npm` 版本 3 或更高版本。
\n
4. 如果 React Native 的打包器（`react-native start`）正在后台运行，你应该立即停止它。
\n
5. 跑步：

   守望者 守望者

   并且：

   rm -rf $TMPDIR/react-*

   以避免遇到已知的打包程序问题（https://github.com/facebook/react-native/issues/4968）。
\n
6. 从项目中删除“./node_modules”目录。
\n
7. 编辑您的 `package.json` 文件，确保它具有以下内容:\n\n

       “依赖关系”：{\n“反应”：“^0.14.7”，\n“反应本机”：“facebook/react-native”，\n“反应中继”：“^0.7.3”\n },\n "devDependency": {\n "babel-core": "^6.6.4", \n "babel-preset-react-native": "^1.4.0",\n "babel-relay-插件": "^0.7.3" \n }

   \n\nBabel 版本尤其重要。确保您的项目使用 babel 6.5 或更高版本，我们需要它来实现 .babelrc 文件中的 passPerPreset 功能。
\n
8. 创建一个新文件 `.babelrc` 并将其放入项目目录中：\n\n\n

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

   \n
\n
9. 在项目目录中创建一个名为“babelRelayPlugin.js”的新文件，其中包含以下内容：\n\n

       const getBabelRelayPlugin = require(\'babel-relay-plugin\');\n const schema = require(\'./schema.json\');\n\n module.exports = { 插件: [getBabelRelayPlugin(schema.数据）] };

   \n\n也将 `schema.json` 文件复制到项目的目录中。
\n
10. 跑步：

    npm 安装

\n

\n