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.
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
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
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
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
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.
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
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.