Solved

Create Product with raw jpeg Images using graphiQL

superstoredev
Shopify Partner
3 0 0

Hi,

I am trying to create/update product using graphiQl api, and as part of the product need to upload Jpeg Product images. I am using productCreate and productUpdate mutant, but both use ImageInput which only take image url.

How can I attach 64 base image as part of product create  like it can be done using rest api?

{
"altText": "",
"id": "",
"src": ""
}

Thanks in advance.

Accepted Solution (1)

ShopifyDevSup
Shopify Staff
1440 235 489

This is an accepted solution.

Hi @superstoredev 👋


To create media for the products using the `productCreate` mutation , the payload will need to include the `media` argument of the type `CreateMediaInput`. If the image needs to be uploaded, you can use the `stagedUploadsCreate` mutation and provide the staged upload URL as the `CreateMediaInput.originalSource` field. This guide highlight each step of the process, and the `productCreate` mutation would result in something similar to the below:

mutation productCreate($input: ProductInput!, $media:[CreateMediaInput!]) {
    productCreate(input: $input, media: $media) {
        product {
            id
            media (first:3)
                nodes {
                    ... on MediaImage {
                        id
                        image {
                            url
                        }
                    }
                }
            }
        }
    }
}

With variables: 

{
  "input": {
    "title": "new product"
  },
  "media": {
    "alt": "test",
    "mediaContentType": "IMAGE",
    "originalSource": "https://shopify-staged-uploads.storage.googleapis.com/tmp/1234/products/7c03w39e5-81fa0-44841-8s76e-12fe5eg33026e/shopify.jpg"
  }
}


Hope that helps!

 

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 2 (2)

ShopifyDevSup
Shopify Staff
1440 235 489

This is an accepted solution.

Hi @superstoredev 👋


To create media for the products using the `productCreate` mutation , the payload will need to include the `media` argument of the type `CreateMediaInput`. If the image needs to be uploaded, you can use the `stagedUploadsCreate` mutation and provide the staged upload URL as the `CreateMediaInput.originalSource` field. This guide highlight each step of the process, and the `productCreate` mutation would result in something similar to the below:

mutation productCreate($input: ProductInput!, $media:[CreateMediaInput!]) {
    productCreate(input: $input, media: $media) {
        product {
            id
            media (first:3)
                nodes {
                    ... on MediaImage {
                        id
                        image {
                            url
                        }
                    }
                }
            }
        }
    }
}

With variables: 

{
  "input": {
    "title": "new product"
  },
  "media": {
    "alt": "test",
    "mediaContentType": "IMAGE",
    "originalSource": "https://shopify-staged-uploads.storage.googleapis.com/tmp/1234/products/7c03w39e5-81fa0-44841-8s76e-12fe5eg33026e/shopify.jpg"
  }
}


Hope that helps!

 

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

superstoredev
Shopify Partner
3 0 0

This is a common problem, considering this has 4 steps process, may be a single page wiki will be useful.

Rest API allows you to create products with images ( raw or URL)in a single step.