A quick introduction to quilt overrides in Aurora using GraphQL
To create or update one or more Quilt overrides using GraphQL, you need to make a GraphQL call to execute the publishPageEditChanges mutation. This mutation will create all the files needed to render your Quilt overrides and check them into the Git repository.
Below is an example GraphQL request that includes the Query and Variables necessary to make the call:
Example GraphQL
fragment Error on Error {
message
fields
}
fragment QuiltError on QuiltError {
...Error
quiltId
}
fragment CoreNodeError on CoreNodeError {
...Error
nodeId
}
fragment CreateOrUpdateQuiltError on CreateOrUpdateQuiltError {
__typename
... on CreateOrUpdateQuiltFailedError {
...QuiltError
}
... on QuiltNotFoundError {
...QuiltError
}
... on InvalidCustomQuiltIdError {
...QuiltError
}
... on InvalidDefaultQuiltIdError {
...QuiltError
}
... on CoreNodeNotFoundError {
...CoreNodeError
}
}
fragment QuiltSection on QuiltSection {
id
layout
bgColor
showTitle
showDescription
textPosition
textColor
sectionEditLevel
bgImage {
assetName
backgroundSize
backgroundRepeat
backgroundPosition
lastModified
}
disableSpacing
edgeToEdgeDisplay
fullHeight
showBorder
}
fragment Component on QuiltComponent {
id
className
props
}
fragment OneColumnQuiltSection on OneColumnQuiltSection {
...QuiltSection
columnMap {
main {
...Component
}
}
}
fragment TwoColumnQuiltSection on TwoColumnQuiltSection {
...QuiltSection
columnMap {
column1 {
...Component
}
column2 {
...Component
}
}
}
fragment ThreeColumnQuiltSection on ThreeColumnQuiltSection {
...QuiltSection
columnMap {
column1 {
...Component
}
column2 {
...Component
}
column3 {
...Component
}
}
}
fragment MainSideQuiltSection on MainSideQuiltSection {
...QuiltSection
columnMap {
main {
...Component
}
side {
...Component
}
}
}
fragment SideMainQuiltSection on SideMainQuiltSection {
...QuiltSection
columnMap {
main {
...Component
}
side {
...Component
}
}
}
fragment QuiltHeader on QuiltHeader {
id
type
className
props
}
fragment QuiltFooter on QuiltFooter {
id
type
className
props
}
fragment QuiltList on QuiltList {
id
type
wrapper {
element
className
}
items {
...OneColumnQuiltSection
...TwoColumnQuiltSection
...ThreeColumnQuiltSection
...MainSideQuiltSection
...SideMainQuiltSection
}
}
fragment BackgroundImageProps on BackgroundImageProps {
assetName
backgroundSize
backgroundRepeat
backgroundPosition
lastModified
}
fragment QuiltContainerSectionProps on QuiltContainerSectionProps {
backgroundImageProps {
...BackgroundImageProps
}
backgroundColor
addComponents
removeComponents
componentOrder
}
fragment QuiltContainer on QuiltContainer {
id
headerProps {
...QuiltContainerSectionProps
}
headerComponentProps
footerProps {
...QuiltContainerSectionProps
}
footerComponentProps
items {
...QuiltSection
}
}
fragment QuiltResource on QuiltResource {
lastUpdatedTime
quilt {
id
items {
...QuiltHeader
...QuiltList
...QuiltFooter
}
container {
...QuiltContainer
}
}
}
mutation PublishPageEditChanges(
$bulkQuiltInput: [QuiltContainerOverrideInput!]
) {
publishPageEditChanges(
bulkQuiltInput: $bulkQuiltInput
) {
result {
... QuiltResource
}
errors {
...CreateOrUpdateQuiltError
}
}
}
Example Variables
{
"bulkQuiltInput": [
{
"defaultQuiltId": "CommunityPage",
"quiltInput": {
"id": "CommunityPage",
"container": {
"id": "Common",
"headerProps" : {
"backgroundImageProps" : null,
"backgroundColor" : "transparent",
"addComponents" : null,
"removeComponents" : [ "community.widget.breadcrumbWidget" ],
"componentOrder" : null
},
"headerComponentProps" : {
"community.widget.bannerWidget" : {
"nodeHeaderVariantProps" : {
"type" : "lg",
"alignment" : "center",
"contentWidth" : "medium",
"useSearch" : true,
"isSearchGlobal" : true
},
"backgroundColor" : "var(--lia-bs-primary)",
"backgroundImageProps" : {
"assetName" : "community-widget-bannerWidget.jpg",
"lastModified" : "1694717972000",
"backgroundSize" : "COVER",
"backgroundPosition" : "CENTER_CENTER",
"backgroundRepeat" : "NO_REPEAT"
},
"backgroundOpacity" : 100,
"fontColor" : "var(--lia-bs-body-color)",
"showNodeHeaderTitleAndDescription" : "both",
"useNodeHeaderCountStats" : false,
"visualEffects" : {
"showBottomBorder" : true
},
"nodeHeaderPadding" : {
"paddingTop" : 50,
"paddingBottom" : 50
}
}
},
"footerProps" : null,
"footerComponentProps" : null,
"items": [
{
"oneColumn": {
"id": "node-navigation",
"layout": "ONE_COLUMN",
"columnMap": {
"main": [
{
"id": "places.widget.placesWidget"
}
]
}
}
},
{
"oneColumn": {
"id": "home-widgets-section-1",
"layout": "ONE_COLUMN",
"columnMap": {
"main": [
{
"id": "messages.widget.messageListForNodeByTopContentWidget",
"props": {
"hideIfEmpty": true,
"conversationStyle": "BLOG",
"listVariant": {
"type": "grid",
"props": {
"itemSpacing": "lg"
}
},
"useTitle": false,
"showTabs": false,
"pageSize": 5,
"pagerVariant": {
"type": "none"
},
"style": "card",
"viewVariant": {
"type": "card",
"props": {
"useRepliesCount": true,
"useAuthorRank": false,
"useNode": false,
"truncateBodyLength": -1,
"useNodeLink": true,
"timeStampType": "postTime",
"useTextBody": true,
"useSolvedBadge": false,
"useImages": true,
"portraitClampBodyLines": 2,
"useCenteredContent": false,
"useTimeToRead": true,
"useSpoilerFreeBody": false,
"useKudosCount": true,
"usePreviewImage": true,
"useViewCount": true,
"landscapeClampBodyLines": 2,
"useBody": true,
"useTags": true,
"clampSubjectLines": 2,
"useBoardIcon": false,
"clampBodyLines": 2,
"useAuthorLogin": true,
"useNodeHoverCard": true,
"useClickableCard": true,
"useSearchSnippet": false
}
},
"panelType": "spaced",
"sorts": {
"kudosSumWeight": {
"direction": "DESC"
}
}
}
}
]
}
}
},
{
"mainSide": {
"id": "home-widgets-section-2",
"layout": "MAIN_SIDE",
"columnMap": {
"main": [
{
"id": "messages.widget.messageListForNodeByRecentActivityWidget",
"props": {
"viewVariant": {
"type": "inline",
"props": {
"useUnreadCount": true,
"useViewCount": true,
"renderPostTimeBeforeAuthor": false,
"useSearchSnippet": false,
"useAuthorLogin": true,
"clampBodyLines": 2,
"useAvatar": true,
"useBoardIcon": false,
"useAuthorRank": true,
"useKudosCount": true,
"useImages": true,
"usePreviewImage": true,
"useTags": true,
"useNode": false,
"useNodeLink": false,
"useTextBody": true,
"truncateBodyLength": -1,
"useBody": true,
"useRepliesCount": true,
"useSolvedBadge": true,
"useTimeToRead": true,
"timeStampType": "postTime",
"clampSubjectLines": 2,
"useSpoilerFreeBody": true
}
},
"panelType": "divider",
"pageSize": 10,
"useTitle": true,
"hideIfEmpty": false,
"pagerVariant": {
"type": "loadMore"
},
"style": "list",
"showTabs": true,
"tabItemMap": {
"default": {
"mostRecent": true,
"mostRecentUserContent": true,
"newest": false
},
"additional": {
"mostViewed": true,
"mostReplies": false,
"mostKudoed": true,
"noReplies": false,
"noSolutions": false,
"solutions": false
}
}
}
}
],
"side": [
{
"id": "users.widget.userListForNodeByTopContributorsWidget",
"props": {
"viewVariant": {
"type": "inline",
"props": {
"useAvatar": true,
"useRank": true,
"useKudosCount": true,
"avatarSize": "40",
"useFooterDivider": false,
"useSolutionCount": false,
"useTopicsCount": false,
"useMessagesCount": false
}
},
"panelType": "standard",
"sorts": {
"kudosReceivedCount": {
"direction": "DESC"
}
},
"pageSize": 5,
"hideIfEmpty": true,
"useTitle": true
}
},
{
"id": "users.widget.userOnlineListForCommunityWidget"
}
]
}
}
},
{
"oneColumn": {
"id": "home-widgets-section-3",
"layout": "ONE_COLUMN",
"columnMap": {
"main": [
{
"id": "messages.widget.messageListForNodeByRecentActivityWidget",
"props": {
"hideIfEmpty": true,
"conversationStyle": "BLOG",
"listVariant": {
"type": "grid",
"props": {
"itemSpacing": "lg"
}
},
"useTitle": true,
"showTabs": false,
"pageSize": 5,
"pagerVariant": {
"type": "none"
},
"style": "card",
"viewVariant": {
"type": "card",
"props": {
"useRepliesCount": false,
"useAuthorRank": false,
"useNode": true,
"truncateBodyLength": -1,
"useNodeLink": true,
"timeStampType": "conversation.lastPostingActivityTime",
"useTextBody": true,
"useSolvedBadge": true,
"useImages": true,
"portraitClampBodyLines": 5,
"useCenteredContent": false,
"useTimeToRead": true,
"useSpoilerFreeBody": true,
"useKudosCount": true,
"usePreviewImage": true,
"useViewCount": false,
"landscapeClampBodyLines": 5,
"useBody": true,
"useTags": true,
"clampSubjectLines": 2,
"useBoardIcon": false,
"clampBodyLines": 3,
"useAuthorLogin": true,
"useNodeHoverCard": true,
"useClickableCard": true,
"useSearchSnippet": false
}
},
"panelType": "spaced",
"sorts": {
"conversationLastPostingActivityTime": {
"direction": "DESC"
}
}
}
}
]
}
}
}
]
ATLAS
Comments