Set up a GraphQL client with Apollo

Apollo gives a neat abstraction layer and an interface to your GraphQL server. You don't need to worry about constructing your queries with request body, headers and options, that you might have done with axios or fetch say. You can directly write queries and mutations in GraphQL and they will automatically be sent to your server via your apollo client instance.

Angular Apollo Installation

Let's get started by installing apollo client & peer graphql dependencies:

$ npm install apollo-angular @apollo/client graphql

Create Apollo Client Instance

Open src/app/app.module.ts and add the following imports at the top:

githubsrc/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core'
+ import { HttpClientModule } from "@angular/common/http";
+ import { APOLLO_OPTIONS } from "apollo-angular";
+ import { HttpLink } from 'apollo-angular/http';
+ import { InMemoryCache } from '@apollo/client/core';

These are the required apollo dependencies to get started. Now let's define a provider which will return apollo client with httplink and cache.

imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
+ HttpClientModule
],
providers: [{
+ provide: APOLLO_OPTIONS,
+ useFactory: (httpLink: HttpLink) => {
+ return {
+ cache: new InMemoryCache(),
+ link: httpLink.create({
+ uri: 'https://hasura.io/learn/graphql',
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('token')}`
+ }
+ })
+ };
+ },
+ deps: [HttpLink]
}]

Let's try to understand what is happening here.

HttpLink and InMemoryCache

We are creating an HttpLink to connect ApolloClient with the GraphQL server. As you know already, our GraphQL server is running at https://hasura.io/learn/graphql

At the end, we return ApolloClient by passing in our HttpLink and a new instance of InMemoryCache (recommended caching solution). We are wrapping all of this in a function which will return the client.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin