在反应本机应用程序中使用中继

Posted 2023-03-08

【中文标题】在反应本机应用程序中使用中继

【英文标题】：Using relay in react native app

【发布时间】：2015-11-22 03:55:15

【问题描述】：

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

【参考方案1】：

你需要为react-native应用安装react-relay包

在你的 react-native 应用的入口点之前，用你暴露的 url 注入网络层

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

【讨论】：

你确定 react-relay 可以与 react-native 一起使用吗？我不这么认为，目前 react-relay 依赖于 react & react-dom .. 见github.com/facebook/relay/issues/26

【参考方案2】：

你可以在here找到一个工作版本，直到this得到解决。

【讨论】：

您需要在给定的解决方案中添加说明，因为提供的链接将来可能无法使用。

问题的完整解释及其解决方案可以在问题页面中找到。这里写的东西太多了。

【参考方案3】：

现在可以同时使用 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` 文件，确保它具有以下内容：

 “依赖”：
      “反应”：“^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 功能。 创建一个新文件 `.babelrc` 并将它放在你的项目目录中： “预设”：[ "./scripts/babelRelayPlugin", “反应原生” ], “passPerPreset”：真 在项目目录中创建一个名为 `babelRelayPlugin.js` 的新文件，其内容如下：

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

    module.exports =  插件：[getBabelRelayPlugin(schema.data)] ;

将您的 `schema.json` 文件也复制到项目目录中。 运行：

npm install

【讨论】：

我尝试了这个解决方案，但得到了：“SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'”几个。看起来，我的 .babelrc 有问题。你能帮忙吗？

现有 RN 应用的说明链接不再可用（未找到返回页面）。