Implementing Search in GraphQL

In this tutorial, we’ll learn how to implement GraphQL search in a React Application using AWS AppSync & React Apollo.

The final code for this tutorial is located here.

To accomplish this we’ll have a search field that triggers a search when the user types into the input field and updates the UI as results come back from our GraphQL API.

We’ll begin by creating a new GraphQL API using AWS AppSync. We’ll then demonstrate how to use the built-in query editor to add items to the data source & query for them from within the AWS AppSync console.

Next, we’ll connect the API to our React app & implement a basic search field that will search the description field of our data source.

Finally, we’ll update the API to add a new searchField row in our table that will allow us to query all of the fields from a single query by combining the other fields into this comprehensive searchField. We’ll update the search functionality to be case-insensitive.

There are multiple ways to implement search using AWS AppSync. The method we’ll use in this tutorial is DynamoDB filters that are autogenerated for us when creating an AppSync API. For more advanced use cases you can also take advantage of Amazon Elasticsearch as an AWS AppSync data source. I’ll be publishing a follow up to this…