Question

如何公开graphql端点以响应原生应用？有没有人使用中继反应本机应用程序？中继excelHtml5技术概述中的示例使用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一起使用。

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。

说明副本：

备份您的项目。
确保您已准备好GraphQL服务器并且手头上还有schema.json。有关后两者的更多详细信息，请访问React-Relay项目页面。
确保您使用的是'npm`版本3或更高版本。
如果React Native的打包器（`react-native start`）在后台的某个地方运行，你应该立即停止它。
运行：
```
watchman watch-del-all
```
以及：
```
rm -rf $TMPDIR/react-*
```
以避免遇到已知的打包程序问题（https://github.com/facebook/react-native/issues/4968）。
从项目中删除`。/ node_modules`目录。

编辑`package.json`文件，确保它具有以下内容：

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

巴别塔版本尤为重要。确保你的项目使用babel 6.5或更高版本，我们需要它用于.babelrc文件中的passPerPreset功能。

创建一个新文件`.babelrc`并将其放在项目的目录中：

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

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

    const getBabelRelayPlugin = require('babel-relay-plugin');
    const schema = require('./schema.json');

    module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };

将`schema.json`文件复制到项目目录中。

运行：
```
npm install
```

Answer 2

您可以在here中找到合适的版本，直到this解决。

Answer 3

您需要为react-relay app安装react-native个包
在您的react-native应用程序的入口点之前，使用您公开的URL注入网络层

＆＃13;

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

＆＃13;

使用relay in react native app

3 个答案: