如何将道具从Redux存储传递到Apollo GraphQL查询 [英] How To Pass Props From Redux Store into Apollo GraphQL Query

问题描述

我只是在一个简单的React Native应用程序上使用Apollo GraphQL，它的功能给我留下了深刻的印象.但是我还不太了解它如何与Redux商店集成.本质上，我需要将某些用户输入从searchReducer传递到GraphQL查询中.我以为我可以简单地将连接的组件传递给我的GraphQL查询并提供一个变量，但是找不到prop searchInput.这是代码:

I'm just getting going with Apollo GraphQL on a simple React Native app and am really impressed by what it can do. But I'm not quite wrapping my head around how it integrates with the Redux store. Essentially, I need to pass some user input from my searchReducer into my GraphQL query. I thought I could simply pass the connected component to my GraphQL query and supply a variable, but it's not finding the prop searchInput. Here's the code:

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.但是，它给出了:

I thought that by passing the connected React component, it would find the search prop specified by mapStateToProps. However, it gives:

TypeError:undefined不是一个对象(正在评估_ref3.search.searchInput).

TypeError: undefined is not an object (evaluating _ref3.search.searchInput).

因此，显然没有找到prop.我的问题是，将Redux存储中的props用作Apollo GraphQL连接的组件中的变量的惯用方式是什么?

So obviously it's not finding that prop. My question is, what is the idiomatic way to use props from the Redux store as variables in an Apollo GraphQL connected component?

推荐答案

要创建更详细且对其他用户有用的答案，

To create an answer that goes more into detail and is useful for other users:

要使用来自redux connect高阶组件的道具，请确保该函数最后应用.可以在您的示例中通过

To use props from the redux connect higher order component make sure that the function is applied last. This can be done in your example by

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

export default connect(mapStateToProps)(WithGraphql);

或者，您可以使用 redux 或 react-apollo 中的compose. Compose从最后到第一个应用功能.对于两个参数，可将compose编写为以下内容:

Alternatively you can use compose from redux or react-apollo. Compose applies functions from last to first. For two arguments compose can be written as the following:

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

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

Make sure to list connect first here and then graphql. This creates a new function that you then have to apply to your component RepositoryList:

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

这篇关于如何将道具从Redux存储传递到Apollo GraphQL查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！