Demo Gato GraphQL + Bricks Builder

Bricks-pagina synchroniseren van staging naar productie (inclusief afbeeldingen!)

Haal een Bricks-pagina of -template op van een staging WordPress-site en repliceer die op een productie WordPress-site, inclusief het synchroniseren van afbeeldingen

Leonardo Losoviz
Leonardo Losoviz -
Logo
Image
Target Image

We kunnen Gato GraphQL gebruiken met de Bricks-extensie om een Bricks-pagina of -template te exporteren van een staging WordPress-site en die te repliceren op een productie WordPress-site, inclusief het synchroniseren van afbeeldingen.

De Gato GraphQL-plugin + Power Extensions + Bricks-extensie moeten op zowel de staging- als de productiesite zijn geïnstalleerd.

De gemeenschappelijke identifier tussen de staging- en productiesite is de slug. Als de slug niet op de productiesite wordt gevonden, maakt de query een nieuwe Bricks-pagina aan. Als de slug wel wordt gevonden, werkt de query de bestaande Bricks-pagina bij.

De query importeert alle ontbrekende media-items die op de Bricks-pagina van de stagingsite staan:

  • De uitgelichte afbeelding van de pagina
  • Achtergrondafbeeldingen van alle Bricks-elementen
  • Afbeeldingen van alle Bricks-elementen van de volgende typen:
    • image
    • image-gallery
    • logo
    • svg

Voor elke afbeelding controleert de query of er op de productiesite een afbeelding met dezelfde slug bestaat (de slug is de gemeenschappelijke identifier voor media-items tussen sites). Als dat zo is, wordt het ID van de afbeelding van de productiesite gebruikt. Anders importeert de query de afbeelding naar de productiesite en kent dat ID toe aan het Bricks-element.

De stagingsite moet bereikbaar zijn voor de productiesite, zodat afbeeldingen via hun URL's opgehaald kunnen worden. Als het stagingdomein als onveilig wordt beschouwd (bijv. een .local-domein), moet de productiesite onveilige URL's toestaan.

Beide sites moeten toegang tot het betreffende custom post type toestaan (bricks_template, page of een ander type).

We moeten de volgende variabelen opgeven:

  • postSlug: De slug van de Bricks-pagina of -template (of een ander custom post type) die je wilt overzetten
  • prodSiteGraphQLEndpointURL: De GraphQL-endpoint-URL van de productie WordPress-site
  • updateMediaItems: Of reeds bestaande media-items op de productiesite bijgewerkt moeten worden. Standaard is dit true.
  • username: De gebruikersnaam voor authenticatie op de productiesite
  • appPassword: Het applicatiewachtwoord voor authenticatie op de productiesite

Hier is de GraphQL-query:

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
          }
        ]
      }
    }
  )
}

De variabelen zouden er als volgt uitzien:

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

Abonneer je op onze nieuwsbrief

Blijf op de hoogte van alle updates over Gato GraphQL.