は、私はreact-native.Myアプリケーションに新しいですネイティブアプリケーション

Question

反応し、現在ナビゲータrouter flux &、react-redux、Reduxのを使用しています。

バックエンドは私がGraphQLで作業する必要があります。私は今どうすればいい？

私はreduxに関係することに何も影響を及ぼさずに私のアプリにRelayを統合することができますか？または私はreduxをダンプしてリレーを使うべきですか？ lokkaはどうですか？本当に混乱している！誰かがこの問題に関連するコード例などを手伝ってもらえますか？事前に

感謝:)

Answer 1

私は（私は今日までいずれかを持っていけない）問題（アプリケーションは数週間後に生産になります）あまりなく、同じアプリケーション内のリレーとReduxのを使用しています。私はそれをどのように達成したのか説明できました。 （私は新しい反応ネイティブとJsの開発でもありますが、私はこれを最善のアプローチとは言いませんが、少なくとも私が意図したとおりに動作します）

リレーと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文を使用する必要があり、以下： -

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私たちを助けるために上品です