CODEWITHSUNDEEP
reactjsreact-apollo
Jim
Jim

Reputation: 669

Compose from apollo is not a function?

I upgraded react-apollo from 2.5 to 3.1 and my compose doesnt work anymore.

Here was what I had and worked fine until the upgrade :

import { graphql, compose } from "react-apollo";

//component register

export default compose(
  graphql(registerMutation, {name: "register"})
)(RegisterModal);

It now says "react.Apollo is not a function".

I don't understand why.

Any idea ?

Upvotes: 3

Views: 1124

Answers (2)

Eesa
Eesa

Reputation: 2859

Looks like in the current version of react-apollo 3.1.1 they are no longer including the compose magic function ;). From now on you will need to install recompose package and use compose from there:

import { graphql } from "react-apollo";
import { compose } from "recompose"

//component register

export default compose(
  graphql(registerMutation, {name: "register"})
)(RegisterModal);

link to package https://www.npmjs.com/package/recompose

Upvotes: 1

Harsh Vaid
Harsh Vaid

Reputation: 189

There is another way, 

import { graphql ,Mutation,Query} from 'react-apollo';
import gql from 'graphql-tag';

const CreateCheckout = gql`
 mutation checkoutCreate($input: CheckoutCreateInput!) {
  checkoutCreate(input: $input) {
    checkoutUserErrors {
      code
      field
      message
    }
    checkout {
        ...CheckoutFragment
      }
  }
}
${CheckoutFragment}
`;


async componentDidMount() {


    const input = {};
    await this.props.Checkout({
      variables: { input }
    })
    .then(res => {
      if (res.data.checkoutCreate.checkout.id){
       console.log("res.data.checkoutCreate:",res.data.checkoutCreate);
     }
     else {
      res.data.checkoutCreate.checkoutUserErrors.forEach(function (error) {
        if (error.field) {
          alert(error.message);
        } else {
          alert(error.message);
        }
      }.bind(this));
    }

    })


}


const CreatePageWithMutation = graphql(CreateCheckout, {
  name: 'Checkout', // name of the injected prop: this.props.createDraftMutation...
})(Dashboard)

export default CreatePageWithMutation;

Upvotes: 0

Related Questions