What is Apollo Client?

Apollo is a GraphQL client that makes it very easy to develop GraphQL applications with the React and Angular.It will helps you to fetch data and keep your client state in sync with the server.

Why we should use Apollo Client?

there are following points, which Apollo insist to use in our application.

less network requests
less data in the requests
component based API
real time communications
optimistic UI
caching
prefetching

Now let’s going to deep diving…To get started with Apollo and Angular,
let’s start from installation:

Installation

Let’s get started by installing the required packages (apollo-client, apollo-angular and graphql-tag and many other packages) with NPM:

npm install apollo-angular apollo-angular-link-http apollo-client apollo-cache-inmemory graphql-tag graphql --save

  apollo-client is the client library that works for any platform.

  apollo-angular is the Angular integration for the Apollo client.

  graphql-tag is the tag that parses your GraphQL queries/mutations.

Now you are ready to use Apollo in your application.
To get started using Apollo with Angular, we need to import two NgModules, ApolloModule and HttpLinkModule.

ApolloModule is the center of using GraphQL in your app! It includes all needed services that allows to use ApolloClient’s features.
HttpLinkModule makes it easy to fetch data in Angular.

Creating a client

To get started, inject Apollo and HttpLink services (if you decided to use it) and then create a client:

constructor(apollo: Apollo, httpLink: HttpLink) {
    //localhost
    const uri = 'http://localhost:3000/graphiql';
    const http = httpLink.create({ uri });

    apollo.create({
      link: http,
      cache: new InMemoryCache()
    });
}

(NOTE: you can find full code in below.)

Creating Operations using graphql-tag
import gql from 'graphql-tag';

The gql template tag is what you use to define GraphQL queries in your Apollo apps. It parses your GraphQL query into the GraphQL.js AST format which may then be consumed by Apollo methods.

Queries:
You can learn how to use Apollo to attach GraphQL query results to
your Angular UI.

First create a apollo.config.ts file.
/app/apollo.config.ts

import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {Apollo, ApolloModule} from 'apollo-angular';
import {HttpLink, HttpLinkModule} from 'apollo-angular-link-http';
import {InMemoryCache} from 'apollo-cache-inmemory';

@NgModule({
  exports: [
    HttpClientModule,
    ApolloModule,
    HttpLinkModule
  ]
})
export class GraphQLModule {
  constructor(apollo: Apollo, httpLink: HttpLink) {
    //localhost
    const uri = 'http://localhost:3000/graphiql';
    const http = httpLink.create({ uri });

    apollo.create({
      link: http,
      cache: new InMemoryCache()
    });
}
}

Now go to app.module.ts file,
add below code.
import {GraphQLModule} from './apollo.config';

in imports section,

imports: [
    BrowserModule,
    HttpModule,
    GraphQLModule
  ],

Now let’s create a new component,
i.e.,

ng g c apollo-test

you can find following files in your app/apollo-test folder.

# apollo-test.component.css
<> apollo-test.component.html
TS apollo-test.component.spec.ts
TS apollo-test.component.ts

open apollo-test.component.ts and add below code in your file.

import { Component, OnInit } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';
import { ApolloQueryResult } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { Observable } from 'rxjs/Observable';

const PostsGetQuery = gql`
  query PostsGetQuery{
    posts_list {
        id
        title
        body
        user {
          id
          firstName
          lastName
          bio
        }
      }
  }
`;


@Component({
  selector: 'app-apollo-test’,
  templateUrl: './apollo-test.component.html',
  styleUrls: ['./apollo-test.component.css']
})
export class ApolloTestComponent implements OnInit {
  data: Observable<any>;

  constructor(private apollo: Apollo ) { }

  ngOnInit() {
    this.apollo.watchQuery<any>({
      query: PostsGetQuery
    })
      .valueChanges
      .subscribe(({data}) => {
        this.data = data.posts_list;
      });
  }
}

now you have a posts list in your data object.
let’s display data in a form.
go to your apollo-test.component.html file,

<p>
  apollo-test works! DONE
</p>
<h1>Posts</h1>
<div *ngFor="let post of data">
  <table>
    <tr>
        <td>
          User Name: {{post.user.firstName}}
        </td>
      <td>
          Post ID: {{post.id}}
      </td>
      <td>
          Title: {{post.title}}
      </td>
    </tr>
  </table>
</div>

that’s it. Now you can enjoy fast response in your application without having any problem.

For mote details please go through to the below link.
https://www.apollographql.com/docs/angular/

here is the setup guide line:
https://www.apollographql.com/docs/angular/basics/setup.html

Thank you for reading.I hope this article will helpful to you.

Enjoy coding.

Thanks & Best Regards,
Alok Rawat