Wie man Reops von Redux Store in Apollo GraphQL übergibt Frage

Question

Ich bin gerade mit Apollo GraphQL auf einer einfachen React Native App und bin wirklich beeindruckt von dem, was es tun kann. Aber ich verstehe nicht, wie es in den Redux-Store integriert ist. Im Wesentlichen muss ich einige Benutzereingaben von meinem searchReducer in meine GraphQL-Abfrage übergeben. Ich dachte, ich könnte einfach die verbundene Komponente an meine GraphQL-Abfrage übergeben und eine Variable liefern, aber es findet nicht die propsearchInput. Hier ist der 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); 

Ich dachte, dass, indem man den connect ed Komponente reagieren, würde es die searchprop angegeben von mapStateToProps finden. Allerdings gibt es:

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

So offensichtlich ist es nicht zu finden prop. Meine Frage ist, was ist die idiomatische Art, props aus dem Redux-Speicher als Variablen in einer mit Apollo GraphQL verbundenen Komponente zu verwenden?

Answer 1

Um eine Antwort zu erstellen, die mehr ins Detail geht und ist für andere Benutzer nützlich:

Requisiten zu verwenden, um von der Redux connect höhere Ordnung Komponente sicher, dass die Funktion zuletzt angewandt wird. Dies kann in Ihrem Beispiel durch

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

export default connect(mapStateToProps)(WithGraphql); 

erfolgen Alternativ können Sie compose von redux oder reagieren-apollo verwenden. Compose wendet Funktionen vom letzten zum ersten an. Für zwei Argumente geschrieben werden compose wie die folgende können:

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

Vergewissern Sie sich zuerst hier aufzulisten verbinden und dann graphql. Dadurch wird eine neue Funktion, die Sie dann RepositoryList Ihre Komponente beantragen:

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