Attention

This workshop content is over a year old and AWS Amplify has made a great deal of improvements since this content was originally written.

Instead of this content, please check out some of the more up-to-date Amplify content. One great example is the AWS Serverless Airline Booking project. Besides that, you can find lots more excellent AWS Amplify content on the AWS Amplify Community site.

If you would still like to review the content of this workshop, these instructions should still work, provided you use the specific version of AWS Amplify noted in the Prerequisites section.

Making Photos Searchable

Updating the GraphQL Schema

Now that we are storing labels for each photo, we’re ready to move on and expose this data via our AppSync API.

While it’s possible to perform some level of searching via DynamoDB Query operations, a more flexible and performant approach is to use the Amazon Elasticsearch Service to index data and handle our search queries. Fortunately, the Amplify CLI makes creating an Amazon Elasticsearch Service endpoint, and connecting it to our app’s data, very easy.

  1. Replace /photoalbums/amplify/backend/api/photoalbums/schema.graphql with the following:

    # amplify/backend/api/photoalbums/schema.graphql
    
    type Album @model @auth(rules: [{allow: owner}]) {
        id: ID!
        name: String!
        photos: [Photo] @connection(name: "AlbumPhotos")
    }
    
    type Photo @model @auth(rules: [{allow: owner}]) @searchable {
        id: ID!
        album: Album @connection(name: "AlbumPhotos")
        bucket: String!
        fullsize: PhotoS3Info!
        thumbnail: PhotoS3Info!
        labels: [String!]
    }
    
    type PhotoS3Info {
        key: String!
        width: Int!
        height: Int!
    }

  2. From the photoalbums directory, run: amplify push to provision our new resources.

  3. Wait for the update to finish. Creating a new Amazon Elasticsearch Service endpoint can take several minutes. This step usually takes 8 to 12 minutes to complete.

You can learn more about Amplify’s @searchable GraphQL directive in Amplify’s GraphQL Transform documentation.

What we changed

  • Added the @searchable directive to the Photo type, which will have Amplify connect Photo data to an Amazon Elasticsearch Service cluster

  • Added a new labels propery to the Photo type so that the labels information added by the Photo Processor function will also be streamed as part of each Photo record into the Elasticsearch Service for us to search on

You can continue on to the next section while you’re waiting for the amplify push to complete.