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

反応ネイティブとリレーを一緒に使用できるようになりました。

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 も手元にあることを確認してください。後者の 2 つの詳細については、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` ファイルを編集し、次の内容が含まれていることを確認します。 
        「依存関係」: {
      "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 のバージョンは特に重要です。プロジェクトが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. 反応ネイティブ アプリのエントリ ポイントの前に、公開した URL を使用してネットワーク レイヤーを挿入します。

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

于 2015-09-05T09:18:07.093 に答える