Skip to main content

Apollo Link

Overview​

Apollo Orbit is compatible with all built-in Apollo Links, with the exception of HTTP and HTTP Batch links. For these, Apollo Orbit provides its own implementation that leverages Angular's HttpClient. This allows for the use of Angular's built-in features such as HttpInterceptors, TransferState, etc...

HttpLink is a terminating link that sends a GraphQL operation to a remote endpoint over HTTP.

It is registered using withHttpLink feature, which provides a HttpLinkFactory function that can be used to create an instance of HttpLink.

Usage​

import { NgModule, inject } from '@angular/core';
import { InMemoryCache, provideApolloOrbit, withApolloOptions } from '@apollo-orbit/angular';
import { HttpLinkFactory, withHttpLink } from '@apollo-orbit/angular/http';

...

{ 
  providers: [
    provideApolloOrbit(
      withApolloOptions(() => {
        const httpLinkFactory = inject(HttpLinkFactory);
        const httpLink = httpLinkFactory.create({ uri: 'http://localhost:4000/graphql' });

        return {
          cache: new InMemoryCache(),
          link: httpLink
        };
      }),
      withHttpLink()
    )
  ]
}

BatchHttpLink is a terminating link that batches an array of individual GraphQL operations into a single HTTP request that's sent to a single GraphQL endpoint.

It is registered using withHttpLink feature, which provides a BatchHttpLinkFactory function that can be used to create an instance of BatchHttpLink.

Usage​

import { NgModule, inject } from '@angular/core';
import { InMemoryCache, provideApolloOrbit, withApolloOptions } from '@apollo-orbit/angular';
import { BatchHttpLinkFactory, withBatchHttpLink } from '@apollo-orbit/angular/batch-http';

...

{ 
  providers: [
    provideApolloOrbit(
      withApolloOptions(() => {
        const batchHttpLinkFactory = inject(BatchHttpLinkFactory);
        const batchHttpLink = batchHttpLinkFactory.create({ uri: 'http://localhost:4000/graphql' });

        return {
          cache: new InMemoryCache(),
          link: batchHttpLink
        };
      }),
      withBatchHttpLink()
    )
  ]
}

This link does not require a specific Angular implementation and works as-is with Apollo Orbit.

Install dependencies​

yarn add --dev crypto-hash

Usage​

import { NgModule, inject } from '@angular/core';
import { InMemoryCache, provideApolloOrbit, withApolloOptions } from '@apollo-orbit/angular';
import { HttpLinkFactory, withHttpLink } from '@apollo-orbit/angular/http';
import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries';
import { sha256 } from 'crypto-hash';

...

{ 
  providers: [
    provideApolloOrbit(
      withApolloOptions(() => {
        const httpLinkFactory = inject(HttpLinkFactory);
        const httpLink = httpLinkFactory.create({ uri: 'http://localhost:4000/graphql' });

        return {
          cache: new InMemoryCache(),
          link: createPersistedQueryLink({ sha256 }).concat(httpLink)
        };
      }),
      withHttpLink()
    )
  ]
}