Использование ретрансляции в родном приложении

Как вывести конечную точку 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}`);
});

но реагировать на родные использует реактивный нативный упаковщик для объединения своих модулей; кто-нибудь пытался использовать реле в ответном родном приложении?

Ответы

Ответ 1

Теперь можно использовать реакцию 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 packager (`response-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 или новее, мы нуждаемся в нем для функции passPerPreset в файле .babelrc.
  • Создайте новый файл `.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

Ответ 2

Вы можете найти рабочую версию в здесь, пока this будет решена.

Ответ 3

  • вам нужно установить пакет react-relay для react-native app

  • Перед точкой входа вашего приложения, использующего реагирование, введите сетевой слой с указанным вами URL-адресом

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