apollo-angular

What is apollo-angular?

The apollo-angular package is a comprehensive Angular integration for Apollo Client, which is a popular GraphQL client. It allows Angular developers to easily query, mutate, and subscribe to data from a GraphQL server, manage local state, and handle caching.

What are apollo-angular's main functionalities?

Querying Data

This feature allows you to query data from a GraphQL server. The code sample demonstrates how to define a GraphQL query, use Apollo's watchQuery method to fetch data, and bind the data to the template using Angular's async pipe.

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

const GET_DATA = gql`
  query GetData {
    data {
      id
      name
    }
  }
`;

@Component({
  selector: 'app-data',
  template: `
    <div *ngIf="data$ | async as data">
      <div *ngFor="let item of data.data">
        {{ item.name }}
      </div>
    </div>
  `
})
export class DataComponent implements OnInit {
  data$ = this.apollo.watchQuery({ query: GET_DATA }).valueChanges;

  constructor(private apollo: Apollo) {}

  ngOnInit() {}
}
```

Mutating Data

This feature allows you to perform mutations to modify data on the GraphQL server. The code sample shows how to define a mutation, use Apollo's mutate method to send the mutation, and handle the response.

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

const ADD_ITEM = gql`
  mutation AddItem($name: String!) {
    addItem(name: $name) {
      id
      name
    }
  }
`;

@Component({
  selector: 'app-add-item',
  template: `
    <input [(ngModel)]="itemName" placeholder="Item name" />
    <button (click)="addItem()">Add Item</button>
  `
})
export class AddItemComponent {
  itemName: string = '';

  constructor(private apollo: Apollo) {}

  addItem() {
    this.apollo.mutate({
      mutation: ADD_ITEM,
      variables: { name: this.itemName }
    }).subscribe(result => {
      console.log('Item added', result);
    });
  }
}
```

Subscription

This feature allows you to subscribe to real-time updates from the GraphQL server. The code sample demonstrates how to define a subscription, use Apollo's subscribe method to listen for updates, and bind the data to the template.

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

const NEW_ITEM_SUBSCRIPTION = gql`
  subscription OnNewItem {
    newItem {
      id
      name
    }
  }
`;

@Component({
  selector: 'app-new-item',
  template: `
    <div *ngIf="newItem$ | async as newItem">
      New item: {{ newItem.newItem.name }}
    </div>
  `
})
export class NewItemComponent implements OnInit {
  newItem$ = this.apollo.subscribe({ query: NEW_ITEM_SUBSCRIPTION });

  constructor(private apollo: Apollo) {}

  ngOnInit() {}
}
```

Other packages similar to apollo-angular

urql

urql is a highly customizable and versatile GraphQL client for React and other frameworks. It offers similar functionalities to apollo-angular, such as querying, mutating, and subscribing to data, but is designed to be more lightweight and modular.

relay-runtime

relay-runtime is a core runtime for Relay, a GraphQL client developed by Facebook. It is designed for high-performance applications and offers advanced features like data normalization and efficient caching. While it is more complex to set up compared to apollo-angular, it provides powerful tools for managing GraphQL data.

graphql-request

graphql-request is a minimalistic GraphQL client for Node.js and browsers. It provides a simple API for making GraphQL queries and mutations. Unlike apollo-angular, it does not include advanced features like caching or subscriptions, making it a lightweight alternative for basic use cases.

README

Apollo Angular

Apollo Angular allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the Angular framework. Apollo Angular may be used in any context that Angular may be used. In the browser, in NativeScript, or in Node.js when you want to do server-side rendering.

Apollo Angular requires no complex build setup to get up and running. As long as you have a GraphQL server you can get started building out your application with Angular immediately. Apollo Angular works out of the box with both Angular CLI (ng add apollo-angular) and NativeScript with a single install.

Apollo Angular is:

1. Incrementally adoptable, so that you can drop it into an existing JavaScript app and start using GraphQL for just part of your UI.
2. Universally compatible, so that Apollo works with any build setup, any GraphQL server, and any GraphQL schema.
3. Simple to get started with, so you can start loading data right away and learn about advanced features later.
4. Inspectable and understandable, so that you can have great developer tools to understand exactly what is happening in your app.
5. Built for interactive apps, so your users can make changes and see them reflected in the UI immediately.
6. Small and flexible, so you don't get stuff you don't need. The core is under 12kb compressed.
7. Community driven, because Apollo is driven by the community and serves a variety of use cases. Everything is planned and developed in the open.

Get started today on the app you’ve been dreaming of, and let Apollo Angular take you to the moon!

Installation

It is simple to install Apollo Angular and related libraries

# installing Apollo Angular in Angular CLI
ng add apollo-angular

# installing each piece independently
yarn add @apollo/client apollo-angular graphql

That’s it! You may now use Apollo Angular in any of your Angular environments.

For an amazing developer experience you may also install the Apollo Client Developer tools for Chrome which will give you inspectability into your Apollo Angular data.

• If you are using Apollo-Client v3, please make sure to use apollo-angular@v3

  If you are using Apollo-Client v2, please make sure to use apollo-angular@v1 (and for Angular 10 support, make sure to use v1.10.0)

Usage

Now you may create components that are connected to your GraphQL API.

Finally, to demonstrate the power of Apollo Angular in building interactive UIs let us connect one of your components to your GraphQL server using the Apollo service:

import { Apollo, gql } from 'apollo-angular';
import { map, Observable } from 'rxjs';
import { AsyncPipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

@Component({
  selector: 'dogs',
  template: `
    <ul>
      @for (dog of dogs | async; track dog.id) {
        <li>
          {{ dog.breed }}
        </li>
      }
    </ul>
  `,
})
export class DogsComponent implements OnInit {
  public dogs!: Observable<any>;

  constructor(private readonly apollo: Apollo) {}

  ngOnInit() {
    this.dogs = this.apollo
      .watchQuery({
        query: GET_DOGS,
      })
      .valueChanges.pipe(map(result => result.data && result.data.dogs));
  }
}

To learn more about querying with Apollo Angular be sure to start reading the documentation article on queries.

Documentation

All the documentation for Apollo Angular including usage articles and helpful recipes lives on: https://www.apollo-angular.com/

Contributing

Read the Apollo Contributor Guidelines.

This project uses Lerna.

Bootstrapping:

yarn install

Running tests locally:

yarn test

Formatting code with prettier:

yarn prettier

This project uses TypeScript for static typing. You can get it built into your editor with no configuration by opening this project in Visual Studio Code, an open source IDE which is available for free on all platforms.