Cosmic JavaScript SDK updates (v1.2.0)

We recently released a new version of the Cosmic JavaScript SDK (v1.2.0) which includes features and improvements to enhance your developer experience and streamline content delivery.

Props graph syntax

In v1.2.0 you can now use graph style syntax to declare your API response properties. The shape you request is the shape you get.

For example, when you make a request like this:

await cosmic.objects.findOne({
  type: "blog-posts",
  slug: "our-amazing-adventure",
}).props(`{
  slug
  title
  metadata {
    content
    image {
      url
    }
    author {
      title
      metadata {
        image {
          url
        }
      }
    }
  }
}`);

You get this response back:

{
  "slug": "our-amazing-adventure",
  "title": "Our Amazing Adventure",
  "metadata": {
    "content": "I regard the decision to...",
    "image": {
      "url": "https://cdn.cosmicjs.com/img.jpg"
    },
    "author": {
      "title": "Jane Doe",
      "metadata": {
        "image": {
          "url": "https://cdn.cosmicjs.com/img.jpg"
        }
      }
    }
  }
}

This is a much improved way to structure your requests to the API especially when you have more deeply nested props. Note: The props string and array options are still supported.

Go to the Objects section in the docs for more information.

Fetch additional media data

The new options method enables you to get more media data from your media Metafields. It's available on the Objects find and findOne methods. This method takes an object with media and props. Here's what it looks like:

await cosmic.objects.findOne({
  type: 'object-type-slug',
  slug: 'object-slug'
}).props('slug,title,metadata.image.imgix_url')
.options({
  media: {
    props: 'alt_text,width,height'
  }
})

This will now add the alt_text, width, and height to all media Metafields (if available). For example:

{
  "object": {
    "slug": "my-blog-post-slug",
    "title": "My Blog Post",
    "metadata": {
      "content": "<p>Learning is fun!!</p>",
      "image": {
        "imgix_url": "https://imgix.cosmicjs.com/123asdf...",
        "alt_text": "This is an example image alt text",
        "width": 1200,
        "height": 600
      }
    }
  }
}

This feature makes adding accessibility and handling image dimensions simpler. Go to the media section in the docs to see all available properties on the media model.

Media dimensions

Images uploaded to the Cosmic dashboard and API now include width and height values for easy access.

Go to the docs to review the latest updates.