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 = gqlmutation { 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 (

{({ error, data }) => {
if (error) return

{error.message}{console.log(error)}

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

);
}
}

export default CreateProduct;

[Morek]

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 implementation. Perhaps something is not correctly defined?

[Morek]

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.