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

เราสามารถใช้ 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 ของชนิดต่อไปนี้:
imageimage-gallerylogosvg
สำหรับแต่ละรูปภาพ 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 productionupdateMediaItems: จะอัปเดตมีเดียไอเท็มที่มีอยู่แล้วในไซต์ production หรือไม่ ค่าเริ่มต้นคือtrueusername: ชื่อผู้ใช้สำหรับการยืนยันตัวตนบนไซต์ productionappPassword: รหัสผ่านแอปพลิเคชันสำหรับการยืนยันตัวตนบนไซต์ 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"
}