Here's a quick summary of everything we released in Q1 2024.

Hygraph
Docs

6.2 Exercises - Mutations

#Overview

In this lesson, we'll use the following mutations, which Hygraph created automatically when we created our Product model:

  • createProduct
  • updateProduct
  • publishProduct
  • unpublishProduct
  • deleteProduct

#createProduct

First, we will create a product with the productName “My latest product” and the productSlug “my-latest-product” using the createProduct mutation.

Our mutation looks like this:

If we go to the Content editor, we'll see our new entry created there, in the DRAFT stage.

createProduct mutationcreateProduct mutation

#updateProduct

Next, we'll use an updateProduct mutation to change the productName to “Updated product”. In order to identify the entry we want to update, we need to provide a unique identifier. We could use the entry ID, as it is unique, but for this tutorial we'll use the slug, which we configured to be unique when we added the field to the Product model.

Let's try this mutation:

updateProduct mutationupdateProduct mutation

We can update any product, not just newly created products. Let's try updating the Black leather shoes product:

updateProduct mutation - example 2updateProduct mutation - example 2

#publishProduct

Now that our product contains the latest update, we should move it from the DRAFT stage to PUBLISHED;

publishProduct mutationpublishProduct mutation

We'll use the publishProduct mutation for that, along with our product Slug to publish our product:

If we go to the content editor, we'll be able to see it's now published:

Published productPublished product

#unpublishProduct

To unpublish it, we'll use the unpublishProduct mutation:

And we can also see this change in the content editor:

Unpublished productUnpublished product

#deleteProduct

If we want to delete this product, we'll use the deleteProduct mutation:

We can run a quick query to check if the product was deleted. Create a new query in the API playground and paste in the following:

You can also check the content editor, where you'll see that there is no longer a product entry called “Updated Product”.

Deleted productDeleted product

The API Playground in Hygraph is a great space to conduct mutations because you can run queries quickly to verify that your mutation worked.

Now that we have practiced queries and mutations, we are ready to connect a frontend to create a storefront website to sell our products!