apollo-angular

library14.0.0jsnpmunverified

Apollo Angular is the official Angular integration for Apollo Client, enabling reactive GraphQL queries, mutations, and subscriptions in Angular applications. Version 14.0.0 targets Angular 19–21 and Apollo Client 4+, with RxJS 7+. It ships full TypeScript definitions, follows Angular's async pipe pattern, and provides schematic generators for rapid setup. Unlike generic GraphQL clients, it leverages Angular's dependency injection and zone.js for seamless change detection. Release cadence is aligned with Angular major versions, typically semver-major every 6–12 months.

devops

npm install apollo-angular

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · APOLLO-ANGULAR

apollo-angular

devopsjavascriptv14.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ApolloModule

✓ import { ApolloModule } from 'apollo-angular'

✗ import ApolloModule from 'apollo-angular'

Named export, not default. Required for NgModule setup.

APOLLO_OPTIONS

✓ import { APOLLO_OPTIONS } from 'apollo-angular'

Injection token for ApolloClient options.

Apollo

✓ import { Apollo } from 'apollo-angular'

✗ import Apollo from 'apollo-angular'

Named export, not default.

QueryRef

✓ import { QueryRef } from 'apollo-angular'

Used for type annotations on watchQuery results.

gql

✓ import { gql } from '@apollo/client'

✗ import { gql } from 'apollo-angular'

gql template literal tag is re-exported from @apollo/client, not from apollo-angular.

Sets up Apollo Client with Angular DI and shows a basic query component using watchQuery and async pipe.

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular'; import { HttpLink } from 'apollo-angular/http'; import { InMemoryCache } from '@apollo/client/core'; @NgModule({ imports: [BrowserModule, ApolloModule], providers: [ { provide: APOLLO_OPTIONS, useFactory: (httpLink: HttpLink) => ({ cache: new InMemoryCache(), link: httpLink.create({ uri: 'https://api.example.com/graphql' }) }), deps: [HttpLink] } ] }) export class AppModule {} // Component usage import { Component } from '@angular/core'; import { Apollo, gql } from 'apollo-angular'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; const GET_DATA = gql` query GetData { data } `; @Component({ selector: 'app-example', template: '<div *ngIf="data$ | async as data">{{ data }}</div>' }) export class ExampleComponent { data$: Observable<any>; constructor(private apollo: Apollo) { this.data$ = this.apollo.watchQuery({ query: GET_DATA }).valueChanges.pipe( map(result => result.data) ); } }

Debug

Known issues

breakingApollo Angular v14 requires @apollo/client ^4.0.1. Older v3.x of @apollo/client is not compatible.

fix

Update @apollo/client to ^4.0.1.

affects: >=14.0.0

breakingApollo Angular v14 requires Angular 19+. Applications on Angular <19 cannot use this version.

fix

Upgrade to Angular 19, 20, or 21.

affects: >=14.0.0

gotchaDo not import gql from apollo-angular; it is not re-exported. Import from @apollo/client instead.

fix

Use 'import { gql } from '@apollo/client'.

affects: >=1.0.0

deprecatedThe use of 'Apollo.watchQuery' with direct subscription (without valueChanges) is deprecated. Use valueChanges property.

fix

Use .valueChanges observable instead of manually subscribing to QueryRef.

affects: >=2.0.0

gotchaFor HTTP link, you must add 'HttpLink' to providers? Actually HttpLink is injected via its own provider from apollo-angular/http. Ensure you import HttpLinkModule or provide HttpLink correctly.

fix

Import { HttpLinkModule } from 'apollo-angular/http' or add HttpLink to providers using factory.

affects: >=1.0.0

Errors

Common errors & fixes

NullInjectorError: No provider for HttpLink!

HttpLink is not provided in the module.

fix

Add HttpLink to providers in your module: providers: [HttpLink] or import ApolloModule with http link configuration.

Cannot find namespace 'gql'.

gql is imported from wrong package.

fix

Change import to: import { gql } from '@apollo/client';

Property 'valueChanges' does not exist on type 'QueryRef<...>'.

Using an older version of apollo-angular where valueChanges was not available.

fix

Update apollo-angular to at least v2.0.0, or use .watchQuery().valueChanges is only on newer versions.

TypeError: Cannot read properties of undefined (reading 'watchQuery')

Apollo service not properly injected due to missing ApolloModule import.

fix

Import ApolloModule in your root module or standalone component as needed.

Upgrade

Version history

14.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

17 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/the-guild-org/apollo-angular ↗

packageapollo-angular ↗

homepagehttps://www.apollo-angular.com/ ↗