在 React Native App 中集成 Relay 和 Redux

Question

我是 React 新手-native.My 应用程序当前使用 redux，react-redux,router flux 和导航器。

我需要使用的后端是 GraphQL。我现在该怎么办？

我可以在不影响任何与 redux 相关的情况下将 Relay 集成到我的应用程序中吗？或者我应该转储 redux 并使用 relay？。 lokka 呢？真糊涂！！有人可以帮助我提供代码示例或与此问题相关的任何内容吗？

提前致谢:)

Answer 1

我在同一个应用程序中使用 relay 和 redux 没有太多（直到今天我没有任何问题）问题（该应用程序将在几周后投入生产）。我可以解释我是如何做到的。（我也是新的react-native和Js开发，我不认为这是最好的方法，但至少它对我有用）

relay和graphQL的搭建差不多花了一天的功夫。为此，请使用以下命令：-

npm install babel-core --save-dev
npm install babel-preset-react-native --save-dev
npm install babel-relay-plugin --save-dev
npm install react-relay --save
npm install graphql --save-dev
npm install sync-request --save-dev

然后创建一个名为 babelRelayPlugin.js 的文件并复制以下代码。

const getBabelRelayPlugin = require('babel-relay-plugin')
const introspectionQuery = require('graphql/utilities').introspectionQuery
const request = require('sync-request')

const url = 'your_api_here'

const response = request('POST', url, {
  qs: {
    query: introspectionQuery
  }
})

const schema = JSON.parse(response.body.toString('utf-8'))

module.exports = { plugins: [getBabelRelayPlugin(schema.data, { abortOnError: true })] }

并将 .babelrc 中的代码替换为：-

{
  "passPerPreset": true,
  "presets": [
    "./scripts/babelRelayPlugin",
    "react-native"
  ]
}

以下类可能需要使用此导入语句：-

import Relay, {
  Route,
  DefaultNetworkLayer
} from 'react-relay'

我的 App.js 文件看起来像：-

  function configureStore(initialState){
      const enhancer = compose(applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
        ),
        autoRehydrate()
      );

        return createStore(reducer,initialState,enhancer);
    }

    const store = configureStore({});
    persistStore(store, {storage: AsyncStorage})
    ////relay network layer injecting
    Relay.injectNetworkLayer(new DefaultNetworkLayer('your_api'))
    export default class App extends Component {
      render() {
        return (
          <Provider store={store}>
            {//here is your react-native-router-flux Navigation router}
            <NavigationRouter/>
          </Provider>
        );
      }
    }

注入中继网络层后，您可以在任何容器中使用以下代码从中继调用。这是我的一个容器的示例渲染方法：-

render() {
    var value = 'some_value';
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <Relay.RootContainer
        Component={TestComponent}
        //relay_route is imported from relay_route.js
        route={new relay_route({id:value})}
        renderFetched={(data)=> {
          return (
            <TestComponent parentProps={this.props} {...data} />
          );}}
        />
      </View>
    );

relay_route.js 应该类似于

class relay_route extends Route {
  static paramDefinitions = {
    userID: { required: true }
  }
  static queries = {
    user: () => Relay.QL`
      query { 
        user(id: $userID)
      }
    `
  }
  static routeName = 'UserRoute'
}

我的 TestComponent 看起来像：-

class TestComponent extends Component {
  render () {
    const user = this.props.user
    return (
      <Text>name: {user.name}</Text>
    )
  }
}

export default TestComponent = Relay.createContainer(TestComponent, {
  fragments: {
      user: () => Relay.QL`
      fragment on User {
        id,
        name
      }
    `
  }
})

如对中继有任何疑问，this 文档可以很好地帮助我们

在 React Native App 中集成 Relay 和 Redux

Integrating Relay with Redux in React Native App

reactjs

react-native

relayjs

graphql-js

redux-framework