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.
- Author: Ahmed Bouchefra Follow @ahmedbouchefra
-
Date:
Related posts
Seeding test data in TypeORM Setup TypeORM TypeORM Entity & Column decorators Setup TypeORM Create PostgreSQL database & user Angular 14 Apollo Client Setup Angular 14 Apollo Client Setup Debugging Angular applications Configuring CORS with Express.js Mocking GraphQL with Apollo Server GraphQL APIs with Apollo Server & Apollo Studio [Part 2] GraphQL APIs with Apollo Server & Apollo Studio Watch and compile TypeScript code to JavaScript Setup TypeScript with Node.js & Express.js Setup the server with Node.js/Express.js/Apollo Storing data with PostgreSQL and TypeORM Using GraphQL and Apollo for front- and back-end integration Using NVM on Windows How to Use Node.js to Run JavaScript on Servers Modern full-stack single-page apps' architecture 99+ Web Development Projects Challenges