I am using react-apollo client and ApolloProvider to connect my component with queryprops function to render data but I am getting this error undefined is not a function(evaluating(_reactApollo.connect)(mapQueriesToProps))
import React, { Component } from 'react';
import { connect, gql, graphql } from 'react-apollo';
import { View, Text, ActivityIndicator } from 'react-native';
class ProductsScreen extends Component {
componentWillMount() {
console.log('component is going to render');
}
renderProducts() {
if (this.props.data.loading) {
return (
<View>
<ActivityIndicator size='large' />
</View>
);
}
return (
<Text>{ this.props.data.shop.name }</Text>
);
}
render() {
return (
<View>
{ this.renderProducts() }
</View>
);
}
}
const mapQueriesToProps = ({ ownProps, state }) => {
return {
query: gql`query {
shop {
name
primaryDomain {
url
host
}
}
}`
};
};
export default connect(mapQueriesToProps)(ProductsScreen);
I don't know why connect function of react apollo does not work. So I resolved the issue by calling graphql function instead of connect function and passed myQuery as an argument. like this:
export default graphql(myQuery)(MyComponent);