How to pass props from Redux store to Apollo GraphQL Query
I'm just going from Apollo GraphQL to a simple React Native app and am really impressed with what it can do. But I don't quite wrap my head around how it integrates with the Redux store. Basically I need to pass some user input from mine searchReducer
to my GraphQL query. I thought I could just pass the connected component to my GraphQL request and provide a variable, but no finding 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 connect
ed component to React it will find the search
prop
one specified mapStateToProps
. However, it gives:
TypeError: undefined is not an object (evaluation _ref3.search.searchInput).
Thus, it is obvious that he did not find that prop
. My question is, what's the idiomatic way to use props
from the Redux repository as variables in a component linked to Apgllo GraphQL?
source to share
To create an answer that is more detailed and helpful to other users:
To use props from a higher order redux component connect
, make sure the function is applied last. This can be done in your example
const WithGraphql = graphql(/* ... */)(RepositoryList);
export default connect(mapStateToProps)(WithGraphql);
Alternatively, you can use compose
from redux or react-apollo. Compose applies functionality from last to first. For two component arguments, you can write the following:
compose = (f, g) => (...args) => f(g(...args))
Make sure to list the connection first here and then graphql. This will create a new function that you must then apply to your component RepositoryList
:
export default compose(
connect(mapStateToProps),
graphql(/* ... */),
)(RepositoryList);
source to share