Angular 14 Apollo Client Setup

Angular 14 Apollo Client Setup

In a previous tutorial, we've developed the GraphQL API on top of Apollo server, we'll see now how it can be integrated with an Angular frontend.

Using GraphQL, developers may manage both local and remote data with the help of the Apollo Client, a state management toolkit for JavaScript and Angular. It allows you to synchronize data changes with your user interface while you get, cache, and update application data.

You can use the same queries you're already familiar with from the GraphQL IDE in Apollo because it uses standard GraphQL.

Let's add Apollo Client to our Angular 14 app now.

Return to the terminal and execute the following command from the main folder of your Angular project:

ng add apollo-angular

You'll be asked as follows:

  • The package apollo-angular will be installed and executed. Would you like to proceed? Enter Y.
  • ? Url to your GraphQL endpoint Enter: http://localhost:8080/graphql

The Apollo client will be set up and ready to go after this. A src/app/graphql.module.ts file is created and imported in the src/app/app.module.ts file as follows:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { HeaderComponent } from './core/components/header/header.component'; 
import { FooterComponent } from './core/components/footer/footer.component'; 
import { PageNotFoundComponent } from './core/components/page-not-found/page-not-found.component'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { GraphQLModule } from './graphql.module'; 
import { HttpClientModule } from '@angular/common/http'; 



@NgModule({ 
  declarations: [ 
    AppComponent, 
    HeaderComponent, 
    FooterComponent, 
    PageNotFoundComponent 
  ], 
  imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    BrowserAnimationsModule, 
    GraphQLModule, 
    HttpClientModule 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 

}) 
export class AppModule { }

The contents of the GraphQL module: 

import {NgModule} from '@angular/core'; 
import {APOLLO_OPTIONS} from 'apollo-angular'; 
import {ApolloClientOptions, InMemoryCache} from '@apollo/client/core'; 
import {HttpLink} from 'apollo-angular/http'; 



const uri = 'http://localhost:8080/graphql'; // <-- add the URL of the GraphQL server here 

export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> { 

  return { 
    link: httpLink.create({uri}), 
    cache: new InMemoryCache(), 
  }; 
} 

@NgModule({
  providers: [ 
    { 
      provide: APOLLO_OPTIONS, 
      useFactory: createApollo, 
      deps: [HttpLink], 
    }, 
  ], 
}) 
export class GraphQLModule {}

This file connects our client to the GraphQL server at http://localhost:8080/graphql using the HttpLink service from the apollo-angular/http package. For both local and distant data storage, we employ the InMemoryCache module included in the @apollo/client/core repository.