Queries: Loading link-items

Preparing the Angular components

The first piece of functionality that you’ll implement in the app is loading and displaying a list of link-item elements. You’ll walk up our way in the Angular component hierarchy and start with the component that’ll render a single link-item.

Note, we will be writing all our typings in a ./src/app/types.ts file and merely importing these types into components as needed.

This is a simple Angular component that expects a link in its Input (link-item.component.ts) and renders the link’s description and URL (link-item.component.html). Easy as pie! 🍰

Next, you’ll implement the component that renders a list of link-items.

Here, you’re using mock data (link-list.component.ts) for now to make sure the component setup works. You’ll soon replace this with some actual data loaded from the server - patience, young Padawan!

Run the app to check if everything works so far! The app should now display the two links from the linksToRender array:

Writing the GraphQL Query

You’ll now load the actual link-items stored on the server. The first thing you need to do is to define the GraphQL query that you want to send to the API.

Here is what it looks like:

query AllLinks {
  allLinks {
    id
    createdAt
    description
    url
  }
}

You could now merely execute this query in a Playground and retrieve the results from your GraphQL server. But how can you use it inside your JavaScript code?

Queries with Apollo Client

When using Angular with apollo-angular the Apollo service makes it easy to fetch GraphQL data.

With this approach, all you need to do when it comes to data fetching is write the GraphQL query, then injecting the Apollo service and use query or watchQuery method on the service directly that will fetch the data for you and finally make it available in your component.

In general, the process for you to add some data fetching logic will be very similar every time:

1. Write the query as a typescript constant using the gql parser function
2. Initialize the property in your component
3. Use the Apollo service to fetch the results of your graphql query using Observable
4. Access the query results in the observable subscribe and assign it to the property in your component

You will be writing your queries and mutations in a graphql.ts file and merely importing these queries and mutations into components as needed.

What’s going on here?

1. First, you import gql from the graphql-tag package. The gql function is used to parse the plain GraphQL code.
2. Now you define the plain GraphQL query. The name AllLinksQuery is the operation name and will be used by Apollo to refer to this query in its internals. You export this parsed query as ALL_LINKS_QUERY so you can easily import it into components.
3. You also declare the response interface of AllLinksQuery

Next, you will inject the Apollo service to the LinkList component and call this newly created query to fetch data.

What’s going on here?

1. You import the ALL_LINKS_QUERY which you just created
2. Next, you initialize the allLinks data property to an empty array and loading to true. This will be set to false once data loads.
3. Now you inject an Apollo service to your component
4. You call the query method to it ( you can also use another method named watchQuery). This method requires a query, and you pass it the ALL_LINKS_QUERY. As you can see, there is a new property, valueChanges. To watch results you have to subscribe to valueChanges property.
5. The query method gives back a observable where we subscribe to get the response that contains a data property with loading set to true as long as the request is still ongoing and the response hasn’t been received and allLinks which is the actual data that was received from the server.

That’s it! If you ran npm start or yarn start earlier, you should see your UI update and show the two links.