Working with Bricks and Gato GraphQL (WordPress)

5 hours ago 2

We can edit the Bricks data from a post and update it as needed, by querying, iterating, transforming and storing the Bricks JSON meta for that post.

Working with Bricks. Watch on YouTube

Query Bricks data

Query field bricksData, which returns the JSON of all the elements in the Bricks post.

query GetBricksData($customPostId: ID!) { customPost(by: { id: $customPostId }, status: any) { ...on BricksMaybeEnabledForCustomPostType { bricksData } } }

The response will look like this:

{ "data": { "post": { "bricksData": [ { "id": "oleqdy", "name": "section", "parent": 0, "children": [ "uuiyqj" ], "settings": [] }, { "id": "uuiyqj", "name": "container", "parent": "oleqdy", "children": [ "ejfwpo", "czivwt", "ucuzdk", "wzcyug", "ipoorm", "zvgqxx", "yrambp", "hywkos", "gdoiqo", "tyksto", "nquple", "typize", "fjiwqp" ], "settings": [] }, { "id": "ejfwpo", "name": "post-title", "parent": "uuiyqj", "children": [], "settings": { "tag": "h1" } }, { "id": "czivwt", "name": "post-excerpt", "parent": "uuiyqj", "children": [], "settings": [] }, { "id": "hywkos", "name": "post-comments", "parent": "uuiyqj", "children": [], "settings": { "title": true, "avatar": true, "formTitle": true, "label": true, "submitButtonStyle": "primary" } }, { "id": "yrambp", "name": "post-author", "parent": "uuiyqj", "children": [], "settings": { "avatar": true, "name": true, "website": true, "bio": true, "postsLink": true, "postsStyle": "primary" } }, { "id": "zvgqxx", "name": "related-posts", "parent": "uuiyqj", "children": [], "settings": { "taxonomies": [ "category", "post_tag" ], "content": [ { "dynamicData": "{post_title:link}", "tag": "h3", "dynamicMargin": { "top": 10 }, "id": "a667d0" }, { "dynamicData": "{post_date}", "id": "5bb1b2" }, { "dynamicData": "{post_excerpt:20}", "dynamicMargin": { "top": 10 }, "id": "80e288" } ] } } ] } } }

We can also filter elements by name via param filterBy (which accepts include and exclude).

Running this query:

query GetBricksData($customPostId: ID!) { customPost(by: { id: $customPostId }, status: any) { ...on BricksMaybeEnabledForCustomPostType { bricksData(filterBy: { include: [ "post-comments", "post-author" ] }) } } }

...will produce this response:

{ "data": { "post": { "bricksData": [ { "id": "hywkos", "name": "post-comments", "parent": "uuiyqj", "children": [], "settings": { "title": true, "avatar": true, "formTitle": true, "label": true, "submitButtonStyle": "primary" } }, { "id": "yrambp", "name": "post-author", "parent": "uuiyqj", "children": [], "settings": { "avatar": true, "name": true, "website": true, "bio": true, "postsLink": true, "postsStyle": "primary" } } ] } } }

You can replace any Bricks global component with the corresponding Bricks elements, by passing param replaceComponents: true:

{ post(by: { id: 1 }) { bricksData(replaceComponents: true) } }

To query the Bricks components, use field bricksComponents, which returns the JSON of all the components (as stored under the bricks_components option in the DB).

{ bricksComponents }

The response will look like this:

{ "data": { "bricksComponents": [ { "id": "flgizw", "category": "", "desc": "", "elements": [ { "id": "flgizw", "name": "container", "settings": { "_padding": { "right": 50 }, "_padding:mobile_landscape": { "right": "0" }, "_alignItems:mobile_portrait": "center", "_width:tablet_portrait": "100%", "_padding:tablet_portrait": { "right": "0" }, "_margin:tablet_portrait": { "bottom": "60" }, "_margin:mobile_portrait": { "bottom": "30" } }, "children": [ "9029cb", "9a5e42" ], "parent": 0, "label": "Text Component" }, { "id": "9029cb", "name": "heading", "settings": { "text": "Exceptional Furniture for Every Residence", "tag": "h2", "_typography:mobile_portrait": { "text-align": "center" } }, "children": [], "parent": "flgizw" }, { "id": "9a5e42", "name": "text", "settings": { "text": "Explore our vast selection of high-quality furniture crafted to elevate the ambiance of every room in your residence. From cozy sofas and sophisticated dining tables to practical storage options, our offerings blend style, durability, and value. Each piece is thoughtfully chosen to uphold the highest quality standards while accommodating diverse budgets and design tastes.", "_margin": { "top": "25" }, "_typography:mobile_portrait": { "text-align": "center" } }, "children": [], "parent": "flgizw" } ], "properties": [], "_created": 1750821473, "_user_id": 1, "_version": "2.0-beta" } ] } }

You can also filter Bricks components by their IDs: bricksComponents(filter: {ids: ["flgizw"]}).

Modify and Store Bricks data

Iterate the elements in the JSON produced by bricksData, modify them as needed, and store the modified JSON back into post meta, via any of these mutations:

bricksSetCustomPostElementData
bricksMergeCustomPostElementDataItem

Using bricksSetCustomPostElementData

After modifying the elements, export the whole modified JSON under a dynamic variable (to inject into the mutation).

For instance, this query will transform all the heading elements in the JSON to uppercase, and export the modified JSON (under dynamic variable $modifiedBricksData):

query GetAndModifyBricksData($customPostId: ID!) { customPost(by: { id: $customPostId }, status: any) { ...on BricksMaybeEnabledForCustomPostType { bricksData @underEachArrayItem( passValueOnwardsAs: "elementJSON" affectDirectivesUnderPos: [1, 2, 3] ) @applyField( name: "_objectProperty", arguments: { object: $elementJSON, by: { key: "name" } failIfNonExistingKeyOrPath: false, }, passOnwardsAs: "elementName" ) @applyField( name: "_equals", arguments: { value1: $elementName, value2: "heading" }, passOnwardsAs: "isMatch" ) @if(condition: $isMatch) @underJSONObjectProperty( by: { path: "settings.text" } failIfNonExistingKeyOrPath: false ) @strUpperCase @export(as: "modifiedBricksData") } } }

Notice that the JSON will contain all the elements, including the ones that were not modified.

Then, use the bricksSetCustomPostElementData mutation to store the modified JSON back into post meta:

mutation StoreBricksData($customPostId: ID!) @depends(on: "GetAndModifyBricksData") { bricksSetCustomPostElementData(input: { customPostID: $customPostId data: $modifiedBricksData }) { status errors { __typename ...on ErrorPayload { message } } customPost { __typename ...on CustomPost { id bricksData } } } }

Using bricksMergeCustomPostElementDataItem

Alternatively, you can export only the modified elements.

In this query, we filter the elements by name, and export the modified headings (under dynamic variable $modifiedBricksHeadings) and also their IDs (under dynamic variable $modifiedBricksHeadingIDs):

query GetAndModifyBricksData($customPostId: ID!) { customPost(by: { id: $customPostId }, status: any) { ...on BricksMaybeEnabledForCustomPostType { bricksData(filterBy: {include: ["heading"]}) @underEachArrayItem(affectDirectivesUnderPos: [1, 3]) @underJSONObjectProperty(by: { key: "id" }) @export(as: "modifiedBricksHeadingIDs") @underJSONObjectProperty( by: { path: "settings.text" } failIfNonExistingKeyOrPath: false affectDirectivesUnderPos: [1, 2] ) @strUpperCase @export(as: "modifiedBricksHeadings") } } }

Then, use the bricksMergeCustomPostElementDataItem mutation to merge those entries into the post meta JSON.

To do that, you must first generate the input to inject into the mutation, as an array with the ID and settings of each modified element:

query GenerateBricksMergeDataItemInputs @depends(on: "GetAndModifyBricksData") { bricksMergeDataItemInputs: _echo(value: $modifiedBricksHeadingIDs) @underEachArrayItem( passIndexOnwardsAs: "index", passValueOnwardsAs: "id" affectDirectivesUnderPos: [1, 2] ) @applyField( name: "_arrayItem", arguments: { array: $modifiedBricksHeadings, position: $index }, passOnwardsAs: "heading" ) @applyField( name: "_echo", arguments: { value: { id: $id, settings: { text: $heading } } } setResultInResponse: true ) @export(as: "bricksMergeDataItemInputs") } mutation StoreBricksData($customPostId: ID!) @depends(on: "GenerateBricksMergeDataItemInputs") { bricksMergeCustomPostElementDataItem(input: { customPostID: $customPostId elements: $bricksMergeDataItemInputs }) { status errors { __typename ...on ErrorPayload { message } } customPost { __typename ...on CustomPost { id bricksData } } } }

Read Entire Article