Question

我刚刚在一个简单的React Native应用程序上使用Apollo GraphQL，它真的给它留下了深刻的印象。但我并没有完全了解它如何与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);

我认为通过传递connect ed React组件，它会找到search指定的prop mapStateToProps。但是，它给出了：

TypeError：undefined不是对象（评估_ref3.search.searchInput）。

显然，它没有找到prop。我的问题是，在Redux存储中使用props作为Apollo GraphQL连接组件中的变量的惯用方法是什么？

Answer 1

创建一个更详细的答案，对其他用户有用：

要使用redux connect高阶组件中的props，请确保最后应用该函数。这可以通过

在您的示例中完成

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

export default connect(mapStateToProps)(WithGraphql);

或者，您可以使用 redux 或 react-apollo 中的compose。 Compose应用从last到first的函数。对于两个参数，compose可以写成如下：

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

确保先在此处列出连接，然后再列出graphql。这会创建一个新功能，然后您必须将其应用于组件RepositoryList：

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

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

1 个答案: