How to Delete Product Variant in a Shopify Remix App using GraphQL Mutations?

Managing a Shopify store efficiently involves keeping your product catalog organized. This includes removing outdated or inactive product variants. Here, we’ll explore how to leverage the power of GraphQL mutations within your Remix app to seamlessly delete product variants.

Remix provides a robust framework for building Shopify apps. GraphQL mutations are operations used to modify data on the server. They allow you to perform create, update, or delete operations on resources. In the context of a Shopify app, mutations enable you to make changes to products, variants, orders, customers, and more.

Before jumping to the steps, check out

How to Create Products in a Shopify Remix App using GraphQL Mutations?

Prerequisites:

Before proceeding, ensure that the user has the necessary permissions and write access scope to remove product variant products within the Shopify store.

Steps to Delete Product Variant in a Shopify Remix App using GraphQL Mutations:

Step 1: Set Up Authentication and GraphQL Mutation

First, we need to set up authentication to ensure that the user has the necessary permissions. We’ll authenticate the admin user and then execute a GraphQL mutation to remove product variant. Here’s how you can do it:

import { json } from "@remix-run/node";
import { Form } from "@remix-run/react";
import {
    Button,
} from "@shopify/polaris";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
    await authenticate.admin(request);
    return null;
};

export const action = async ({ request }) => {
    const { admin } = await authenticate.admin(request);
    const response = await admin.graphql(
      `#graphql
      mutation productVariantDelete($id: ID!) {
        productVariantDelete(id: $id) {
          deletedProductVariantId
          product {
            id
          }
          userErrors {
            field
            message
          }
        }
      }`,
      {
        variables: {
          "id": "gid://shopify/ProductVariant/47493656215846"  //actual variant id
        },
      },
    );
        
    const responseJson = await response.json();
    console.log("responseJson", responseJson);

    return json({
        product: responseJson.data,
    });
};

This code snippet sets up the authentication and executes the GraphQL mutation to remove product variant.

Step 2: Display Product variant removed Interface

Now, let’s create the interface to trigger the product variant removal process. We’ll use Polaris components for the UI element. Here’s the code for the interface:

export default function Index() {

    return (
        <Form method="POST">
            <Button submit>Click</Button>
        </Form>
    );
}

This code sets up the UI interface with buttons to trigger product variant remove process.

Conclusion:

In conclusion, removing product variant in a Shopify Remix app using GraphQL mutations is a powerful way to remove product variant to your store programmatically. By following the steps outlined in this blog post, you can streamline the product variant removal process and enhance the overall user experience of your Shopify app.

Happy Coding!