14

如何公开 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 使用 react-native 打包器来打包它的模块；有没有人尝试在反应原生应用程序中使用中继？

4

3 回答 3

4

现在可以同时使用 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。

说明副本：

  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` 文件，确保它具有以下内容： 
        “依赖”：{
      “反应”：“^0.14.7”，
      "react-native": "facebook/react-native",
      “反应中继”：“^0.7.3”
    },
    “开发依赖”：{
      "babel-core": "^6.6.4",
      "babel-preset-react-native": "^1.4.0",
      "babel-relay-plugin": "^0.7.3"   
    }
    Babel 版本尤为重要。确保您的项目使用 babel 6.5 或更高版本，我们需要它用于 .babelrc 文件中的 passPerPreset 功能。
  8. 创建一个新文件 `.babelrc` 并将其放在项目目录中： 
        {
      “预设”：[
        "./scripts/babelRelayPlugin",
        “反应原生”
      ],
      “passPerPreset”：真
    }
  9. 在项目目录中创建一个名为 `babelRelayPlugin.js` 的新文件，其内容如下： 
        const getBabelRelayPlugin = require('babel-relay-plugin');
    const schema = require('./schema.json');

    module.exports = { 插件：[getBabelRelayPlugin(schema.data)] };
    将您的 `schema.json` 文件也复制到项目目录中。
  10. 跑：
    npm 安装
于 2016-03-08T15:20:44.203 回答
3

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

于 2015-12-02T17:31:20.140 回答
-2

  1. 你需要为应用程序安装react-relay包react-native

  2. 在您的 react-native 应用程序的入口点之前，使用您公开的 url 注入网络层

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

于 2015-09-05T09:18:07.093 回答