Setup GraphQL

Setup GraphQL based on your angular project's style.

Standalone

Create provideGraphQL under app/graphql/graphql.provider.ts

HTTP

app/graphql/graphql.provider.ts

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

export function provideGraphQL(): EnvironmentProviders {
  return makeEnvironmentProviders([
    provideApolloOrbit(
      withApolloOptions(() => {
        const httpLinkFactory = inject(HttpLinkFactory);
        const httpLink = httpLinkFactory.create({ uri: 'http://localhost:4000/graphql' })

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

HTTP + Subscriptions

yarn

yarn add graphql-ws

npm

npm install graphql-ws

app/graphql/graphql.provider.ts

import { EnvironmentProviders, inject, makeEnvironmentProviders } from '@angular/core';
import { InMemoryCache, provideApolloOrbit, withApolloOptions } from '@apollo-orbit/angular';
import { HttpLinkFactory, withHttpLink } from '@apollo-orbit/angular/http';
import { split } from '@apollo/client/core';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { createClient } from 'graphql-ws';

export function provideGraphQL(): EnvironmentProviders {
  return makeEnvironmentProviders([
    provideApolloOrbit(
      withApolloOptions(() => {
        const httpLinkFactory = inject(HttpLinkFactory);
        const httpLink = httpLinkFactory.create({ uri: 'http://localhost:4000/graphql' });
        const wsLink = new GraphQLWsLink(createClient({ url: 'ws://localhost:4000/graphql' }));

        return {
          cache: new InMemoryCache(),
          link: split(
            ({ query }) => {
              const definition = getMainDefinition(query);
              return (
                definition.kind === 'OperationDefinition' &&
                definition.operation === 'subscription'
              );
            },
            wsLink,
            httpLink
          )
        };
      }),
      withHttpLink()
    )
  ]);
}

Then import provideGraphQL into appConfig

app/app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideGraphQL } from './graphql/graphql.provider';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideGraphQL()
  ]
};

Module

Create GraphQLModule under app/graphql/graphql.module.ts

HTTP

app/graphql/graphql.module.ts

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

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

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

HTTP + Subscriptions

yarn

yarn add graphql-ws

npm

npm install graphql-ws

app/graphql/graphql.module.ts

import { NgModule, inject } from '@angular/core';
import { InMemoryCache, provideApolloOrbit, withApolloOptions } from '@apollo-orbit/angular';
import { HttpLinkFactory, withHttpLink } from '@apollo-orbit/angular/http';
import { split } from '@apollo/client/core';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { createClient } from 'graphql-ws';

@NgModule({
  providers: [
    provideApolloOrbit(
      withApolloOptions(() => {
        const httpLinkFactory = inject(HttpLinkFactory);
        const httpLink = httpLinkFactory.create({ uri: 'http://localhost:4000/graphql' });
        const wsLink = new GraphQLWsLink(createClient({ url: 'ws://localhost:4000/graphql' }));

        return {
          cache: new InMemoryCache(),
          link: split(
            ({ query }) => {
              const definition = getMainDefinition(query);
              return (
                definition.kind === 'OperationDefinition' &&
                definition.operation === 'subscription'
              );
            },
            wsLink,
            httpLink
          )
        };
      }),
      withHttpLink()
    )
  ]
})
export class GraphQLModule { }

Then import GraphQLModule into AppModule

app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { GraphQLModule } from './graphql/graphql.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    GraphQLModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }