graphql mutation with React

[dev12341]

What is wrong with the following component?

import React from 'react';

import gql from 'graphql-tag';

import { Mutation  } from 'react-apollo';

const CREATE_PRODUCT = gql`

mutation {

    productCreate(input: {

      title: "NIKE  - 449788022", 

      descriptionHtml: " - MEN'S SHOES  42-MENS L/S TEES", 

      vendor: "NIKE"

    }) {

      product {

        id

      }

      userErrors {

        field

        message

      }

    }

  }

`;

class CreateProduct extends React.Component {

    dataReady = (data) =>{

        console.log('product created', data);

        this.props.onProductCreated(data);

    }

    render() {

        return (

        <Mutation mutation={CREATE_PRODUCT} >

            {({ error, data }) => {

                if (error) return <div>{error.message}{console.log(error)}</div>;

                return (

                    <>{this.dataReady(data)}</>

                );

            }}

        </Mutation>

        );

    }

}

export default CreateProduct;

[Michal17]

Hi @dev12341 

Hope you're having a great day!

What error do you get when you execute your code. I can assure you that your mutation works well:

Retrieving created product:

[dev12341]

The returned "data" object is "undefined". And no product is being created.

I am using it inside the example from https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/fetch-data-with-apollo

[dev12341]

Thanks for the help.

It seams the issue is with the React code and the <Mutation> implementation. Perhaps something is not correctly defined?

[Michal17 · Accepted solution]

Hi @dev12341 

Useful Resources:

Executing a mutation

[cmackie]

hey! how did you solve this? The solution (Apollo docs) only shows solutions for using functional components but I'd rather use a Class component if you figured out how .. thanks.