Adding a Theme Asset through GraphQL

Learn how to add an asset to a theme using GraphQL mutation.

In this guide, you will learn how to upload and save an image and add it as a reference to a place in your theme using GraphQL based on your preference.

To upload and save an image, you should make a GraphQL saveThemeAssetFromUpload mutation.

This mutation commits and uploads your file to the Git repository in the same folder as the name of your theme.

saveThemeAssetFromUpload mutation

curl --location 'https://community.mine.com/t5/s/api/2.1/graphql' \
--header 'Li-Api-Session-Key;' \
--header 'Content-Type: multipart/form-data' \
--form 'operations="{
    \"query\": \"mutation($themeId: String!, $uniqueAssetName: String!, $assetPart: Upload!) { saveThemeAssetFromUpload(themeId: $themeId uniqueAssetName: $uniqueAssetName assetPart: $assetPart){result {name directoryName subDirectoryName feature size lastModified revision mimeType url localOverride} errors {...on UploadLimitReached {message fields maxNum} ...on TooManyUploadedImages {message fields } ...on DisallowedImageFormat {message fields mimeType allowedFormats} ...on UploadTooLarge {message fields maximumAllowedUploadSize} ...on NoFileUploaded {message fields } ...on UploadFailed {message fields } ...on InvalidAssetDirectoryNameError {message fields } ...on InvalidAssetNameError {message fields } ...on AssetAlreadyExistsError {message fields directoryName subDirectoryName assetName}}}}\"
}"' \
--form 'map="{\"file\":[\"variables.assetPart\"]}"' \
--form 'file=@"awesomeBackground.jpg"'

Adding a Reference to an Image in the Theme

After you have successfully added your image using the above mutations, you should make a GraphQL createOrUpdateTheme mutation and add a reference to a place based on your preference.

The GraphQL call should use the same mutation from the Create or update theme override through GraphQL guide but the variables of the asset referring to your uploaded image.

For example, for the navigation bar background, you can change the field background in the navbar field with the below value:

navbar field example

"background" : {
  "imageAssetName" : "awesomeLogo.svg",
  "imageLastModified" : "1686589219153"
},