如何将道具从 Redux Store 传递到 Apollo GraphQL 查询
How To Pass Props From Redux Store into Apollo GraphQL Query
我刚刚开始在一个简单的 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 组件,它会找到 mapStateToProps
指定的 search
prop
。但是,它给出:
TypeError: undefined is not an object (evaluating _ref3.search.searchInput).
很明显它没有找到 prop
。我的问题是,使用 Redux 存储中的 props
作为 Apollo GraphQL 连接组件中的变量的惯用方法是什么?
要创建更详细且对其他用户有用的答案:
要使用来自 redux connect
高阶组件的道具,请确保最后应用该功能。这可以在您的示例中通过
完成
const WithGraphql = graphql(/* ... */)(RepositoryList);
export default connect(mapStateToProps)(WithGraphql);
或者,您可以使用 redux 或 react-apollo 中的 compose
。
Compose 从最后到第一个应用函数。对于两个参数,compose 可以写成如下形式:
compose = (f, g) => (...args) => f(g(...args))
确保先在此处列出连接,然后再列出 graphql。这将创建一个新函数,然后您必须将其应用于您的组件 RepositoryList
:
export default compose(
connect(mapStateToProps),
graphql(/* ... */),
)(RepositoryList);
我刚刚开始在一个简单的 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 组件,它会找到 mapStateToProps
指定的 search
prop
。但是,它给出:
TypeError: undefined is not an object (evaluating _ref3.search.searchInput).
很明显它没有找到 prop
。我的问题是,使用 Redux 存储中的 props
作为 Apollo GraphQL 连接组件中的变量的惯用方法是什么?
要创建更详细且对其他用户有用的答案:
要使用来自 redux connect
高阶组件的道具,请确保最后应用该功能。这可以在您的示例中通过
const WithGraphql = graphql(/* ... */)(RepositoryList);
export default connect(mapStateToProps)(WithGraphql);
或者,您可以使用 redux 或 react-apollo 中的 compose
。
Compose 从最后到第一个应用函数。对于两个参数,compose 可以写成如下形式:
compose = (f, g) => (...args) => f(g(...args))
确保先在此处列出连接,然后再列出 graphql。这将创建一个新函数,然后您必须将其应用于您的组件 RepositoryList
:
export default compose(
connect(mapStateToProps),
graphql(/* ... */),
)(RepositoryList);