Getting error _reactApollo.connect(0, mapQueriesToProps) is not a function

372 Views Asked by At

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

2

There are 2 best solutions below

0
On

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

0
On

You should import gql from 'graphql-tag' Check the migration docs https://www.apollographql.com/docs/react/2.0-migration.html