小道具をReduxストアからApollo GraphQLに渡す方法

Question

簡単なReact NativeアプリでApollo GraphQLを使っているだけで、できることに本当に感心しています。しかし、私はReduxストアとどのように統合されているかを頭に入れているわけではありません。基本的には、searchReducerからのユーザ入力をGraphQLクエリに渡す必要があります。接続されたコンポーネントをGraphQLクエリに渡して変数を渡すことができると思ったが、propsearchInputが見つかりませんでした。ここでは、コードです：

import React, { Component } from 'react'; 
import { FlatList, Text, StyleSheet } from 'react-native'; 
import { connect } from 'react-redux'; 
import Repository from './Repository'; 
import { graphql } from 'react-apollo'; 
import gql from 'graphql-tag'; 

const query = gql` 
    query repositoryOwner($login: String!) { 
     repositoryOwner(login: $login) { 
      url, 
      avatarUrl(size: 100), 
      repositories(first: 5) { 
       nodes { 
        name, 
        description 
       } 
      } 
     } 
    }`; 

class RepositoryList extends Component { 

    renderItem = ({ item }) => { 
     return <Repository name={item.name} description={item.description} />; 
    } 

    render() { 

     const { repositoryOwner } = this.props.data; 
     const data = repositoryOwner ? repositoryOwner.repositories.nodes : []; 

     return (
      <FlatList data={data} 
       renderItem={(repo) => this.renderItem(repo)} keyExtractor={(item, index) => index} /> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 

    return { 
     search: state.searchReducer 
    }; 
}; 

const withStore = connect(mapStateToProps)(RepositoryList); 

export default graphql(query, { 
    options: ({ search: { searchInput }}) => ({ variables: { login: searchInput }}) 
})(withStore); 

私はコンポーネントに反応connect EDを渡すことによって、それがmapStateToPropsで指定されたsearchpropを見つけるだろうと思いました。しかし、それは与える：

TypeError: undefined is not an object (evaluating _ref3.search.searchInput).

それは明らかにそれが見つからないprop。私の質問は、Apollo GraphQL接続コンポーネントの変数としてReduxストアのpropsを慣用的に使用する方法は何ですか？詳細に多くを行くと、他のユーザーのために有用である解答作成するには

Answer 1

：Reduxのconnect上位コンポーネントから小道具を使用するには

は、関数が最後に適用されていることを確認してください。これはまた、あなたが反応し、アポロをcomposeからReduxのかを使用することができます

const WithGraphql = graphql(/* ... */)(RepositoryList); 

export default connect(mapStateToProps)(WithGraphql); 

によってあなたの例で行うことができます。 Composeは機能を最後から最初に適用します。 2つの引数の場合、次のように書くことができます。

compose = (f, g) => (...args) => f(g(...args)) 

ここに最初に接続し、次にgraphqlをリストしてください。これにより、コンポーネントに適用する必要がある新しい関数が作成されます。RepositoryList：

export default compose(
    connect(mapStateToProps), 
    graphql(/* ... */), 
)(RepositoryList);