Create Elementor page from template | Gato GraphQL for WordPress

This query is demonstrated in the Creating an Elementor page dynamically by injecting data into a template demo.

This query creates a new Elementor page from a template, injecting data from any source.

It performs the following operations:

Initializes dynamic variables
Gets the page template and exports its data
Creates a new page from the template
Replaces Elementor data in the page with the provided data
Updates the Elementor page with the new data

This query requires the Elementor extension to be enabled.

The required variables are:

templatePageId: The ID of the Elementor template page
pageTitle: The title for the new page
imageUrl: The URL of the image to use in the call-to-action widget
heading: The heading text to use in the heading widget
description: The description text to use in the text editor widget
items: An array of strings to use in the icon list widget

query InitializeDynamicVariables
  @configureWarningsOnExportingDuplicateVariable(enabled: false)
{
  authorID: _echo(value: null)
    @export(as: "authorID")
    @remove
 
  featuredImageID: _echo(value: null)
    @export(as: "featuredImageID")
    @remove
 
  meta: _echo(value: {})
    @export(as: "meta")
    @remove
}
 
query GetPageTemplateAndExportData($templatePageId: ID!)
  @depends(on: "InitializeDynamicVariables")
{
  exportPage: page(by: { id: $templatePageId }, status: any) {
    # Fields not to be duplicated
    id
    slug
    date
    status
 
    # Fields to be duplicated
    author {
      id @export(as: "authorID")
    }
    rawContent @export(as: "rawContent")
    rawExcerpt @export(as: "excerpt")
    featuredImage {
      id @export(as: "featuredImageID")
    }
 
    metaKeys(filter: { exclude: [
      "_thumbnail_id",
      "_edit_last",
      "_elementor_page_assets",
      "_elementor_controls_usage",
      "_elementor_css",
      "_elementor_screenshot",
    ] })
    meta(keys: $__metaKeys) 
      @export(as: "meta")
  }
}
 
mutation CreatePageFromTemplate(
  $pageTitle: String!
)
  @depends(on: "GetPageTemplateAndExportData")
{
  createPage(input: {
    status: draft,
    authorBy: {
      id: $authorID
    },
    contentAs: {
      html: $rawContent
    },
    excerpt: $excerpt
    featuredImageBy: {
      id: $featuredImageID
    },
    title: $pageTitle,
    meta: $meta
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    page {
      # Fields not to be duplicated
      id
      slug
      date
      status
 
      # Fields to be duplicated
      author {
        id
      }
      rawContent
      excerpt
      featuredImage {
        id
      }
      title
      
      metaKeys
      meta(keys: $__metaKeys)
    }
    pageID @export(as: "newPageId")
  }
}
 
query ReplaceElementorDataInPage(
  $imageUrl: String!
  $heading: String!
  $description: String!
  $items: [String!]!
)
  @depends(on: "CreatePageFromTemplate")
{
  page(by: { id: $newPageId }, status: any) {
    title
    elementorFlattenedDataItems
      @underEachArrayItem(
        passValueOnwardsAs: "element"
        affectDirectivesUnderPos: [1, 2, 3]
    	)
        @applyField(
          name: "_objectProperty",
          arguments: {
            by: {
              key: "widgetType"
            },
            object: $element
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "widgetType"
        )
        @applyField(
          name: "_equals",
          arguments: {
            value1: $widgetType
            value2: "call-to-action"
          }
          passOnwardsAs: "isWidget"
        )
        @if(condition: $isWidget)
          @underJSONObjectProperty(
            by: {
              path: "settings.bg_image.url"
            }
          )
            @applyField(
              name: "_echo",
              arguments: {
                value: $imageUrl
              }
              setResultInResponse: true
            )
    
      @underEachArrayItem(
        passValueOnwardsAs: "element"
        affectDirectivesUnderPos: [1, 2, 3]
    	)
        @applyField(
          name: "_objectProperty",
          arguments: {
            by: {
              key: "widgetType"
            },
            object: $element
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "widgetType"
        )
        @applyField(
          name: "_equals",
          arguments: {
            value1: $widgetType
            value2: "heading"
          }
          passOnwardsAs: "isWidget"
        )
        @if(condition: $isWidget)
          @underJSONObjectProperty(
            by: {
              path: "settings.title"
            }
          )
            @applyField(
              name: "_echo",
              arguments: {
                value: $heading
              }
              setResultInResponse: true
            )
    
      @underEachArrayItem(
        passValueOnwardsAs: "element"
        affectDirectivesUnderPos: [1, 2, 3]
    	)
        @applyField(
          name: "_objectProperty",
          arguments: {
            by: {
              key: "widgetType"
            },
            object: $element
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "widgetType"
        )
        @applyField(
          name: "_equals",
          arguments: {
            value1: $widgetType
            value2: "text-editor"
          }
          passOnwardsAs: "isWidget"
        )
        @if(condition: $isWidget)
          @underJSONObjectProperty(
            by: {
              path: "settings.editor"
            }
          )
            @strReplace(
              search: "{description}",
              replaceWith: $description
            )
    
      @underEachArrayItem(
        passValueOnwardsAs: "element"
        affectDirectivesUnderPos: [1, 2, 3]
    	)
        @applyField(
          name: "_objectProperty",
          arguments: {
            by: {
              key: "widgetType"
            },
            object: $element
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "widgetType"
        )
        @applyField(
          name: "_equals",
          arguments: {
            value1: $widgetType
            value2: "icon-list"
          }
          passOnwardsAs: "isWidget"
        )
        @if(condition: $isWidget)
          @underJSONObjectProperty(
            by: {
              path: "settings.icon_list"
            }
          )
            @underEachArrayItem
              @underJSONObjectProperty(
                by: {
                  key: "text"
                }
              )
                @strReplaceMultiple(
                  search: ["{item1}", "{item2}", "{item3}", "{item4}", "{item5}", "{item6}"],
                  replaceWith: $items
                )
      @underEachArrayItem
        @objectKeepProperties(keys: ["id", "settings"])
      @export(
        as: "updatedElementorDataItems"
      )
  }
}
 
mutation CreateElementorPageWithData
  @depends(on: "ReplaceElementorDataInPage")
{
  elementorMergeCustomPostElementDataItem(input: {
    elements: $updatedElementorDataItems,
    customPostID: $newPageId
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
  }
}

The variables would look like this:

{
  "templatePageId": 2746,
  "pageTitle": "My awesome services",
  "imageUrl": "https://gatographql.com/assets/GatoGraphQL-logo-suki-rectangular.png",
  "heading": "My great header",
  "description": "Please come visit my website",
  "items": ["Great value", "Amazing features", "Friendly staff", "Open 24/7", "Money-back guarantee", "Premium support"]
}