Integrating GraphQL in Angular

Introduction

Hi readers, in our last blog we have seen how we can query data in graphQL. So today we will be doing a practical implementation of it. We will be integrating graphQL in our angular application with the help of apollo-angular package. So let us see how we do it.

In case you have not gone through my last blog about queries, you can refer here.

Implementation of GraphQL

Let us create a new angular application with the help of this command

ng new apolloDemo

This will create a new angular application with the name apolloDemo

Now we need to install the library Apollo Angular which makes it really easy to integrate graphQL in our angular application. You can learn about this library more here. Let us run the command and add it to our application.

ng add apollo-angular

When you run this command, it will prompt you to add the endpoint which you want to hit in your application. So here you can enter the following endpoint. If you want you can also create a dummy GraphQL server on your local. But for now, we will be using a dummy endpoint of the star wars film. You can explore this endpoint here.

So https://swapi-graphql.netlify.app/.netlify/functions/index is the endpoint that you can enter.

When the above command is successful, you will see a file named graphql.module.ts. This file will contain the endpoint which we will be hitting in our application and will do the necessary configurations for GraphQL in this file.

Let us now create the model. You need to create a separate file named films.model.ts and add this code.

export interface Films {
   title : string
   director : string
   releaseDate: Date
}

Now let us create a service where we will be hitting our endpoint. I am naming the service as films.

ng g s films

After this command, you will see the service file is created along with its spec file.

Now, firstly we will write the query in our service file mentioning all the fields that we require. So, here is the query

const FILMS = gql`
{
 allFilms {
   films{
     title
     director
     releaseDate
   }
 }
}
`

We will be retrieving an array of films where we will be receiving the film’s title, director, and release date. So our query is ready for it.

Now let us create the function to hit our endpoint.

export class FilmsService {
 constructor(private apollo: Apollo) {}

 getMoviesName(): Observable<Films[]> {
   return this.apollo
     .watchQuery<any>({
       query: FILMS,
     })
     .valueChanges.pipe(map((result) => result.data.allFilms.films));
 }
}

You need to inject Apollo in the constructor and then we create the function.

Here we call the watchQuery function of Apollo and mention the query name which is FILMS in our case. This function will be returning an observable which will contain our desired result. The graphQL query is included in the FILMS constant.

Now we will create a component named movies to display our data on the UI

ng g c movies

In the class, we call the getMoviesName function from our service.

export class MoviesComponent implements OnInit {
 tableColumns: string[] = ['title','director','releaseDate'];
 moviesData$ = this.filmService.getMoviesName();

 constructor(private filmService: FilmsService) {}

 ngOnInit(): void {
 }
}

Here we inject out FilmsService and save the observable data in the variable moviesData$.

Now let us display this data in a table. Here I am using the angular material table. (Please add this library with the help of this command: ng add @angular/material)

You will also need to import the MatTableModule in the imports array of app.module.ts in order to use a mat table.

Now in the HTML, paste this data

<table mat-table [dataSource]="moviesData$" class="mat-elevation-z8">
    <ng-container matColumnDef="title">
     <th mat-header-cell *matHeaderCellDef> Movie Title </th>
     <td mat-cell *matCellDef="let item"> {{item.title}} </td>
   </ng-container>
    <ng-container matColumnDef="director">
     <th mat-header-cell *matHeaderCellDef> Director </th>
     <td mat-cell *matCellDef="let item"> {{item.director}} </td>
   </ng-container>
    <ng-container matColumnDef="releaseDate">
     <th mat-header-cell *matHeaderCellDef> Release Date </th>
     <td mat-cell *matCellDef="let item"> {{item.releaseDate}} </td>
   </ng-container>
    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
</table>

And now just call this component in your app.component.html file with its selector

<app-movies></app-movies>

And you will be able to see the details in the table like this:

Conclusion

So, finally, we have seen how we can integrate graphQL in our angular application with the help of apollo-angular package and how we can query data from it. You can get the whole code in this repo.

Finally, for more such posts like this, please follow our LinkedIn page- FrontEnd Studio.