代码之家 › 专栏 › 技术社区 › Parker Ziegler

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

apollo-client react-apollo graphql react-native

2

Parker Ziegler · 技术社区 · 8 年前

我刚刚开始使用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);

我想通过 connect ed React组件 search 道具 指定人 mapStateToProps . 然而,它给出了:

TypeError:undefined不是对象(正在计算\u ref3.search.searchInput)。

所以很明显,它没有发现 道具 . 我的问题是,惯用的用法是什么 props 作为Apollo GraphQL连接组件中的变量从Redux存储?

1 回复 | 直到 8 年前

1

5

Herku 8 年前

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

使用redux的道具 connect 高阶组件确保最后应用该函数。在您的示例中,可以通过

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

export default connect(mapStateToProps)(WithGraphql);

或者,您可以使用 compose 从…起 redux公司 或 反应阿波罗 . Compose从最后一个到第一个应用函数。对于两个参数,compose可以写为以下内容:

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

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

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