DatoCMS changelog for new features and general improvements Content Delivery API Content Management API ## [⚠️ Changing default value of string fields (canceled)](https://www.datocms.com/product-updates/changing-return-of-empty-string-default-value.md) [date: 2023-01-23T10:38:58.746+01:00] On Monday, 30th of January at 10AM (UTC+1), we are changing the default value of string fields from empty string ("") to null. We are doing this for consistency with other field types and because it was generating confusion over record filtering. Please, check your code if this change impacts your projects in any way! Write to our [support team](https://www.datocms.com/support.md) if you need any assistance. We decided not to proceed with this and to find another solution. UI Improvement ## [New locales filter in tabular view, and a change in locale switch behaviour](https://www.datocms.com/product-updates/new-locales-filter-in-tabular-view.md) [date: 2022-12-12T16:17:25.888+01:00] We made some UI improvements in how locales are presented and managed in the tabular visualization of a collection, when you have a model with the option "All locales required?" disabled. The locale switch dropdown now automatically filters out records that do not contain the selected locale β€” previously, it would only have the effect of showing content in the table in the selected locale, if it was available: (Image content) This change should already improve 99% of use cases, but if you need to make some more complex queries on your record list, you can use the new "Locales" advanced filter: (Image content) Content Management API Content Delivery API ## [API cleanup for freshly created projects](https://www.datocms.com/product-updates/api-cleanup-for-freshly-created-projects.md) [date: 2022-12-06T18:03:40.493+01:00] We want our APIs to be as clean as possible, but we also do not want to disrupt the work of our customers. With that in mind, **we have decided to apply some changes to the API only for the websites created from January 1st, 2023 onwards.** Therefore, websites created in the new year will have a slightly different API: - `createdAt` and `updatedAt` fields will be available on the content management API as part of the `meta` object of the `item` and `item_type` entities; - the fields `createdAt` and `updatedAt` won’t be available via GraphQL in the CDA: the existing `_createdAt` and `_updatedAt` will remain as they currently are (quick take-away: in our GraphQL API, meta fields always start with an underscore πŸ˜‰); - legacy fields with wrong spelling like `appeareance` and `collection_appeareance` , already marked as deprecated, won't be available anymore. The changes will only impact new websites: nothing will change for existing ones or their duplicates. For any further info, please get in touch with our customer support. Plugins New ## [New event hooks available on Plugins SDK](https://www.datocms.com/product-updates/new-event-hooks-available-on-plugins-sdk.md) [date: 2022-11-25T16:00:00.786+01:00] 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](https://www.datocms.com/docs/plugin-sdk/event-hooks.md#intercept-actions-on-records) to learn how to use them! New Integrations ## [Single Sign-On with Google Workspaces is now available](https://www.datocms.com/product-updates/single-sign-on-with-google-workspaces-is-now-available.md) [date: 2022-11-24T12:25:54.782+01:00] 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](https://www.datocms.com/marketplace/enterprise/google-workspace.md). Single Sign-On is an enterprise feature: if you're interested, please [contact our Sales team](https://www.datocms.com/contact.md) to activate a free 15 days trial. New Integrations ## [Released a smarter Vue DatoCMS Image component](https://www.datocms.com/product-updates/released-a-smarter-vue-datocms-image-component.md) [date: 2022-11-14T17:11:14.116+01:00] The new version of vue-datocms β€” [v4.0.0](https://github.com/datocms/vue-datocms/releases/tag/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: ```plaintext 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 `` 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 Improvement Content Delivery API ## [Easier pattern usage in GraphQL queries](https://www.datocms.com/product-updates/easier-pattern-usage-in-graphql-queries.md) [date: 2022-11-14T10:07:29.228+01:00] 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: ```graphql { allBlogPosts(filter: {name: {matches: {pattern: "^+123"}}}) { id }} ``` will get you the following error: ```json { "data": null, "errors": [ { "message": "Invalid regular expression: quantifier operand invalid (provided regular expression: \"^+123\")", "locations": [ { "line": 2, "column": 3 } ], "path": [ "allBlogPosts" ] } ]} ``` New Integrations ## [Released React DatoCMS Image component v4](https://www.datocms.com/product-updates/react-datocms-image-component-v4.md) [date: 2022-11-11T15:13:52.628+01:00] Basically, with [react-datocms v4.0.0](https://github.com/datocms/react-datocms/releases/tag/v4.0.0) your `responsiveImage()` GraphQL queries can be reduced down to: ```plaintext 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 `` 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!](https://www.datocms.com/product-updates/new-gatsby-source-plugin-faster-build-times.md) [date: 2022-11-08T16:05:15.878+01:00] A new major version (v5) of our popular [Gatsby source plugin](https://github.com/datocms/gatsby-source-datocms) 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](https://github.com/datocms/gatsby-source-datocms#localized-fields). 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](https://www.datocms.com/docs/content-delivery-api/localization.md), and the new syntax allows for [complex use cases](https://github.com/datocms/gatsby-source-datocms/issues/196) 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! πŸ™* Integrations Docs, Guides and Demos ## [Vue and Nuxt components update](https://www.datocms.com/product-updates/vue-and-nuxt-components-update.md) [date: 2022-11-08T09:36:24.808+01:00] We just completed a comprehensive update of our library for Vue β€” [vue-datocms](https://github.com/datocms/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](https://github.com/datocms/vue-datocms/tree/master/src/components/Image#layout-mode) for the `` 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](https://github.com/datocms/vuejs-demo) is now based on Vue 3 and the fast Vite.js; - Nuxt users will enjoy the [nuxtjs-demo](https://github.com/datocms/nuxtjs-demo), now based on Nuxt 3. Finally, the DatoCMS website now contains [two](https://www.datocms.com/docs/nuxt.md) [separate](https://www.datocms.com/docs/nuxt.md) learning sections, providing a solid walkthrough for integrating Dato in projects based on Vue.