Skip to main content

Apollo Link

Overview​

Orbit is compatible with all built-in Apollo Links, with the exception of HTTP and HTTP Batch links. For these, 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, provideApollo, withApolloOptions } from '@apollo-orbit/angular';
import { HttpLinkFactory, withHttpLink } from '@apollo-orbit/angular/http';

...

{ 
  providers: [
    provideApollo(
      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, provideApollo, withApolloOptions } from '@apollo-orbit/angular';
import { BatchHttpLinkFactory, withBatchHttpLink } from '@apollo-orbit/angular/batch-http';

...

{ 
  providers: [
    provideApollo(
      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 Orbit.

Install dependencies​

yarn add --dev crypto-hash

Usage​

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

...

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

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