graphql mutation with React

Solved
dev12341
New Member
9 0 0

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} >
            {({ errordata }) => {
                if (errorreturn <div>{error.message}{console.log(error)}</div>;
                return (
                    <>{this.dataReady(data)}</>
                );
            }}
        </Mutation>
        );
    }
}

export default CreateProduct;

 

0 Likes
Michal_Morek
Shopify Partner
819 71 132

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:

scrnli_09_06_2021_14-42-19.png

 

Retrieving created product:

scrnli_09_06_2021_14-42-14.png

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
dev12341
New Member
9 0 0

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

0 Likes
dev12341
New Member
9 0 0

Thanks for the help.

 

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

0 Likes
Michal_Morek
Shopify Partner
819 71 132

This is an accepted solution.

Hi @dev12341 

Useful Resources:

Executing a mutation

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
0 Likes