เดโม Gato GraphQL + Bricks Builder

ซิงค์หน้า Bricks จาก staging ไปยัง production (รวมถึงรูปภาพด้วย!)

ดึงหน้าหรือเทมเพลต Bricks จากไซต์ WordPress staging แล้วจำลองไว้ในไซต์ WordPress production พร้อมซิงค์รูปภาพไปด้วย

Leonardo Losoviz
Leonardo Losoviz -
Logo
Image
Target Image

เราสามารถใช้ Gato GraphQL ร่วมกับ Bricks extension เพื่อส่งออกหน้าหรือเทมเพลต Bricks จากไซต์ WordPress staging แล้วจำลองไว้ในไซต์ WordPress production พร้อมซิงค์รูปภาพไปด้วย

ปลั๊กอิน Gato GraphQL + Power Extensions + Bricks extension ต้องถูกติดตั้งไว้ทั้งบนเว็บไซต์ staging และ production

ตัวระบุร่วมระหว่างไซต์ staging และ production คือ slug หากไม่พบ slug ในไซต์ production query จะสร้างหน้า Bricks ใหม่ หากพบ slug query จะอัปเดตหน้า Bricks ที่มีอยู่

query จะนำเข้ามีเดียไอเท็มที่ขาดหายไปทั้งหมดที่รวมอยู่ในหน้า Bricks ในไซต์ staging:

  • รูปภาพเด่นของหน้า
  • รูปพื้นหลังจากทุก Bricks element
  • รูปภาพจากทุก Bricks element ของชนิดต่อไปนี้:
    • image
    • image-gallery
    • logo
    • svg

สำหรับแต่ละรูปภาพ query จะตรวจสอบว่ามีรูปภาพที่มี slug เดียวกันในไซต์ production หรือไม่ (slug คือตัวระบุร่วมสำหรับมีเดียไอเท็มข้ามไซต์) หากมี ก็จะใช้ ID ของรูปภาพจากไซต์ production มิฉะนั้นก็จะนำเข้ารูปภาพไปยังไซต์ production แล้วกำหนด ID นั้นให้กับ Bricks element

ไซต์ staging ต้องเข้าถึงได้จากไซต์ production เพื่อดึงรูปภาพผ่าน URL ของรูปภาพเหล่านั้น หากโดเมน staging ถูกพิจารณาว่าไม่ปลอดภัย (เช่น โดเมน .local) ไซต์ production จำเป็นต้องอนุญาต URL ที่ไม่ปลอดภัย

ทั้งสองไซต์ต้องอนุญาตการเข้าถึง custom post type ที่เกี่ยวข้อง (bricks_template, page, หรือชนิดอื่น ๆ)

เราต้องระบุตัวแปรต่อไปนี้:

  • postSlug: slug ของหน้าหรือเทมเพลต Bricks (หรือ custom post type อื่น ๆ) ที่จะถ่ายโอน
  • prodSiteGraphQLEndpointURL: URL ของ GraphQL endpoint ของไซต์ WordPress production
  • updateMediaItems: จะอัปเดตมีเดียไอเท็มที่มีอยู่แล้วในไซต์ production หรือไม่ ค่าเริ่มต้นคือ true
  • username: ชื่อผู้ใช้สำหรับการยืนยันตัวตนบนไซต์ production
  • appPassword: รหัสผ่านแอปพลิเคชันสำหรับการยืนยันตัวตนบนไซต์ production

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

ตัวแปรจะมีลักษณะดังนี้:

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

สมัครรับจดหมายข่าวของเรา

ติดตามการอัปเดตทั้งหมดของ Gato GraphQL