Asset information via GraphQL in dynamic blocks

Support
1

I have…

  • Read the following guideline: Troubleshooting and Support | Squidex. I understand that my support request might get deleted if I do not follow the guideline.
  • Used code blocks with ``` to format my code examples like JSON or logs properly.

Current behavior

I want to reduce the number of API calls. Therefore, I am trying to use the GrapQL endpoint to include nececerry asset information. I am using the dynamic block feature in a few schemas. ([IMPLEMENTED] Dynamic block support)

If i call:

query getHomePage {
  queryHomepageContents {
    data {
      title {
        iv
      },
      description {
        iv
      },
      header__Dynamic {
        de
      }
    }
  }
}

I get:

{
  "data": {
    "queryHomepageContents": [
      {
        "data": {
          "title": {
            "iv": "..."
          },
          "description": {
            "iv": "..."
          },
          "header__Dynamic": {
            "de": {
              "schemaId": "a3e6d822-ebb3-4dc5-bd4b-eb65234154f2",
              "CallToActionLabel": "...",
              "CallToActionUrl": "...",
              "Description": "...",
              "Image": [
                "e52274bd-36f3-4cce-a31c-18e19f49fd9c"
              ]
            }
          }
        }
      }
    ]
  }
}

Question

Is there a way to include additional asset information such as description, URL, width, height, etc.?

2

“__dynamic” basically means you get the raw json. But then the output is not in control of graphql anymore and there you cannot get the asset information anymore.

You have to make your query like this:

header {
  de {
       ... on Component {
           schemaId
       }
       ...on SomewithWithAsset {
          Image {
             id,
             fileName
          }
       }
    }
}
3

Hi Sebastian,

Thanks for the quick reply and the great work in general. That points me in the right direction. The dynamic blocks work perfectly with the Blazor UI component model.

Here is my complete solution in case it is of interest to others:

query getHomePage {
  queryHomepageContents {
    flatData {
      title
      description
      sections {
        ... HeaderCallToActionDescriptionImageComponentFragment
        ... SectionDescriptionTitleScreenshotsComponentFragment
        ... SectionBgDescriptionImageTitleComponentFragment
        ... SectionDescCtaPhoneScreenshotsTitleComponentFragment
        ... SectionCtaDescriptionTitleComponentFragment
        ... SectionCtaDescriptionSubtitleTitleComponentFragment
        ... SectionBlocksCtaDescriptionTitleComponentFragment
        ... SectionImageBlocksComponentFragment
      }
    }
  }
}

fragment SectionDescriptionTitleScreenshotsComponentFragment on SectionDescriptionTitleScreenshotsComponent {
  schemaId,
  callToActionLabel,
  callToActionUrl,
  description,
  image1 {
	id,
    metadata,
    slug
  },
  image2 {
	id,
    metadata,
    slug
  },
  title
}

fragment HeaderCallToActionDescriptionImageComponentFragment  on HeaderCallToActionDescriptionImageComponent {
	schemaId,
	callToActionLabel,
	callToActionUrl,
	description,
	image {
	  id,
	  url,
      metadata
	}
}
fragment SectionBgDescriptionImageTitleComponentFragment on SectionBgDescriptionImageTitleComponent {
  schemaId,
  description,
  image1 {
	id,
    metadata,
    slug
  },
  image2 {
	id,
    metadata,
    slug
  },
  title
}

fragment SectionDescCtaPhoneScreenshotsTitleComponentFragment on SectionDescCtaPhoneScreenshotsTitleComponent {
  schemaId,
  callToActionLabel,
  callToActionUrl,
  description,
  image1 {
	id,
    metadata,
    slug
  },
  image2 {
	id,
    metadata,
    slug
  },
  title,
  mode
}

fragment SectionCtaDescriptionTitleComponentFragment on SectionCtaDescriptionTitleComponent {
  schemaId,
  callToActionLabel,
  callToActionUrl,
  description,
  title,
  description,
  color
}

fragment SectionCtaDescriptionSubtitleTitleComponentFragment on SectionCtaDescriptionSubtitleTitleComponent {
  schemaId,
  callToActionLabel,
  callToActionUrl,
  description,
  title,
  subtitle
}

fragment SectionBlocksCtaDescriptionTitleComponentFragment on SectionBlocksCtaDescriptionTitleComponent {
  schemaId,
  blocks {
    callToActionLabel,
    callToActionUrl,
    description,
    title,
    image {
		id,
    	metadata,
    	slug
    }
  }
}

fragment SectionImageBlocksComponentFragment on SectionImageBlocksComponent { 
  schemaId,
  title,
  blocks {
    title,
    image {
		id,
    	metadata,
    	slug     
    }
  }
}
4

Yes, it is a little bit annoying to define all these fragments, but you can reuse them. It is the nature of graphql, not squidex.