Configuring Apollo the Angular Way: A Beginner’s Guide

By /

Configuring Apollo the Angular Way: A Beginner’s Guide

If you’re learning Angular and GraphQL, you’ve probably come across Apollo.

At first glance, the architecture looks like this:

Angular
    │
    ▼
Apollo
    │
    ▼
GraphQL Server

Many beginners assume Apollo is GraphQL.

It isn’t.

Apollo is simply a client that knows how to communicate with a GraphQL server.

Let’s understand each piece one concept at a time.

Concept 1 — Apollo Is Not GraphQL

Think about browsing the internet.

You
 │
 ▼
Google Chrome
 │
 ▼
Website

Chrome isn’t the website.

It’s simply the browser that communicates with it.

Apollo works exactly the same way.

Angular
 │
 ▼
Apollo Client
 │
 ▼
GraphQL Server

Apollo doesn’t replace GraphQL.

It simply sends GraphQL requests and receives GraphQL responses.

Concept 2 — Why Does Apollo Need Angular?

Suppose Apollo wants to send a GraphQL query.

Who actually sends the HTTP request?

Not Apollo.

Angular already has an excellent HTTP library.

Apollo
    │
    ▼
HttpClient
    │
    ▼
HTTP POST
    │
    ▼
GraphQL Server

Apollo simply uses Angular’s HttpClient.

That’s why we configure:

provideHttpClient()

before configuring Apollo.

Concept 3 — What Is a Provider?

You’ll often see code like this:

providers: [
  provideRouter(routes),
  provideHttpClient(),
  provideApollo(...)
]

Many beginners think these are just functions.

They’re actually registering services with Angular.

Imagine you’re opening a restaurant.

Before customers arrive, you hire:

  • Chef
  • Waiter
  • Cashier

Once they’re hired, they’re available whenever they’re needed.

Angular works the same way.

Angular Starts
        │
        ▼
Registers Router

Registers HttpClient

Registers Apollo

Later, when a component asks for Apollo…

Angular simply says:

“I’ve already registered one. Here you go.”

Concept 4 — Why Do We Use provideApollo()?

You’ll notice something interesting.

provideApollo(() => {

});

We’re passing a function.

Why not this?

provideApollo({

});

Because Angular doesn’t want to create Apollo immediately.

Instead, it does this:

Application Starts
        │
        ▼
Registers a factory
        │
        ▼
Someone asks for Apollo
        │
        ▼
Now Angular creates Apollo

This is called Lazy Instantiation.

Concept 5 — Why Is Lazy Instantiation Important?

Imagine your application contains:

  • Authentication
  • Maps
  • Payments
  • Analytics
  • GraphQL

Should Angular create all of them when the application starts?

No.

That would waste memory and slow down startup.

Instead, Angular creates services only when they’re first needed.

Concept 6 — What Is inject()?

This line confuses almost every beginner.

const httpLink = inject(HttpLink);

Without Dependency Injection, you might write:

const httpLink = new HttpLink();

Here, you create the object.

Angular encourages a different approach.

const httpLink = inject(HttpLink);

Now Angular creates it for you.

Notice the pattern.

Don’t create. Request.

That’s one of Angular’s core philosophies.

Concept 7 — What Is HttpLink?

Imagine Apollo is a delivery company.

A package is ready.

How does it reach its destination?

It needs transportation.

That’s exactly what HttpLink provides.

Apollo
    │
    ▼
HttpLink
    │
    ▼
HTTP POST
    │
    ▼
GraphQL Server

HttpLink knows:

  • The GraphQL endpoint URL
  • HTTP method
  • Headers
  • Authentication details

Without HttpLink, Apollo has no idea where to send requests.

Concept 8 — What Is InMemoryCache?

This is one of Apollo’s biggest features.

Suppose your Home page requests a list of posts.

Apollo stores the response.

Memory
    │
    ▼
Posts

Later, another page requests the same data.

Apollo checks its cache first.

Cache
    │
    ▼
Already Available
    │
    ▼
Return Immediately

No HTTP request.

No waiting.

The application feels much faster.

Concept 9 — What Happens During a Real Request?

The first request looks like this:

Home Component
        │
        ▼
PostsService
        │
        ▼
Apollo
        │
        ▼
Cache?
        │
        ▼
No
        │
        ▼
HttpLink
        │
        ▼
HTTP POST
        │
        ▼
GraphQL Server
        │
        ▼
JSON Response
        │
        ▼
Apollo Cache
        │
        ▼
Component

The second time:

Home Component
        │
        ▼
Apollo
        │
        ▼
Cache
        │
        ▼
Return Cached Data

No network request is needed because Apollo already has the data.

Concept 10 — Putting Everything Together

Angular
        │
        ▼
Dependency Injection
        │
        ▼
provideApollo()
        │
        ▼
Apollo Client
        │
        ▼
HttpLink
        │
        ▼
HttpClient
        │
        ▼
GraphQL Server
        │
        ▼
JSON Response
        │
        ▼
InMemoryCache
        │
        ▼
Angular Component

Each piece has a clear responsibility:

  • Angular manages dependencies.
  • Apollo Client manages GraphQL operations.
  • HttpLink sends GraphQL requests.
  • HttpClient performs the HTTP call.
  • GraphQL Server processes the query.
  • InMemoryCache stores results for faster future requests.

Final Thoughts

Apollo isn’t GraphQL, and it isn’t a replacement for Angular’s HttpClient.

Think of Apollo as a smart messenger.

Angular provides it through Dependency Injection.

HttpClient performs the network request.

HttpLink knows where to send it.

The GraphQL server returns the data.

InMemoryCache stores the response so future requests are nearly instant.

Once you understand the responsibility of each piece, Apollo becomes much easier to learn.

Scroll to Top