如何将来自 Redux Store 的 props 传递到 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);

我认为通过传递connected 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 高阶组件的 props，请确保最后应用该函数.这可以在您的示例中通过

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 Store 的 props 传递到 Apollo GraphQL 查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！