graphql.module.ts

import { NgModule } from '@angular/core';
import { APOLLO_OPTIONS } from 'apollo-angular';
import {
  ApolloClientOptions,
  InMemoryCache,
  split,
  ApolloLink,
} from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';
import { OperationDefinitionNode } from 'graphql';

// Written by TJP based on https://apollo-angular.com/docs/data/subscriptions
// and then fixed up for updated TS and Apollo definitions
// Three options down the bottom

const httpURL = 'http://localhost:8080/v1/graphql'; // <-- add the URL of the GraphQL server here
const wsURL = 'ws://localhost:8080/v1/graphql';

// Standard HTTP
// tslint:disable-next-line: no-any
const createApolloHTTP = (httpLink: HttpLink): ApolloClientOptions<any> => ({
  link: httpLink.create({ uri: httpURL }),
  cache: new InMemoryCache(),
});

// Websockets
// tslint:disable-next-line: no-any
const createApolloWS = (httpLink: HttpLink): ApolloClientOptions<any> => ({
  link: (new WebSocketLink({
    uri: wsURL,
    options: {
      reconnect: true,
    },
  }) as unknown) as ApolloLink,
  cache: new InMemoryCache(),
});

// Standard HTTP and WS depending on request
// tslint:disable-next-line: no-any
const createApolloBoth = (httpLink: HttpLink): ApolloClientOptions<any> => ({
  link: split(
    // split is a function from Apollo to alter the transport protocol based on operation type
    // first argument does some disection of the query and returns a boolean,
    // then the next two arguments return ApolloLink | RequestHandler objects
    ({ query }) => {
      const { kind, operation } = getMainDefinition(
        query
      ) as OperationDefinitionNode;
      return kind === 'OperationDefinition' && operation === 'subscription';
    },
    new WebSocketLink({
      uri: wsURL,
      options: {
        reconnect: true,
      },
    }),
    httpLink.create({
      uri: httpURL,
    })
  ),
  cache: new InMemoryCache(),
});

const apolloClientOptions = createApolloBoth; // <-- set this constant to one of createApolloHTTP, createApolloWS, or createApolloBoth

@NgModule({
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: apolloClientOptions,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

CLI commands:

npx ng new new-application --interactive

choose strict, routing, and SCSS

cd new-application
npx ng add apollo-angular

enter http://localhost:8080/v1/graphql as endpoint

npm install -s apollo-link-ws subscriptions-transport-ws @types/ws @graphql-codegen/cli @graphql-codegen/typescript-apollo-angular

modify graphql.module.ts as above (or adapt accordingly, the above is for websocket, we might want auth)

npx graphql-codegen init

Welcome to GraphQL Code Generator!
Answer few questions and we will setup everything for you.

? What type of application are you building? Application built with Angular
? Where is your schema?: (path or url) http://localhost:8080/v1/graphql
? Where are your operations and fragments?: src/**/*.graphql
? Pick plugins: TypeScript (required by other typescript plugins), TypeScript Operations (operations and fragments), Typ
eScript Apollo Angular (typed GQL services)
? Where to write the output: src/generated/graphql.ts
? Do you want to generate an introspection file? Yes
? How to name the config file? codegen.yml
? What script in package.json should run the codegen? graphql:codegen

npm install

Write a GraphQL file at src/**/*.graphql

Modify codegen.yaml

overwrite: true
schema:
  - "https://smacking.hasura.app/v1/graphql":
      headers:
        X-Hasura-Admin-Secret: "secret-string"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"
  ./graphql.schema.json:
    plugins:
      - "introspection"

npm run graphql:codegen

https://apollo-angular.com/
https://apollo-angular.com/docs/development-and-testing/developer-tools
https://graphql-code-generator.com/docs/getting-started/installation
https://graphql-code-generator.com/docs/plugins/typescript-apollo-angular