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 route

This will generate a new route, add it to your router.js and create a new template. You won’t be needing the route file go delete app/routes/search.js.

Again, this is a pretty standard setup. You’re rendering an input field where the user can type a search string.

Notice that you are also preparing to display the results using the link-post component.

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

You can now navigate to the search functionality using the new button in the site-header component.

Filtering Links

This query looks similar to the allLinks query that’s used in many places. 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.

Perfect, the query is defined! But this time you actually want to load the data every time the user hits the search-button which is what the executeSearch method is handling. You are getting the searchText the user provided, running a queryOnce method on your Apollo client, and setting the results to your model.

Notice that you aren’t using the query method, but are instead using queryOnce. The difference is subtle, but important. ember-apollo-clients query method, by default, sets an internal Apollo subscription. This allows the client to be notified if another component calls your server and receives results that would need to update the data in your store.

Basically, by default, ember-apollo-client is trying to help you prevent stale data, if possible. The queryOnce method does not setup that internal Apollo subscription. Since you don’t care about being notified when a detail on your search results changes, you are using queryOnce.

Go ahead and test the app by running yarn start in a Terminal and navigating to http://localhost:4200/search. Then type a search string into the text field, click the search-button and verify the links that are returned fit the filter conditions.