Filtering: Searching the List of Links

In this section, you’ll implement a search feature and learn about the filtering capabilities of your GraphQL API.

Note: If you’re interested in all the filtering capabilities of Graphcool, you can check out the documentation on it.

Preparing the Angular Components

The search will be available on a new route and implemented in a new Angular component.

Let’s review what you are doing here.

1. First, you bind searchText to an input element and listen to his change thanks to ngModelChange event
2. Next, you import the, soon to be created, ALL_LINKS_SEARCH_QUERY
3. Finally, you define a executeSearch function that will executed each time this.searchText is updated. You also will not run it if there is no searchText to search.

1. You import the SearchComponent
2. You render the SearchComponent when the /search route is reached

For the user to be able to navigate to the search functionality comfortably, you should also add a new navigation item to the HeaderComponent.

You can now navigate to the search functionality using the new button in the HeaderComponent:

Great, let’s now define ALL_LINKS_SEARCH_QUERY.

Filtering Links

This query looks similar to the allLinks query that’s used in LinkListComponent. However, this time it takes in an argument called searchText and specifies a filter object that will be used to specify conditions on the links that you want to retrieve.

In this case, you’re specifying two filters that account for the following two conditions: A link is only returned if either its URL contains the provided searchText or its description contains the provided searchText. Both conditions can be combined using the OR operator.

The implementation is almost trivial. You’re executing the ALL_LINKS_SEARCH_QUERY each time searchText changes, and binding the results to allLinks so that they can be rendered.

Go ahead and test the app by navigating to http://localhost:4200/search. Then type a search string into the text field and verify the links that are returned fit the filter conditions.