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 VueJS Components

The search will be available under a new route and implemented in a new VueJS component.

Let’s review what you are doing here.

1. First, you bind searchText to an input element
2. Next, you import the, soon to be created, ALL_LINKS_SEARCH_QUERY
3. Finally, you define a smart query. Note that variables is a function rather than an object. This means that each time this.searchText is updated, variables will trigger the smart query to re-run. You also define skip which ensures this query will not run if there is no searchText to search.

Notice that the allLinks field in the component’s data will hold all the links to be rendered, so this time we’re not accessing query results through the component props!

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

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

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

Great, let’s now define ALL_LINKS_SEARCH_QUERY.

Filtering Links

This query looks similar to the allLinks query that’s used in LinkList. 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 on the component’s data so that they can be rendered.

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