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

问题描述

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);

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

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

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:

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);

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))

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);