React native 如何将道具从Redux商店传递到Apollo GraphQL查询

我刚开始使用Apollo GraphQL开发一个简单的React原生应用程序，它的功能给我留下了深刻的印象。但我还没有完全了解它是如何与Redux商店集成的。本质上，我需要将一些用户输入从我的

searchReducer

传递到我的GraphQL查询中。我以为我可以简单地将连接的组件传递到GraphQL查询并提供一个变量，但它找不到

prop

searchInput

。代码如下：

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);

import React，{Component}来自'React'；
从“react native”导入{FlatList，Text，StyleSheet}；
从'react redux'导入{connect}；
从“./Repository”导入存储库；
从'react apollo'导入{graphql}；
从“graphql标签”导入gql；
const query=gql`
查询repositoryOwner（$login:String！）{
repositoryOwner（登录名：$login）{
网址，
阿瓦塔鲁尔（尺寸：100），
存储库（第一：5）{
节点{
名称
描述
}
}
}
}`;
类RepositoryList扩展了组件{
renderItem=（{item}）=>{
返回；
}
render（）{
const{repositoryOwner}=this.props.data；
const data=repositoryOwner？repositoryOwner.repositories.nodes:[]；
返回(
this.renderItem（repo）}keyExtractor={（项，索引）=>index}/>
);
}
}
常量mapStateToProps=（状态）=>{
返回{
搜索：state.searchReducer
};
};
const withStore=connect（mapStateToProps）（存储列表）；
导出默认图形QL（查询、{
选项：（{search:{searchInput}}）=>（{variables:{login:searchInput}}）
})（与商店）；

我认为通过传递

connect

ed React组件，它将找到

search

prop

指定的

mapstatetops

。然而，它给出了：

TypeError:undefined不是对象（正在评估_ref3.search.searchInput）

---

所以很明显，它没有找到

prop

。我的问题是，在Apollo GraphQL连接的组件中，使用Redux存储中的

道具作为变量的惯用方法是什么？
创建一个更详细、对其他用户有用的答案：

要使用redux
connect
高阶组件中的道具，请确保最后应用该功能。在您的示例中，可以通过

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

export default connect(mapStateToProps)(WithGraphql);

或者，您可以使用redux或react apollo的
撰写
。
Compose从最后一个到第一个应用函数。对于两个参数，可以按以下方式编写：

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

确保在此处首先列出connect，然后列出graphql。这将创建一个新函数，然后必须将其应用于组件
RepositoryList
：

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

首先在组件上使用graphql，然后连接。通过这种方式，道具将被注入到查询包装器中。这似乎是可行的！谢谢你的帮助。我的一个担忧是，我试图使用Apollo的
compose
API：但它似乎没有使用
道具。一直抱怨不能将类作为函数调用。关于正确使用
compose
有什么想法吗？就在@Herku上。这对我来说很有魅力。我想我把
connect
第二个密码传给了我的
compose
，结果把事情搞砸了。感谢您抽出时间写下深思熟虑的答案！谢谢你的解决方案！这看起来确实像一个bug，所以我也打开了一个问题。