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 under a new route and implemented in a new VueJS component.
Let’s review what you are doing here.
searchTextto an input element
variablesis a function rather than an object. This means that each time
variableswill trigger the smart query to re-run. You also define
skipwhich ensures this query will not run if there is no
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!
Searchcomponent when the
/searchroute 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
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
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
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.