title: How To Pass Props From Redux Store into Apollo GraphQL Query
body: <p>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 <code>searchReducer</code> 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 <code>prop</code> <code>searchInput</code>. Here's the code:</p>
  
  <pre><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 }) =&gt; {
          return &lt;Repository name={item.name} description={item.description} /&gt;;
      }
  
      render() {
  
          const { repositoryOwner } = this.props.data;
          const data = repositoryOwner ? repositoryOwner.repositories.nodes : [];
  
          return (
              &lt;FlatList data={data}
                  renderItem={(repo) =&gt; this.renderItem(repo)} keyExtractor={(item, index) =&gt; index} /&gt;
          );
      }
  }
  
  const mapStateToProps = (state) =&gt; {
  
      return {
          search: state.searchReducer
      };
  };
  
  const withStore = connect(mapStateToProps)(RepositoryList);
  
  export default graphql(query, {
      options: ({ search: { searchInput }}) =&gt; ({ variables: { login: searchInput }})
  })(withStore);
  </code></pre>
  
  <p>I thought that by passing the <code>connect</code>ed React component, it would find the <code>search</code> <code>prop</code> specified by <code>mapStateToProps</code>. However, it gives:</p>
  
  <blockquote>
    <p>TypeError: undefined is not an object (evaluating _ref3.search.searchInput).</p>
  </blockquote>
  
  <p>So obviously it's not finding that <code>prop</code>. My question is, what is the idiomatic way to use <code>props</code> from the Redux store as variables in an Apollo GraphQL connected component?</p>