Apollo Angular Signal

A lightweight Angular library that converts Apollo GraphQL queries into Angular signals, enabling seamless integration between Apollo Client and Angular's signal-based reactive programming.

Installation

``bash
npm install apollo-angular-signal
`

What It Does

This library takes Apollo Angular ObservableQuery results and transforms them into Angular signals, providing a more idiomatic way to work with GraphQL data in modern Angular applications.

Usage

$3

`typescript
import { Component, inject } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { gqlQuery } from 'apollo-angular-signal';

const GET_USERS = gql
query GetUsers {
users {
id
name
email
}
}
;

@Component({
selector: 'app-users',
template:
@if (users().loading) {

}
@if (users().hasError) {

}
@if (users().data) {

@for (user of users().data.users; track user.id) {

• {{ user.name }} - {{ user.email }}

}

}

})
export class UsersComponent {
private apollo = inject(Apollo);

users = gqlQuery<{ users: Array<{ id: string; name: string; email: string }> }>(
this.apollo.watchQuery({
query: GET_USERS
}).valueChanges
);
}
`

$3

`typescript
import { Component, inject, signal } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { gqlQuery } from 'apollo-angular-signal';

const GET_USER = gql
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
}
}
;

@Component({
selector: 'app-user-detail',
template:


@if (user().loading) {

}
@if (user().data) {

}

})
export class UserDetailComponent {
private apollo = inject(Apollo);

userId = signal('1');

// Reactive query that re-executes when userId changes
user = gqlQuery<{ user: { id: string; name: string; email: string } }>(() => {
const id = this.userId();
if (!id) return null;

return this.apollo.watchQuery({
query: GET_USER,
variables: { id }
}).valueChanges;
});
}
`

$3

`typescript
import { Component, inject } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { gqlQuery } from 'apollo-angular-signal';

const MESSAGE_SUBSCRIPTION = gql
subscription OnMessageAdded {
messageAdded {
id
text
author
}
}
;

@Component({
selector: 'app-messages',
template:
@if (messages().data) {

}

})
export class MessagesComponent {
private apollo = inject(Apollo);

messages = gqlQuery<{ messageAdded: { id: string; text: string; author: string } }>(
this.apollo.subscribe({
query: MESSAGE_SUBSCRIPTION
})
);
}
`

$3

The GqlSignalStatus component simplifies handling loading and error states with a declarative approach:

`typescript
import { Component, inject } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { gqlQuery, GqlSignalStatus } from 'apollo-angular-signal';

const GET_USERS = gql
query GetUsers {
users {
id
name
email
}
}
;

@Component({
selector: 'app-users',
imports: [GqlSignalStatus],
template:

Loading users...

Failed to load users

@for (user of users().data?.users; track user.id) {

• {{ user.name }} - {{ user.email }}

}


})
export class UsersComponent {
private apollo = inject(Apollo);

users = gqlQuery<{ users: Array<{ id: string; name: string; email: string }> }>(
this.apollo.watchQuery({
query: GET_USERS
}).valueChanges
);
}
`

Features:
- Automatically shows loading state while query is in progress
- Displays error state if query fails
- Renders main content when data is available
- Supports custom loading and error templates via gqlLoading and gqlError attributes
- Falls back to global defaults if no custom templates provided

$3

You can configure default loading and error templates globally:

`typescript
import { ApplicationConfig } from '@angular/core';
import { provideGqlSignalConfig } from 'apollo-angular-signal';

// With string templates
export const appConfig: ApplicationConfig = {
providers: [
provideGqlSignalConfig({
loadingDefaultTemplate: 'Loading...',
errorDefaultTemplate: 'An error occurred'
})
]
};

// Or with component templates
import { LoadingSpinnerComponent } from './loading-spinner.component';
import { ErrorMessageComponent } from './error-message.component';

export const appConfig: ApplicationConfig = {
providers: [
provideGqlSignalConfig({
loadingDefaultTemplate: LoadingSpinnerComponent,
errorDefaultTemplate: ErrorMessageComponent
})
]
};
`

API

$3

Converts an Apollo query/subscription observable into an Angular signal.

Parameters:
- query: Either an Observable> or a function returning one (for reactive queries)

Returns:
A Signal> where GqlSignalResult contains:
- data?: T - The query result data
- loading: boolean - Loading state
- hasError: boolean - Whether an error occurred
- error?: unknown - Error object if present

Two modes:

1. Static mode: Pass observable directly
`typescript
gqlQuery(apollo.watchQuery({ query: GET_DATA }).valueChanges)
`

2. Reactive mode: Pass a function for reactive re-execution
`typescript
gqlQuery(() => {
const id = someSignal();
return apollo.watchQuery({ query: GET_DATA, variables: { id } }).valueChanges;
})
``

License

MIT