Slow product creation with GQL Admin API

New Member
1 0 6

Hello,
We are building a custom product for our customers with a standalone React app and using Shopify checkout. Each product is uniquely configured based on combinations of dimensions, frame type, glass, and passepartout. The price of the product is calculated by its width and height. Since we didn’t find a valid solution to create products that support arbitrary sizes on the Shopify side, we decided to use GraphQL Admin API to generate products. As a result, when the product is configured and the user hits “add to cart” we send all data (including a product picture) to GraphQL Admin API for product creation and publishing on Shopify and then add this product to the cart.

 

This process on the Shopify side takes a total of ~4.5 seconds. That includes:

The question is: Is there a way to optimize product creation time?

  • Product creation source code:
return await client.mutate<CreateProductDefaultVariant, CreateProductDefaultVariantVariables>(
    mutation: gql`
      mutation CreateProductDefaultVariant($input: ShopifyProductInput!) {
        shopify {
          productCreate(input: $input) {
            product {
              id
            }
          }
        }
      }
    `,
    variables: {
      input: {
        title,
        handle,
        productType: 'Generated Frame',
        tags,
        metafields,
        variants: [
          {
            title,
            price: priceCalculator(info.frame, info.configuration),
            sku,
            taxable: true,
            requiresShipping: true,
            weight: weightCalculator(info.frame),
            weightUnit: ShopifyWeightUnit.GRAMS
          }
        ],
        images: [
          {
            altText: 'Frame preview',
            src: info.imageURL
          }
        ]
      }
    }
  })
  • Picture upload source code:
const stagedUploadTargetResponse = await client.mutate
    GenerateStagedUploadTarget,
    GenerateStagedUploadTargetVariables
  >({
    mutation: gql`
      mutation GenerateStagedUploadTarget($input: ShopifyStagedUploadTargetGenerateInput!) {
        shopify {
          stagedUploadTargetGenerate(input: $input) {
            parameters {
              name
              value
            }
            url
          }
        }
      }
    `,
    variables: {
      input: {
        filename: image.filename,
        mimeType: image.buffer.type,
        resource: ShopifyStagedUploadTargetGenerateUploadResource.PRODUCT_IMAGE,
        ...options
      }
    }
  })
  • Product publishing source code:
return await client.mutate<PublishProduct, PublishProductVariables>(
    mutation: gql`
      mutation PublishProduct($productId: ID!) {
        shopify {
          publishablePublishToCurrentChannel(id: $productId) {
            publishable {
              publishedOnCurrentPublication
              ... on ShopifyProduct {
                handle
                variants(first: 1) {
                  edges {
                    node {
                      storefrontId
                    }
                  }
                }
              }
            }
          }
        }
      }
    `,
    variables: {
      productId
    }
  })

 

6 Likes
Highlighted
New Member
1 0 0
BUMP! I've been struggling with the same!
0 Likes
Highlighted
Tourist
13 0 2

Would love to get some input on this too! The process feels too slow at the moment! 

1 Like
Highlighted
Shopify Staff
Shopify Staff
505 64 77

Hey @Lauris,

 

An alternative approach might be to create a draft order instead, you can specify custom products + prices.

 

Otherwise you might be able to get creative with the order of events. For example: upload the image in the background before the user finishes configuring the product. This would at least shave 1.5 seconds off.

0 Likes