如何将 props 从 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);

我认为通过传递connected React 组件，它会找到mapStateToProps指定的searchprop。但是，它提供：

TypeError： undefined 不是对象(评估 _ref3.search.searchInput)。

所以显然它没有找到那个prop.我的问题是，将 Redux 存储中的props用作 Apollo GraphQL 连接组件中的变量的惯用方法是什么？

Answer 1

要创建更详细且对其他用户有用的答案，请执行以下操作：

要使用 reduxconnect高阶组件中的 props，请确保最后应用该函数。这可以在您的示例中通过以下方式完成

const WithGraphql = graphql(/* ... */)(RepositoryList);
export default connect(mapStateToProps)(WithGraphql);

或者，您可以使用redux或react-apollo中的compose。 撰写应用从最后一个到第一个的函数。对于两个参数，组合可以写成如下：

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

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

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