Demo Gato GraphQL + Bricks Builder

Sincronizar página Bricks de staging para produção (incluindo imagens!)

Busca uma página ou template Bricks de um site WordPress de staging e replica no site WordPress de produção, sincronizando as imagens também

Leonardo Losoviz
Leonardo Losoviz -
Logo
Image
Target Image

Podemos usar o Gato GraphQL com a extensão Bricks para exportar uma página ou template Bricks de um site WordPress de staging e replicá-lo em um site WordPress de produção, sincronizando as imagens também.

O plugin Gato GraphQL + Power Extensions + extensão Bricks deve estar instalado nos dois sites, de staging e de produção.

O identificador comum entre os sites de staging e de produção é o slug. Se o slug não for encontrado no site de produção, a query criará uma nova página Bricks. Se o slug for encontrado, a query atualizará a página Bricks existente.

A query importa todos os itens de mídia ausentes incluídos na página Bricks do site de staging:

  • A imagem destacada da página
  • Imagens de fundo de todos os elementos Bricks
  • Imagens de todos os elementos Bricks dos seguintes tipos:
    • image
    • image-gallery
    • logo
    • svg

Para cada imagem, a query verifica se existe uma imagem com o mesmo slug no site de produção (o slug é o identificador comum para itens de mídia entre os sites). Se existir, usa o ID da imagem do site de produção. Caso contrário, importa a imagem para o site de produção e atribui esse ID ao elemento Bricks.

O site de staging deve estar acessível ao site de produção para buscar as imagens por meio de suas URLs. Se o domínio de staging for considerado inseguro (por exemplo, um domínio .local), o site de produção precisa permitir URLs inseguras.

Ambos os sites devem permitir o acesso ao custom post type correspondente (bricks_template, page, ou qualquer outro).

Devemos fornecer as seguintes variáveis:

  • postSlug: O slug da página ou template Bricks (ou qualquer outro custom post type) a ser transferido
  • prodSiteGraphQLEndpointURL: A URL do endpoint GraphQL do site WordPress de produção
  • updateMediaItems: Se os itens de mídia já existentes no site de produção devem ser atualizados. O valor padrão é true.
  • username: O nome de usuário para autenticação no site de produção
  • appPassword: A senha de aplicativo para autenticação no site de produção

Aqui está a query GraphQL:

query InitializeVariables
  @configureWarningsOnExportingDuplicateVariable(enabled: false)
{
  emptyArray: _echo(value: [])
    @export(as: "imageSlugs")
    @export(as: "bricksAnyElementBackgroundImageIDs")
    @export(as: "bricksImageElementImageIDs")
    @export(as: "bricksSvgElementFileIDs")
    @export(as: "bricksLogoElementLogoIDs")
    @export(as: "bricksLogoElementLogoInverseIDs")
    @export(as: "bricksImageGalleryElementListIDItems")
    @remove
  
  emptyID: _echo(value: null)
    @export(as: "featuredImageID")
    @remove
 
  emptyBool: _echo(value: false)
    @export(as: "bricksIsEnabledForCustomPostType")
    @remove
}
 
query GetPostData(
  $postTypes: [String!]! = ["bricks_template", "page"]
  $postSlug: String!
)
  @depends(on: "InitializeVariables")
{
  customPost(by: { slug: $postSlug }, customPostTypes: $postTypes, status: any)
    @fail(
      message: "There is no Bricks page in the staging site with the provided slug"
      data: {
        slug: $postSlug
      }
    )
  {
    rawTitle
      @export(as: "postTitle")
    rawContent
      @export(as: "postContent")
    rawExcerpt
      @export(as: "postExcerpt")
    rawStatus
      @export(as: "postStatus")
    date
      @export(as: "postDate")
    gmtDate: date(gmt: true)
      @export(as: "postGmtDate")
    customPostType
      @export(as: "postType")
    featuredImage {
      id @export(as: "featuredImageID")
    }
    metaKeys(filter: { exclude: ["_edit_last", "_edit_lock", "_pingme", "_encloseme", "_trackbackme", "enclosure", "_thumbnail_id", "_wp_trash_meta_status", "_wp_trash_meta_time", "_wp_desired_post_slug", "_wp_old_slug", "_wp_old_date"] })
    meta(keys: $__metaKeys) 
      @export(as: "postMeta")
 
    bricksIsEnabledForCustomPostType
      @export(as: "bricksIsEnabledForCustomPostType")
 
    bricksAnyElementBackgroundImageElementsData: bricksData
      @underEachArrayItem
        @underJSONObjectProperty(
          by: { path: "settings._background.image.id" }
          failIfNonExistingKeyOrPath: false
        )
          @export(as: "bricksAnyElementBackgroundImageIDs")
 
    bricksImageElementsData: bricksData( filterBy:{ include: ["image"] } )
      @underEachArrayItem
        @underJSONObjectProperty(
          by: { path: "settings.image.id" }
          # External images have no ID
          failIfNonExistingKeyOrPath: false
        )
          @export(as: "bricksImageElementImageIDs")
 
    bricksSvgElementsData: bricksData( filterBy:{ include: ["svg"] } )
      @underEachArrayItem
        @underJSONObjectProperty(
          by: { path: "settings.file.id" }
          failIfNonExistingKeyOrPath: false
        )
          @export(as: "bricksSvgElementFileIDs")
 
    bricksLogoElementsData: bricksData( filterBy:{ include: ["logo"] } )
      @underEachArrayItem(
        affectDirectivesUnderPos: [1, 3]
      )
        @underJSONObjectProperty(
          by: { path: "settings.logo.id" }
          failIfNonExistingKeyOrPath: false
        )
          @export(as: "bricksLogoElementLogoIDs")
        @underJSONObjectProperty(
          by: { path: "settings.logoInverse.id" }
          failIfNonExistingKeyOrPath: false
        )
          @export(as: "bricksLogoElementLogoInverseIDs")
          
    bricksImageGalleryElementsData: bricksData( filterBy:{ include: ["image-gallery"] } )
      @underEachArrayItem
        @underJSONObjectProperty(
          by: { path: "settings.items.images" }
          failIfNonExistingKeyOrPath: false
        )
          @underEachArrayItem
            @underJSONObjectProperty(
              by: { key: "id" }
              failIfNonExistingKeyOrPath: false
            )
              @export(as: "bricksImageGalleryElementListIDItems")
  }
 
  isMissingPostInStaging: _isNull(value: $__customPost)
    @export(as: "isMissingPostInStaging")
}
 
query MaybeFailIfPostIsNotEnabledForBricks
  @depends(on: "GetPostData")
  @skip(if: $isMissingPostInStaging)
  @skip(if: $bricksIsEnabledForCustomPostType)
{
  _fail(message: "Bricks is not enabled for the custom post type")
}
 
query FetchAndExportImageData
  @depends(on: "MaybeFailIfPostIsNotEnabledForBricks")
  @include(if: $bricksIsEnabledForCustomPostType)
{
  # External images have no ID, and the featured image may be `null`
  mediaItemsIDsToExport: _arrayMerge(
    arrays: [
      [$featuredImageID],
      $bricksAnyElementBackgroundImageIDs,
      $bricksImageElementImageIDs,
      $bricksSvgElementFileIDs,
      $bricksLogoElementLogoIDs,
      $bricksLogoElementLogoInverseIDs,
      $bricksImageGalleryElementListIDItems,
    ]
  )
  filteredMediaItemsIDsToExport: _arrayFilter(array: $__mediaItemsIDsToExport)
  mediaItems(filter: { ids: $__filteredMediaItemsIDsToExport, mimeTypes: "*" }, pagination: { limit: -1 }) {
    id
    src(size: "full")
    slug
    title
    caption
    altText
    description
    date
    gmtDate: date(gmt: true)
    mimeType
      @export(
        as: "imageData"
        type: LIST
        affectAdditionalFieldsUnderPos: [1, 2, 3, 4, 5, 6, 7, 8, 9]
      )
  }
}
 
query ExportBricksPostToProductionSite(
  $postSlug: String!
  $prodSiteGraphQLEndpointURL: String!
  $username: String!
  $appPassword: String!
  $updateMediaItems: Boolean! = true
)
  @depends(on: "FetchAndExportImageData")
  @include(if: $bricksIsEnabledForCustomPostType)
{
  loginCredentials: _sprintf(
    string: "%s:%s",
    values: [$username, $appPassword]
  )
    @remove
 
  base64EncodedLoginCredentials: _strBase64Encode(
    string: $__loginCredentials
  )
    @remove
 
  loginCredentialsHeaderValue: _sprintf(
    string: "Basic %s",
    values: [$__base64EncodedLoginCredentials]
  )
    @remove
 
  requestAgainstProductionSite: _sendGraphQLHTTPRequest(
    input: {
      endpoint: $prodSiteGraphQLEndpointURL,
      query: """
query InitializeVariables
  @configureWarningsOnExportingDuplicateVariable(enabled: false)
{
  emptyArray: _echo(value: [])
    @export(as: "existingLocalImagesWithSlugs")
    @export(as: "localMediaItemData")
    @export(as: "mergeBricksAnyElementBackgroundImageEntries")
    @export(as: "mergeBricksImageElementImageEntries")
    @export(as: "mergeBricksSvgElementFileEntries")
    @export(as: "mergeBricksLogoElementLogoEntries")
    @export(as: "mergeBricksLogoElementLogoInverseEntries")
    @export(as: "mergeBricksImageGalleryElementImageEntries")
    @export(as: "computeBricksImageGalleryElementListIDs")
    @export(as: "computeBricksImageGalleryElementListElementProps")
    @export(as: "computeBricksImageGalleryElementListImageEntries")
    @remove
  
  emptyID: _echo(value: null)
    @export(as: "postId")
    @export(as: "localFeaturedImageID")
    @remove
}
 
query ExportData(
  $featuredImageID: ID!
)
  @depends(on: "InitializeVariables")
{
  originalImageSizeNames: imageSizeNames
    @remove
  imageSizeNames: _arrayAddItem(array: $__originalImageSizeNames, value: "full")
    @export(as: "imageSizeNames")
 
  hasFeaturedImageID: _notNull(value: $featuredImageID)
    @export(as: "hasFeaturedImageID")
}
 
############################################################################
# Calculate what images are already in the production site
############################################################################
 
query ProcessImageDataBySlugs(
  $imageData: [JSONObject!]!
)
  @depends(on: "ExportData")
{
  imageDataByID: _arrayOfJSONObjectsExtractPropertyAndConvertToObject(
    array: $imageData,
    key: "id",
  )
    @export(as: "imageDataByID")
  imageDataBySlug: _arrayOfJSONObjectsExtractPropertyAndConvertToObject(
    array: $imageData,
    key: "slug",
  )
    @export(as: "imageDataBySlug")
  imageSlugs: _objectProperties(object: $__imageDataBySlug)
    @export(as: "imageSlugs")
}
 
query RetrieveExistingLocalImageData
  @depends(on: "ProcessImageDataBySlugs")
{
  existingLocalImagesWithSlugs: mediaItems(filter: { slugs: $imageSlugs, mimeTypes: "*" }, pagination: { limit: -1 }) {
    id
    slug
      @export(
        as: "existingLocalImagesWithSlugs"
        type: LIST
        affectAdditionalFieldsUnderPos: [1]
      )
  }
}
 
query ComputeLocalImagesData
  @depends(on: "RetrieveExistingLocalImageData")
{
  existingLocalImagesBySlug: _arrayOfJSONObjectsExtractPropertyAndConvertToObject(
    array: $existingLocalImagesWithSlugs,
    key: "slug",
  )
  existingLocalImageSlugs: _objectProperties(object: $__existingLocalImagesBySlug)
  existingLocalImageDataBySlug: _objectIntersectKeyWithArrays(object: $imageDataBySlug, arrays: [$__existingLocalImageSlugs])
    @remove
  existingLocalImageData: _objectValues(object: $__existingLocalImageDataBySlug)
    @export(as: "existingLocalImageData")
 
  nonExistingLocalImageSlugs: _arrayDiff(arrays: [$imageSlugs, $__existingLocalImageSlugs])
  nonExistingLocalImageDataBySlug: _objectIntersectKeyWithArrays(object: $imageDataBySlug, arrays: [$__nonExistingLocalImageSlugs])
    @remove
  nonExistingLocalImageData: _objectValues(object: $__nonExistingLocalImageDataBySlug)
    @export(as: "nonExistingLocalImageData")
}
 
############################################################################
# Prepare variables to convert external images to local images
############################################################################
 
query RetrieveImageData
  @depends(on: "ComputeLocalImagesData")
{
  localMediaItemData: mediaItems(filter: { slugs: $imageSlugs, mimeTypes: "*" }, pagination: { limit: -1 }) {
    id
    slug
    src(size: "full")
    srcs(sizes: $imageSizeNames)
    full: src(size: "full")
      @export(
        as: "localMediaItemData"
        type: LIST
        affectAdditionalFieldsUnderPos: [1, 2, 3, 4]
      )
  }
}
 
query ComputeImages
  @depends(on: "RetrieveImageData")
{
  localMediaItemDataBySlug: _arrayOfJSONObjectsExtractPropertyAndConvertToObject(
    array: $localMediaItemData,
    key: "slug",
  )
    @export(as: "localMediaItemDataBySlug")
}
 
############################################################################
# Import images from the staging site
############################################################################
 
query GenerateCreateImageMutationInputs
  @depends(on: "ComputeImages")
{
  createMediaItemsInputs: _echo(value: $nonExistingLocalImageData)
    @underEachArrayItem(
      passValueOnwardsAs: "mediaItemData"
      affectDirectivesUnderPos: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "src" }
        }
        passOnwardsAs: "src"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "slug" }
        }
        passOnwardsAs: "slug"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "title" }
        }
        passOnwardsAs: "title"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "caption" }
        }
        passOnwardsAs: "caption"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "altText" }
        }
        passOnwardsAs: "altText"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "description" }
        }
        passOnwardsAs: "description"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "gmtDate" }
        }
        passOnwardsAs: "gmtDate"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "date" }
        }
        passOnwardsAs: "date"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "mimeType" }
        }
        passOnwardsAs: "mimeType"
      )
      @applyField(
        name: "_echo"
        arguments: {
          value: {
            from: {
              url: {
                source: $src
              }
            },
            slug: $slug,
            title: $title,
            caption: $caption,
            altText: $altText,
            description: $description,
            date: $date,
            gmtDate: $gmtDate,
            mimeType: $mimeType,
          }
        }
        setResultInResponse: true
      )
    @export(as: "createMediaItemsInputs")  
}
 
mutation ImportImages
  @depends(on: "GenerateCreateImageMutationInputs")
{
  createMediaItems(inputs: $createMediaItemsInputs) {
    mediaItemID
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    mediaItem {
      ...MediaItemData
    }
  }
}
 
############################################################################
# Update the already-existing media items in the production site
############################################################################
 
query GenerateUpdateImageMutationInputs(
  $updateMediaItems: Boolean! = true
)
  @depends(on: "ImportImages")
  @include(if: $updateMediaItems)
{
  updateMediaItemsInputs: _echo(value: $existingLocalImageData)
    @underEachArrayItem(
      passValueOnwardsAs: "mediaItemData"
      affectDirectivesUnderPos: [1, 2, 3, 4, 5, 6, 7, 8]
    )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "slug" }
        }
        passOnwardsAs: "commonSlug"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $localMediaItemDataBySlug,
          by: { key: $commonSlug }
        }
        passOnwardsAs: "localImageData"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $localImageData,
          by: { key: "id" }
        }
        passOnwardsAs: "id"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "title" }
        }
        passOnwardsAs: "title"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "caption" }
        }
        passOnwardsAs: "caption"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "altText" }
        }
        passOnwardsAs: "altText"
      )
      @applyField(
        name: "_objectProperty"
        arguments: {
          object: $mediaItemData,
          by: { key: "description" }
        }
        passOnwardsAs: "description"
      )
      @applyField(
        name: "_echo"
        arguments: {
          value: {
            id: $id,
            title: $title,
            caption: $caption,
            altText: $altText,
            description: $description,
          }
        }
        setResultInResponse: true
      )
    @export(as: "updateMediaItemsInputs")  
}
 
mutation UpdateImages(
  $updateMediaItems: Boolean! = true
)
  @depends(on: "GenerateUpdateImageMutationInputs")
  @include(if: $updateMediaItems)
{
  updateMediaItems(inputs: $updateMediaItemsInputs) {
    mediaItemID
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    mediaItem {
      ...MediaItemData
    }
  }
}
 
fragment MediaItemData on Media {
  altText
  caption
  mimeType
  slug
  src
  title
}
 
############################################################################
# Adapt the featured image to use the local image
############################################################################
 
query AdaptFeaturedImageToLocalImage(
  $featuredImageID: ID!
)
  @depends(on: "UpdateImages")
  @include(if: $hasFeaturedImageID)
{
  featuredImageID: _echo(value: $featuredImageID)
    @passOnwards(as: "externalFeaturedImageID")
    @applyField(
      name: "_objectProperty"
      arguments: {
        object: $imageDataByID,
        by: { key: $externalFeaturedImageID }
      }
      passOnwardsAs: "externalImageData"
    )
    @applyField(
      name: "_objectProperty"
      arguments: {
        object: $externalImageData,
        by: { key: "slug" }
      }
      passOnwardsAs: "commonSlug"
    )
    @applyField(
      name: "_objectProperty"
      arguments: {
        object: $localMediaItemDataBySlug,
        by: { key: $commonSlug }
      }
      passOnwardsAs: "localImageData"
    )
    @applyField(
      name: "_objectProperty"
      arguments: {
        object: $localImageData,
        by: { key: "id" }
      }
      setResultInResponse: true
    )
    @export(as: "localFeaturedImageID")
}
 
############################################################################
# Create/update the Bricks post with the external data
############################################################################
 
query CheckIfCustomPostExists(
  $postSlug: String!
  $postType: String!
)
  @depends(on: "AdaptFeaturedImageToLocalImage")
{
  maybeCustomPost: customPost(by: { slug: $postSlug }, customPostTypes: [$postType], status: any)
  {
    id
  }
  customPostExists: _notNull(value: $__maybeCustomPost)
    @export(as: "customPostExists")
}
 
mutation CreateOrUpdateCustomPost(
  $postSlug: String!
  $postTitle: String!
  $postContent: String!
  $postExcerpt: String!
  $postStatus: CustomPostStatusEnum!
  $postDate: DateTime!
  $postGmtDate: DateTime!
  $postType: String!
  $postMeta: JSONObject!
)
  @depends(on: "CheckIfCustomPostExists")
{
  customPost(by: { slug: $postSlug }, customPostTypes: [$postType], status: any)
    @include(if: $customPostExists)
  {
    id
      @export(as: "postId")
    update(input: {
      title: $postTitle,
      contentAs: { html: $postContent },
      excerpt: $postExcerpt,
      status: $postStatus,
      date: $postDate,
      gmtDate: $postGmtDate,
      featuredImageBy: {
        id: $localFeaturedImageID
      },
      meta: $postMeta
    }) {
      status
      errors {
        __typename
        ...on ErrorPayload {
          message
        }
      }
      ...on GenericCustomPostUpdateMutationPayload {
        customPost {
          ...CustomPostData
        }
      }
      ...on PostUpdateMutationPayload {
        post {
          ...CustomPostData
        }
      }
      ...on PageUpdateMutationPayload {
        page {
          ...CustomPostData
        }
      }
    }
  }
 
  createCustomPost(input: {
    title: $postTitle,
    slug: $postSlug,
    contentAs: { html: $postContent },
    excerpt: $postExcerpt,
    status: $postStatus,
    date: $postDate,
    gmtDate: $postGmtDate,
    featuredImageBy: {
      id: $localFeaturedImageID
    },
    customPostType: $postType,
    meta: $postMeta
  })
    @skip(if: $customPostExists)
  {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    customPostID
      @export(as: "postId")
    customPost {
      ...CustomPostData
    }
  }
}
 
fragment CustomPostData on CustomPost {
  id
  title
  slug
  content
  excerpt
  status
  date
  gmtDate: date(gmt: true)
  metaKeys
  meta(keys: $__metaKeys)
}
 
############################################################################
# Update the Bricks Image elements to use the local images
############################################################################
 
query ExportBricksImageData(
  $postSlug: String!
  $postType: String!
)
  @depends(on: "CreateOrUpdateCustomPost")
{
  updateBricksImageDataCustomPost: customPost(by: { slug: $postSlug }, customPostTypes: [$postType], status: any) {
    id
 
 
    bricksAnyElementBackgroundImageElementsData: bricksData
      @underEachArrayItem(
        affectDirectivesUnderPos: [1, 2, 3]
        passValueOnwardsAs: "bricksElement"
      )
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $bricksElement,
            by: { path: "settings._background.image.id" }
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "bricksElementBackgroundImageID"
        )
        # External images have no ID
        @applyField(
          name: "_notNull"
          arguments: {
            value: $bricksElementBackgroundImageID
          }
          passOnwardsAs: "hasBricksAnyElementBackgroundImageID"
        )
        @if(
          condition: $hasBricksAnyElementBackgroundImageID
          affectDirectivesUnderPos: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $bricksElement,
              by: { key: "id" }
            }
            passOnwardsAs: "elementID"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $bricksElement,
              by: { path: "settings._background.image.size" }
            }
            passOnwardsAs: "imageSize"
          )
          @applyField(
            name: "_arraySearch",
            arguments: {
              array: $imageSizeNames
              element: $imageSize
            }
            passOnwardsAs: "imageSizePosition"
          )
          # `$bricksElementBackgroundImageID` it contains the ID of the image from staging, find the ID for production and create a new merge mutation entry
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $imageDataByID,
              by: { key: $bricksElementBackgroundImageID }
            }
            passOnwardsAs: "externalImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $externalImageData,
              by: { key: "slug" }
            }
            passOnwardsAs: "commonSlug"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localMediaItemDataBySlug,
              by: { key: $commonSlug }
            }
            passOnwardsAs: "localImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "id" }
            }
            passOnwardsAs: "localImageID"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "srcs" }
            }
            passOnwardsAs: "localImageSrcs"
          )
          @applyField(
            name: "_arrayItem"
            arguments: {
              array: $localImageSrcs,
              position: $imageSizePosition
            }
            passOnwardsAs: "localImageSrc"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "full" }
            }
            passOnwardsAs: "localImageFull"
          )
          @applyField(
            name: "_echo"
            arguments: {
              value: {
                id: $elementID,
                settings: {
                  _background: {                  
                    image: {
                      id: $localImageID,
                      full: $localImageFull,
                      url: $localImageSrc
                    }
                  }
                }
              }
            }
            passOnwardsAs: "mergeBricksEntry"
          )
          @exportFrom(
            scopedDynamicVariable: $mergeBricksEntry,
            as: "mergeBricksAnyElementBackgroundImageEntries"
          )
 
 
    bricksImageElementsData: bricksData( filterBy: { include: ["image"] } )
      @underEachArrayItem(
        affectDirectivesUnderPos: [1, 2, 3]
        passValueOnwardsAs: "bricksImageElement"
      )
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $bricksImageElement,
            by: { path: "settings.image.id" }
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "bricksImageElementImageID"
        )
        # External images have no ID
        @applyField(
          name: "_notNull"
          arguments: {
            value: $bricksImageElementImageID
          }
          passOnwardsAs: "hasBricksImageElementImageID"
        )
        @if(
          condition: $hasBricksImageElementImageID
          affectDirectivesUnderPos: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $bricksImageElement,
              by: { key: "id" }
            }
            passOnwardsAs: "elementID"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $bricksImageElement,
              by: { path: "settings.image.size" }
            }
            passOnwardsAs: "imageSize"
          )
          @applyField(
            name: "_arraySearch",
            arguments: {
              array: $imageSizeNames
              element: $imageSize
            }
            passOnwardsAs: "imageSizePosition"
          )
          # `$bricksImageElementImageID` it contains the ID of the image from staging, find the ID for production and create a new merge mutation entry
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $imageDataByID,
              by: { key: $bricksImageElementImageID }
            }
            passOnwardsAs: "externalImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $externalImageData,
              by: { key: "slug" }
            }
            passOnwardsAs: "commonSlug"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localMediaItemDataBySlug,
              by: { key: $commonSlug }
            }
            passOnwardsAs: "localImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "id" }
            }
            passOnwardsAs: "localImageID"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "srcs" }
            }
            passOnwardsAs: "localImageSrcs"
          )
          @applyField(
            name: "_arrayItem"
            arguments: {
              array: $localImageSrcs,
              position: $imageSizePosition
            }
            passOnwardsAs: "localImageSrc"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "full" }
            }
            passOnwardsAs: "localImageFull"
          )
          @applyField(
            name: "_echo"
            arguments: {
              value: {
                id: $elementID,
                settings: {
                  image: {
                    id: $localImageID,
                    full: $localImageFull,
                    url: $localImageSrc
                  }
                }
              }
            }
            passOnwardsAs: "mergeBricksEntry"
          )
          @exportFrom(
            scopedDynamicVariable: $mergeBricksEntry,
            as: "mergeBricksImageElementImageEntries"
          )
          
 
    bricksSvgElementsData: bricksData( filterBy: { include: ["svg"] } )
      @underEachArrayItem(
        affectDirectivesUnderPos: [1, 2, 3]
        passValueOnwardsAs: "bricksSvgElement"
      )
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $bricksSvgElement,
            by: { path: "settings.file.id" }
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "bricksSvgElementFileID"
        )
        # Dynamic data SVG elements have no ID
        @applyField(
          name: "_notNull"
          arguments: {
            value: $bricksSvgElementFileID
          }
          passOnwardsAs: "hasBricksSvgElementImageID"
        )
        @if(
          condition: $hasBricksSvgElementImageID
          affectDirectivesUnderPos: [1, 2, 3, 4, 5, 6, 7, 8]
        )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $bricksSvgElement,
              by: { key: "id" }
            }
            passOnwardsAs: "elementID"
          )
          # `$bricksSvgElementFileID` it contains the ID of the image from staging, find the ID for production and create a new merge mutation entry
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $imageDataByID,
              by: { key: $bricksSvgElementFileID }
            }
            passOnwardsAs: "externalImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $externalImageData,
              by: { key: "slug" }
            }
            passOnwardsAs: "commonSlug"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localMediaItemDataBySlug,
              by: { key: $commonSlug }
            }
            passOnwardsAs: "localImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "id" }
            }
            passOnwardsAs: "localImageID"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "src" }
            }
            passOnwardsAs: "localImageSrc"
          )
          @applyField(
            name: "_echo"
            arguments: {
              value: {
                id: $elementID,
                settings: {
                  file: {
                    id: $localImageID,
                    url: $localImageSrc
                  }
                }
              }
            }
            passOnwardsAs: "mergeBricksEntry"
          )
          @exportFrom(
            scopedDynamicVariable: $mergeBricksEntry,
            as: "mergeBricksSvgElementFileEntries"
          )
 
 
    bricksLogoElementsData: bricksData( filterBy: { include: ["logo"] } )
      @underEachArrayItem(
        affectDirectivesUnderPos: [1, 2, 3]
        passValueOnwardsAs: "bricksLogoElement"
      )
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $bricksLogoElement,
            by: { path: "settings.logo.id" }
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "bricksLogoElementLogoID"
        )
        # External images have no ID
        @applyField(
          name: "_notNull"
          arguments: {
            value: $bricksLogoElementLogoID
          }
          passOnwardsAs: "hasBricksLogoElementLogoID"
        )
        @if(
          condition: $hasBricksLogoElementLogoID
          affectDirectivesUnderPos: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $bricksLogoElement,
              by: { key: "id" }
            }
            passOnwardsAs: "elementID"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $bricksLogoElement,
              by: { path: "settings.logo.size" }
            }
            passOnwardsAs: "imageSize"
          )
          @applyField(
            name: "_arraySearch",
            arguments: {
              array: $imageSizeNames
              element: $imageSize
            }
            passOnwardsAs: "imageSizePosition"
          )
          # `$bricksLogoElementLogoID` it contains the ID of the image from staging, find the ID for production and create a new merge mutation entry
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $imageDataByID,
              by: { key: $bricksLogoElementLogoID }
            }
            passOnwardsAs: "externalImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $externalImageData,
              by: { key: "slug" }
            }
            passOnwardsAs: "commonSlug"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localMediaItemDataBySlug,
              by: { key: $commonSlug }
            }
            passOnwardsAs: "localImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "id" }
            }
            passOnwardsAs: "localImageID"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "srcs" }
            }
            passOnwardsAs: "localImageSrcs"
          )
          @applyField(
            name: "_arrayItem"
            arguments: {
              array: $localImageSrcs,
              position: $imageSizePosition
            }
            passOnwardsAs: "localImageSrc"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "full" }
            }
            passOnwardsAs: "localImageFull"
          )
          @applyField(
            name: "_echo"
            arguments: {
              value: {
                id: $elementID,
                settings: {
                  logo: {
                    id: $localImageID,
                    full: $localImageFull,
                    url: $localImageSrc
                  }
                }
              }
            }
            passOnwardsAs: "mergeBricksEntry"
          )
          @exportFrom(
            scopedDynamicVariable: $mergeBricksEntry,
            as: "mergeBricksLogoElementLogoEntries"
          )
 
      @underEachArrayItem(
        affectDirectivesUnderPos: [1, 2, 3]
        passValueOnwardsAs: "bricksLogoElement"
      )
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $bricksLogoElement,
            by: { path: "settings.logoInverse.id" }
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "bricksLogoElementLogoInverseID"
        )
        # External images have no ID
        @applyField(
          name: "_notNull"
          arguments: {
            value: $bricksLogoElementLogoInverseID
          }
          passOnwardsAs: "hasBricksLogoElementLogoInverseID"
        )
        @if(
          condition: $hasBricksLogoElementLogoInverseID
          affectDirectivesUnderPos: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $bricksLogoElement,
              by: { key: "id" }
            }
            passOnwardsAs: "elementID"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $bricksLogoElement,
              by: { path: "settings.logoInverse.size" }
            }
            passOnwardsAs: "imageSize"
          )
          @applyField(
            name: "_arraySearch",
            arguments: {
              array: $imageSizeNames
              element: $imageSize
            }
            passOnwardsAs: "imageSizePosition"
          )
          # `$bricksLogoElementLogoInverseID` it contains the ID of the image from staging, find the ID for production and create a new merge mutation entry
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $imageDataByID,
              by: { key: $bricksLogoElementLogoInverseID }
            }
            passOnwardsAs: "externalImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $externalImageData,
              by: { key: "slug" }
            }
            passOnwardsAs: "commonSlug"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localMediaItemDataBySlug,
              by: { key: $commonSlug }
            }
            passOnwardsAs: "localImageData"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "id" }
            }
            passOnwardsAs: "localImageID"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "srcs" }
            }
            passOnwardsAs: "localImageSrcs"
          )
          @applyField(
            name: "_arrayItem"
            arguments: {
              array: $localImageSrcs,
              position: $imageSizePosition
            }
            passOnwardsAs: "localImageSrc"
          )
          @applyField(
            name: "_objectProperty"
            arguments: {
              object: $localImageData,
              by: { key: "full" }
            }
            passOnwardsAs: "localImageFull"
          )
          @applyField(
            name: "_echo"
            arguments: {
              value: {
                id: $elementID,
                settings: {
                  logoInverse: {
                    id: $localImageID,
                    full: $localImageFull,
                    url: $localImageSrc
                  }
                }
              }
            }
            passOnwardsAs: "mergeBricksEntry"
          )
          @exportFrom(
            scopedDynamicVariable: $mergeBricksEntry,
            as: "mergeBricksLogoElementLogoInverseEntries"
          )
 
 
    bricksImageGalleryElementsData: bricksData( filterBy: { include: ["image-gallery"] } )
      @underEachArrayItem(
        affectDirectivesUnderPos: [1, 2, 3, 4, 5, 6, 7, 8]
        passValueOnwardsAs: "bricksImageGalleryElement"
      )
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $bricksImageGalleryElement,
            by: { key: "id" }
          }
          passOnwardsAs: "elementID"
        )       
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $bricksImageGalleryElement,
            by: { path: "settings.items.size" }
          }
          passOnwardsAs: "imageSize"
        )  
        @applyField(
          name: "_arraySearch",
          arguments: {
            array: $imageSizeNames
            element: $imageSize
          }
          passOnwardsAs: "imageSizePosition"
        )
        @applyField(
          name: "_objectProperty"
          arguments: {
            object: $bricksImageGalleryElement,
            by: { path: "settings.items.images" }
            failIfNonExistingKeyOrPath: false
            valueWhenNonExistingKeyOrPath: []
          }
          passOnwardsAs: "list"
        )  
        @applyField(
          name: "_arrayLength",
          arguments: {
            array: $list,
          }
          passOnwardsAs: "arrayLength"
        )
        @applyField(
          name: "_echo",
          arguments: {
            value: {
              id: $elementID,
              length: $arrayLength,
            }
          }
          passOnwardsAs: "elementProps"
        )
        @exportFrom(
          scopedDynamicVariable: $elementProps
          as: "computeBricksImageGalleryElementListElementProps"
        )
        @underJSONObjectProperty(
          by: { path: "settings.items.images" }
          failIfNonExistingKeyOrPath: false
        )
          @underEachArrayItem(
            affectDirectivesUnderPos: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
            passValueOnwardsAs: "bricksImageGalleryElementListImage"
          )
            @exportFrom(
              scopedDynamicVariable: $elementID,
              as: "computeBricksImageGalleryElementListIDs"
            )
            @applyField(
              name: "_objectProperty"
              arguments: {
                object: $bricksImageGalleryElementListImage,
                by: { key: "id" }
                failIfNonExistingKeyOrPath: false
              }
              passOnwardsAs: "bricksImageGalleryElementListImageID"
            )   
            # `$bricksImageGalleryElementListImageID` it contains the ID of the image from staging, find the ID for production and create a new merge mutation entry
            @applyField(
              name: "_objectProperty"
              arguments: {
                object: $imageDataByID,
                by: { key: $bricksImageGalleryElementListImageID }
              }
              passOnwardsAs: "externalImageData"
            )
            @applyField(
              name: "_objectProperty"
              arguments: {
                object: $externalImageData,
                by: { key: "slug" }
              }
              passOnwardsAs: "commonSlug"
            )
            @applyField(
              name: "_objectProperty"
              arguments: {
                object: $localMediaItemDataBySlug,
                by: { key: $commonSlug }
              }
              passOnwardsAs: "localImageData"
            )
            @applyField(
              name: "_objectProperty"
              arguments: {
                object: $localImageData,
                by: { key: "id" }
              }
              passOnwardsAs: "localImageID"
            )
            @applyField(
              name: "_objectProperty"
              arguments: {
                object: $localImageData,
                by: { key: "srcs" }
              }
              passOnwardsAs: "localImageSrcs"
            )
            @applyField(
              name: "_arrayItem"
              arguments: {
                array: $localImageSrcs,
                position: $imageSizePosition
              }
              passOnwardsAs: "localImageSrc"
            )
            @applyField(
              name: "_objectProperty"
              arguments: {
                object: $localImageData,
                by: { key: "full" }
              }
              passOnwardsAs: "localImageFull"
            )
            @applyField(
              name: "_echo"
              arguments: {
                value: {
                  id: $localImageID,
                  full: $localImageFull,
                  url: $localImageSrc
                }
              }
              passOnwardsAs: "entry"
            )
            @exportFrom(
              scopedDynamicVariable: $entry,
              as: "computeBricksImageGalleryElementListImageEntries"
            )
  }
}
 
query PrepareBricksImageData
  @depends(on: "ExportBricksImageData")
{   
  mergeBricksImageGalleryElementImageEntries: _echo(value: $computeBricksImageGalleryElementListElementProps)
    @underEachArrayItem(
      passValueOnwardsAs: "elementProps"
      affectDirectivesUnderPos: [1, 2, 3, 4, 6]
    )
      @applyField(
        name: "_objectProperty",
        arguments: {
          object: $elementProps
          by: { key: "id" }
        }
        passOnwardsAs: "elementID"
      )  
      @applyField(
        name: "_arraySearch",
        arguments: {
          array: $computeBricksImageGalleryElementListIDs
          element: $elementID
        }
        passOnwardsAs: "offset"
      )  
      @applyField(
        name: "_notNull",
        arguments: {
          value: $offset
        }
        passOnwardsAs: "hasItems"
      )  
      @unless(condition: $hasItems)
        @setNull
      @if(
        condition: $hasItems
        affectDirectivesUnderPos: [1, 2, 3]
      )
        @applyField(
          name: "_objectProperty",
          arguments: {
            object: $elementProps
            by: { key: "length" }
          }
          passOnwardsAs: "length"
        )
        @applyField(
          name: "_arraySlice",
          arguments: {
            array: $computeBricksImageGalleryElementListImageEntries
            length: $length,
            offset: $offset
          }
          passOnwardsAs: "items"
        )
        @applyField(
          name: "_echo",
          arguments: {
            value: {
              id: $elementID,
              settings: {
                items: {
                  images: $items
                }
              }
            }
          },
          setResultInResponse: true
        )
    @arrayFilter
    @export(as: "mergeBricksImageGalleryElementImageEntries")
}
 
query CreateBricksImageDataMergeInputs
  @depends(on: "PrepareBricksImageData")
{
  mergeBricksEntries: _arrayMerge(
    arrays: [
      $mergeBricksAnyElementBackgroundImageEntries,
      $mergeBricksImageElementImageEntries,
      $mergeBricksSvgElementFileEntries,
      $mergeBricksLogoElementLogoEntries,
      $mergeBricksLogoElementLogoInverseEntries,
      $mergeBricksImageGalleryElementImageEntries
    ]
  )
  bricksMergeCustomPostElementDataItemInputs: _echo(value: {
    customPostID: $postId,
    elements: $__mergeBricksEntries
  })
    @export(
      as: "bricksMergeCustomPostElementDataItemInputs",
      type: LIST
    )
}
 
mutation MergeBricksImageData
  @depends(on: "CreateBricksImageDataMergeInputs")
{
  bricksMergeCustomPostElementDataItems(inputs: $bricksMergeCustomPostElementDataItemInputs) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
          @passOnwards(as: "message")
          @fail(
            message: $message
            condition: ALWAYS
          )
      }
    }
    customPost {
      __typename
      ...on CustomPost {
        id
        bricksData
      }
    }
  }
}
    """,
      variables: [
        {
          name: "updateMediaItems",
          value: $updateMediaItems
        },
        {
          name: "postType",
          value: $postType
        },
        {
          name: "postSlug",
          value: $postSlug
        },
        {
          name: "postTitle",
          value: $postTitle
        },
        {
          name: "postContent",
          value: $postContent
        },
        {
          name: "postExcerpt",
          value: $postExcerpt
        },
        {
          name: "postStatus",
          value: $postStatus
        },
        {
          name: "featuredImageID",
          value: $featuredImageID
        },
        {
          name: "postDate",
          value: $postDate
        },
        {
          name: "postGmtDate",
          value: $postGmtDate
        },
        {
          name: "postMeta",
          value: $postMeta
        },
        {
          name: "imageData",
          value: $imageData
        },
      ],
      options: {
        headers: [
          {
            name: "Authorization",
            value: $__loginCredentialsHeaderValue
          }
        ]
      }
    }
  )
}

As variáveis teriam esta aparência:

{
  "postSlug": "my-bricks-page",
  "prodSiteGraphQLEndpointURL": "https://production-site.com/graphql",
  "username": "admin",
  "appPassword": "your-app-password"
}

Assine nossa newsletter

Fique por dentro de todas as atualizações do Gato GraphQL.