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.
The search will be available on a new route and implemented in a new Angular component.
Let’s review what you are doing here.
searchTextto an input element and listen to his change thanks to
executeSearchfunction that will executed each time
this.searchTextis updated. You also will not run it if there is no
/searchroute 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
You can now navigate to the search functionality using the new button in the
Great, let’s now define
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
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.