Frequently Asked Questions

Integration Setup & Prerequisites

What do I need before integrating Cloudinary with Hygraph?

To integrate Cloudinary with Hygraph, you must have active accounts for both platforms. If you don't have a Hygraph account, you can create one here. For Cloudinary, register here. Note that apps are environment-specific, so configuration applies per environment—keep this in mind if your project uses multiple environments.
Source: Hygraph Docs

How do I install the Cloudinary App in my Hygraph project?

To install the Cloudinary App, click here and follow these steps:

  1. Select your project in the dropdown and click Add App.
  2. Fill in the Cloud Name and API Key from your Cloudinary account's Account Details.
  3. Click Submit. A notification will confirm the changes are saved.
Source: Hygraph Docs

How do I migrate from the deprecated Cloudinary UIX to the new Cloudinary App?

To migrate, first ensure you have your Cloud Name and API Key saved. Then:

  1. Remove the Cloudinary UIX from your project via Settings > UI Extensions.
  2. Install the Cloudinary App and select your project.
  3. Enter your credentials and submit.
  4. Update your schema by editing the model and switching the field to Cloudinary asset.
For a step-by-step guide, see here. Source: Hygraph Docs

Features & Capabilities

What can I do with the Hygraph-Cloudinary integration?

With the Hygraph-Cloudinary integration, you can use Cloudinary as your preferred Digital Asset Management (DAM) solution for images, videos, and other digital assets. You can manage, select, upload, and reorder assets directly within Hygraph, similar to how you would use assets hosted by Hygraph. The integration supports multiple assets per entry, localization, and asset removal. Source: Hygraph Docs

How do I add the Cloudinary asset field to a model in Hygraph?

To add the Cloudinary asset field:

  1. Go to the Schema builder.
  2. Select your desired model.
  3. Choose Cloudinary Asset from the Add fields sidebar.
  4. Complete the Display name; the API ID is auto-filled. Optionally, add a description and configure options like multiple values or localization.
  5. Click Create to finalize.
Source: Hygraph Docs

How do I use the Cloudinary asset field in Hygraph's Content Editor?

In the Content Editor, select the model with the Cloudinary Asset field. Click Add from Cloudinary to pick assets from your Cloudinary account. You can select, upload, and reorder multiple assets if your schema allows. Assets can be removed by clicking the X on the asset card. Source: Hygraph Docs

Can I query Cloudinary assets in Hygraph using the API Playground?

Yes, you can query Cloudinary assets used in your Hygraph project via the API Playground found in your Hygraph project's left menu. For more details on querying content, see here. Source: Hygraph Docs

How do I update Cloudinary field data in Hygraph after changes in Cloudinary?

If Cloudinary asset metadata changes, you can update Hygraph fields by:

  1. Creating a function (e.g., a lambda) to catch Cloudinary webhooks.
  2. Using the webhook data (like asset ID) to find entries in Hygraph referencing the asset. Use JSON filters to search for IDs in Cloudinary fields.
  3. Update the fields in Hygraph using mutations.
Source: Hygraph Docs

Use Cases & Benefits

Why use Cloudinary as a DAM solution with Hygraph?

Cloudinary empowers companies to deliver visual experiences that inspire and connect by unleashing the full potential of their media. Integrating Cloudinary with Hygraph allows you to manage digital assets efficiently, leverage advanced media management features, and streamline workflows for content teams. Source: Hygraph Docs

What are the advantages of using the Cloudinary App over the deprecated UIX?

The Cloudinary App provides a more robust, environment-specific integration, improved configuration management, and ongoing support. Migrating from UIX to the App ensures compatibility with new features and better asset handling within Hygraph. Source: Hygraph Docs

Technical Requirements & Troubleshooting

Are Cloudinary Apps environment-specific in Hygraph?

Yes, Cloudinary Apps are environment-specific in Hygraph. Their configuration applies per environment, so if your project uses multiple environments, you must configure the app for each one individually. Source: Hygraph Docs

Where can I find more resources and documentation for Cloudinary and Hygraph integration?

You can access Cloudinary's official documentation here. For Hygraph integration guides and API references, visit the Hygraph Docs page. Source: Hygraph Docs

Help teams manage content creation and approval in a clear and structured way
Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

#Connect your Hygraph project to Cloudinary

Cloudinary empowers companies to deliver visual experiences that inspire and connect by unleashing the full potential of their media.

#What you can do with the Hygraph-Cloudinary integration

  • You can continue to use Cloudinary as your preferred DAM solution for images, videos, and other digital assets, in a similar way that you would use assets hosted by Hygraph.

#Prerequisites to use this integration

  • You must have a Hygraph account. If you don't have one, you can create one here.
  • You must have an Cloudinary account. If you don't have one, you can create one here.

#Install the Cloudinary app

Click here to install the Cloudinary App on Hygraph, then follow these steps:

Cloudinary installationCloudinary installation

  1. In the dropdown, select which project you want to install the app in, then click on the Add App button. You should be redirected to the Configure Cloudinary section of your Hygraph project.
  2. Fill in the Cloud Name and API Key fields using the information available in the Account Details section of your Cloudinary account.
  3. Click on the Submit button. A pop-up notification in the lower right corner of the screen will indicate that the changes have been saved.

#Add the Cloudinary asset field to a model

Add the Cloudinary asset field to a modelAdd the Cloudinary asset field to a model

  1. Navigate to the Schema builder.
  2. Select the model that you would like to add the Cloudinary Asset field to.
  3. Select the Cloudinary Asset field from the Add fields right sidebar.
  4. Complete the Display name field, and the API ID will be auto-filled by the system. Optionally, you can also add a Description. This screen allows you to control different properties of your Cloudinary asset field: you can allow multiple values, or you can localize the field, by selecting the checkboxes under the Field options section of the screen.
  5. Click on the Create button.

#Use the Cloudinary asset field in Hygraph

To use the Cloudinary asset field in Hygraph, navigate to the Content Editor and select the model you added the Cloudinary Asset field to.

  1. Click on the Add from Cloudinary button to select an asset hosted in your Cloudinary account.

    Cloudinary asset field in the Hygraph content editorCloudinary asset field in the Hygraph content editor

  2. In the Cloudinary Media Library, select the asset, and then click Add & close. You can also click Upload to select files from your computer and upload them to the linked Cloudinary account. You can then choose to add those files in the content entry.

    Add Cloudinary assetAdd Cloudinary asset

If your Cloudinary asset picker schema configuration allows multiple values, you will be able to select multiple assets in a content entry as a result. You can use the six-dot handle to reorder these assets by dragging and dropping them in the order you want:

Reorder Cloudinary assetsReorder Cloudinary assets

You can also click on the X on the right of an asset card to remove it form the list.

#Query your Cloudinary assets

You can query the Cloudinary assets used in your Hygraph project using our API Playground, which you will find on the left side menu of your Hygraph project.

Cloudinary assets query in our API PlaygroundCloudinary assets query in our API Playground

Find additional information on how to query content in Hygraph here.

#Update Cloudinary field data

In some cases it can be necessary to update Cloudinary data stored in Hygraph, due to an event that happened in Cloudinary - such as an update to an asset's metadata. You can use the following flow to do this:

  1. Create a simple function, such as a lambda, that can catch a webhook from Cloudinary.
  2. Using the information in the webhook, such as the asset ID, find the corresponding entries in Hygraph that reference this asset. You can use JSON filters to search for IDs in the underlying Cloudinary fields. It's also possible to filter on Cloudinary fields inside components, using the basic and modular component filters.
  3. Update the fields in Hygraph using mutations.

#How to replace the UIX with the new app

Here is the step-by-step guide on how to install the Cloudinary app for Hygraph to replace the UIX.

  1. Remove the Cloudinary UIX from your project. To do that, go to Settings > UI Extensions. Click on the three dots, then click on the Remove button.
  2. Click here to install the Cloudinary app.
  3. Select your project in the dropdown, then click on Add App.
  4. Enter the Cloud Name and API Key in the fields, then click Submit to save the settings.

Cloudinary migration - ConfigurationCloudinary migration - Configuration

  1. Now, go to the Schema editor and open the model that you are using the Cloudinary asset field in.
  2. Click on Edit Field. On the left top corner of the dialog, click on the dropdown, then click on Cloudinary asset. Finally, click on the Update button.

Cloudinary migration - Select assetCloudinary migration - Select asset

#Resources

  • Click here to access Cloudinary's online documentation.