无法使用 React Native 获得 Relay 工作答案

【问题标题】：Not able to get Relay work with React Native无法使用 React Native 获得 Relay 工作
【发布时间】：2016-09-14 12:14:56
【问题描述】：

我正在尝试设置一个基本的 React Native Relay 项目。在花费大量时间尝试调试问题而没有任何运气之后，我正在创建这个问题。我在控制台上收到此警告，并且我的本机应用程序无法调用 GraphQL 服务器。

Warning: RelayNetworkLayer: Call received to injectImplementation(), but a layer was already injected.


Running application "ExampleApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

fetchWithRetries(): Still no successful response after 1 retries, giving up.

这是我的代码

index.ios.js

import React, { Component } from 'react';
import Relay from 'react-relay';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import App from './app';
import AppRoute from './route/appRoute';

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer("http://localhost:1337/graphy")
);

class ExampleApp extends Component {
  render() {
    return (
      <Relay.RootContainer
        Component={App}
        route={new AppRoute()}
      />
    );
  }
}

AppRegistry.registerComponent('ExampleApp', () => ExampleApp);

appRoute.js

'use strict';

import Relay from 'react-relay';

export default class extends Relay.Route {
  static queries = {
    page: (Component) => Relay.QL`
      query {
        posts(offset: 0) { ${Component.getFragment('page')} }
      }
    `,
  };

  static routeName = 'AppRoute';
}

app.js

'use strict';

import React, {Component} from 'react';
import Relay from 'react-relay';

import {
  View,
  Text,
} from 'react-native';

class App extends Component {

  render() {
    console.log('props', this.props);
    return(
     <View>
      <Text>Testing</Text>
     </View>
    );
  }
}


export default Relay.createContainer(App, {
  fragments: {
    page: () => Relay.QL`
      fragment on Viewer {
        posts { id, title }
      }
    `,
  }
});

package.json

{
  "name": "ExampleApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "babel": "^6.5.2",
    "babel-preset-react-native": "^1.8.0",
    "babel-relay-plugin": "^0.8.1",
    "react": "^0.14.8",
    "react-native": "^0.25.1",
    "react-relay": "^0.8.1"
  }
}

babelRelayPlugin.js

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

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

这里是完整的回购链接：https://github.com/popstand/react-native-relay-graphql-example

使用 ReactJS 和 Relay 构建的类似代码在网页上运行良好。我无法让它在 React Native 上运行。这里可能出了什么问题导致这个问题？

【问题讨论】：

标签： react-native graphql relayjs

【解决方案1】：

您的 GraphQL 服务器可能返回错误的响应。这发生在我身上，我通过调试服务器来解决（使用this）。

你可以在https://github.com/danielfeelfine/react-native-relay看到这个示例应用的代码

【讨论】：

【解决方案2】：

我建议您查看F8 App by Facebook。肯定有setup script、main route、relay container 和a schema 可以看到。

【讨论】：