Partners

Product Updates

DatoCMS changelog for new features and general improvements
PluginsNew
New event hooks available on Plugins SDK
November 25th, 2022

On plugins, it is now possible to intercept when the user wants to perform a specific action on one (or multiple) records, via a new set of event hooks:

  • onBeforeItemUpsert: when the user wants to save a record (both creation and update);

  • onBeforeItemsDestroy: when the user wants to delete one (or more) records;

  • onBeforeItemsPublish: when the user wants to publish one (or more) records;

  • onBeforeItemsUnpublish: when the user wants to unpublish one (or more) records;

Please read our updated documentation to learn how to use them!

NewIntegrations
Single Sign-On with Google Workspaces is now available
November 24th, 2022

It is now possible to automatically provision DatoCMS users using your centralized Google Workspace. Group memberships are supported too.

Read all the details on how to configure the integration. Single Sign-On is an enterprise feature: if you're interested, please contact our Sales team to activate a free 15 days trial.

NewIntegrations
Released a smarter Vue DatoCMS Image component
November 14th, 2022

The new version of vue-datocms โ€” v4.0.0 โ€” makes available to Vue users an important improvement that we released some days ago for the people working with React.

Here is the news: with this new version, you can reduce responsiveImage() GraphQL queries down to:

responsiveImage(imgixParams: { auto: format }) {
src width height alt base64
}
  • You can avoid requesting srcSet in the responsiveImage GraphQL query, as if it's missing, the Vue <Image /> component knows how to build it from src.

  • You can avoid requesting webpSrcSet as well, because the { auto: format } Imgix transformation parameter offers even more performant optimizations (AVIF), without increasing the GraphQL response size.

  • You can avoid requesting sizes, and use the sizes prop on the Image component itself.

These changes can sensibly reduce the overall GraphQL response size, particularly when dealing with many images at once.

New props for Image component:

  • priority: When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.

    You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes. Should only be used when the image is visible above the fold.

  • sizes: If you're using this prop, you can avoid requesting sizes in the responsiveImage query.

  • src-set-candidates: If you're not requesting srcSet in the responsiveImage query, src-set-candidates will be used to generate the different srcset candidate strings at various widths. Default candidates are: [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4].

UI ImprovementContent Delivery API
Easier pattern usage in GraphQL queries
November 14th, 2022

Despite being somewhat scary, regular expressions are a very powerful tool. DatoCMS supports regex for filtering patterns in GraphQL queries. We just improved how we report syntax errors in regex to ease their usage and provide more precise feedback.

Now, providing a query like this:

{
allBlogPosts(filter: {name: {matches: {pattern: "^+123"}}}) {
id
}
}

will get you the following error:

{
"data": null,
"errors": [
{
"message": "Invalid regular expression: quantifier operand invalid (provided regular expression: \"^+123\")",
"locations": [
{
"line": 2,
"column": 3
}
],
"path": [
"allBlogPosts"
]
}
]
}
NewIntegrations
Released React DatoCMS Image component v4
November 11th, 2022

Basically, with react-datocms v4.0.0 your responsiveImage() GraphQL queries can be reduced down to:

responsiveImage(imgixParams: { auto: format }) {
src width height alt base64
}
  • You can avoid requesting srcSet in the responsiveImage GraphQL query, as if it's missing, the React <Image /> component knows how to build it from src.

  • You can avoid requesting webpSrcSet as well, because the { auto: format } Imgix transformation parameter offers even more performant optimizations (AVIF), without increasing the GraphQL response size.

  • You can avoid requesting sizes, and just use the sizes prop on the Image component itself.

Overall, these changes can reduce the overall GraphQL response size significantly, especially when dealing with many images at once.

New props for Image component:

  • priority: When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.

    You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes. Should only be used when the image is visible above the fold.

  • sizes: If you're using this prop, you can avoid requesting sizes in the responsiveImage query.

  • srcSetCandidates: If you're not requesting srcSet in the responsiveImage query, srcSetCandidates will be used to generate the different srcset candidate strings at various widths. Default candidates are: [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4].

Plugins
New Gatsby source plugin: faster build times on big multi-locale projects!
November 8th, 2022

A new major version (v5) of our popular Gatsby source plugin is out!

The biggest change introduced by version 5 concerns the management of locales. If until now, for each record, each locale generated a different Gatsby node, now the node is always one, regardless of the number of locales.

On projects with many languages and/or many records, this change produces tremendous savings in memory and build times (up to one order of magnitude).

As a consequence of this change, the way you must write GraphQL queries for localized content is changed.

We know this can be a big annoyance for those who want to upgrade, but on the other hand, everything is now much more similar to the way our GraphQL Content Delivery API works, and the new syntax allows for complex use cases that were simply impossibile to solve before.

For this release, we would like to publicly thank the Gatsby team for their support. We've worked closely together to take full advantage of Gatsby v4's latest customization capabilities, and where issues have arisen, they have been incredibly responsive in fixing them! ๐Ÿ™

IntegrationsDocs, Guides and Demos
Vue and Nuxt components update
November 8th, 2022

We just completed a comprehensive update of our library for Vue โ€” vue-datocms, now at version 3:

  • it now supports both Vue 2 and Vue 3 via VueDemi, thus opening the possibility of easily using Vue composition API with DatoCMS;

  • it comes with first-class support for Typescript;

  • it has new features, including multiple layout modes for the <Image> component.

We also took the chance for a due upgrade of our demo projects related to Vue. New-comers now have 2 solid starting points:

  • vuejs-demo is now based on Vue 3 and the fast Vite.js;

  • Nuxt users will enjoy the nuxtjs-demo, now based on Nuxt 3.

Finally, the DatoCMS website now contains two separate learning sections, providing a solid walkthrough for integrating Dato in projects based on Vue.

Docs, Guides and Demos
Improved Next.js Blog starter!
November 3rd, 2022

Our Next.js Blog starter has been updated and now offers the following enhacements:

Plugins
Add block information on Field Extension plugins
November 3rd, 2022

A small addition to our Plugins SDK: inside the renderFieldExtension hook, you can now access ctx.block.

If the field extension is installed in a field of a block, ctx.block returns the ID of the block โ€” or undefined if the block is still not persisted โ€” and the block model.

CLINew
Introducing Autogeneration of Migration Scripts
November 2nd, 2022

Our CLI just became a lot smarter, and can now automatically generate a migration script from the differences between two environments!

Read the complete announcement in our Blog.

ยซ PreviousNext ยป