Announcing AWS Amplify JavaScript library version 5

The Amplify team is announcing the release of version 5.0.0 of the Amplify JavaScript library. This release is jam-packed with highly requested features, in addition to under the hood improvements to enhance stability and usability of the JavaScript library. Please use this Github repo to provide us with feedback on our new release, in addition to informing us of any issues you may be experiencing. You can also join our Amplify Discord server and reach out using the #js-help channel.

New Features

Below is a breakdown of the features we are announcing with Amplify JavaScript version 5.0.0

Storage Enhancements

• Using our Storage feature set, which connects to S3, can now paginate their requests when retrieving files from a specific S3 bucket or folder. You can now also control the size of returned page by using the pageSize parameter. You can also set the value of pageSize to ALL if they want to retrieve all files in a specific S3 prefix. For more information visit our Storage documentation.

const PAGE_SIZE = 20;
let nextToken = undefined;
let hasNextPage = true;

const loadNextPage = async () => {
  if (hasNextPage) {
    let response = await Storage.list('photos/', {
      pageSize: PAGE_SIZE,
      nextToken: nextToken,
    });
    if (response.hasNextToken) {
      nextToken = response.nextToken;
    } else {
      nextToken = undefined;
      hasNextPage = false;
    }
    // render list items from response.results
  }
}

Datastore Enhancements

• You can now asynchronously fetch related data in one-line of code. For example: if a post has many comments, you can lazy load comments using the async toArray() function: await post.comments.toArray(). You can also lazy load hasOne relationships, for example: await post.author. DataStore also takes advantage of JavaScript’s built-in async iterator support to make it easier for you to author for loops. For more information about DataStore lazy loading visit our DataStore documentation.

for await (const comment of post.comments) {
  console.log(comment) // iterates over each comment!
}

• You can use nested predicates to create powerful filtering rules when fetching data using Datastore. You can also stack predicate filters if needed for their use cases. More information about DataStore nested predicates on the DataStore documentation. PR 10477

await DataStore.query(Comment, c => c.post.title.beginsWith(“Amplify”)

GraphQL/PubSub Subscription enhancements

• Real-time Subscriptions that are created with the API GraphQL and PubSub feature sets will now automatically re-connect if a customer loses connectivity. The Amplify JavaScript library will also emit hub events to inform developers of the status of the reconnection, to allow them to handle informing to the user if their network connection stopped/resumed. More information about reconnection can be found on GraphQL subscriptions documentation and PubSub subscriptions documentation. PR 10235

In-App Messaging

• As part of 5.0.0, we launched support for in-app messaging capabilities as part of the Notifications feature sets that allow you to provide contextual messages that are triggered depending on interactions of end users in their app. To get started with building In-App Messaging experiences visit our documentation. PR 10430

Operational Enhancements

• Improved the bundle size for Amplify JavaScript with different bundlers and JavaScript Frameworks.
  • Reduced by 10% on average across all the Amplify JS packages with authentication (tested with create-react-app)
  • Reduced by 35% on average across all the Amplify JS packages with unauthenticated (guest) users (tested with create-react-app)
  • Replaced dependencies with smaller alternatives
  • Optimize bundle size for unauthenticated use cases, e.g. recording events or loading images for guests users
  • tslib is used across all the packages with importHelpers option enabled
  • Improved bundle size for unauthenticated and guest use cases by 34 KB
• Removed unnecessary artifacts from npm packages reducing installation size from 196 MB to 90.4MB

Breaking changes

• Default exports removed from the below Amplify JavaScript packages. e.g. import Auth from '@aws-amplify/auth' is no longer supported. You will need to change it to import {Auth} from '@aws-amplify/auth'
  • @aws-amplify/analytics
  • @aws-amplify/api-rest
  • @aws-amplify/api-graphql
  • @aws-amplify/api
  • @aws-amplify/cache
  • @aws-amplify/datastore
  • @aws-amplify/geo
  • @aws-amplify/interactions
  • @aws-amplify/predictions
  • @aws-amplify/pub
  • @aws-amplify/storage
  • @aws-amplify/xr
  • aws-amplify
• @aws-amplify/api, @aws-amplify/pubsub: Network subscriptions are automatically reconnected and observables stay available (previously observables were closed after network issues).
• @aws-amplify/analytics: Analytics.record no longer accepts string as its first parameter.
• aws-amplify
  • Amplify.Auth,Amplify.Cache, Amplify.ServiceWorker static members are no longer available on Amplify singleton PR 10562
  • Removed CSS modules export.
• @aws-amplify/pubsub: Removed misspelled type export MqttProvidertOptions from MqttOverWSProvider provider.
• @aws-amplify/core: Removed JS export from in favor of individual function exports PR 10528
• @aws-amplify/storage: Storage.list now accepts pageSize instead of maxKeys and also the return value is an object that has result and pagination info.
• Deprecated legacy UI packages (You can migrate to the new UI packages by following this link):
  •  @aws-amplify/ui-vue@"<= 1.x"
  • @aws-amplify/ui-react@"<= 1.x"
  • @aws-amplify/ui-angular@"<= 1.x"
  • @aws-amplify/ui-components@"<= 1.x"
  • aws-amplify-vue (all versions)
  • aws-amplify-angular (all versions)
  • aws-amplify-react (all versions)

In conclusion

We hope you enjoy these new features and enhancements. To stay in touch with the latest Amplify JavaScript library releases, check out our releases section of our Github repo. Please reach out to us with your feedback on Discord in the #js-help channel. You can also submit issues on our Github repo if you need support from our team.

Get started with building JavaScript Web and React Native apps with AWS Amplify.