Need help with apollo-angular?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kamilkisiela
1.1K Stars 253 Forks MIT License 1.4K Commits 39 Opened issues

Description

A fully-featured, production ready caching GraphQL client for Angular and every GraphQL server ğŸŽ

Services available

!
?

Need anything else?

Contributors list

# 12,356
GraphQL
meteor
webrtc
slack
443 commits
# 12,325
Twitch
GraphQL
apollo-...
apollo-...
27 commits
# 16,290
GraphQL
dateran...
datetim...
graphql...
27 commits
# 84
netlify
TypeScr...
GraphQL
angular...
14 commits
# 8,038
GraphQL
npm
meteor
angular...
10 commits
# 1,196
GraphQL
meteor
MongoDB
npm
8 commits
# 146,745
Angular
GraphQL
Go
oauth2
7 commits
# 1,323
Storybo...
GraphQL
TypeScr...
npm
5 commits
# 50,011
TypeScr...
Angular
GraphQL
ng-zorr...
5 commits
# 1,068
GraphQL
apollog...
meteor
MongoDB
5 commits
# 79,285
markers
ionic
meteor
node
4 commits
# 3,238
GraphQL
apollog...
apollo-...
meteor
4 commits
# 300,139
CSS
Shell
loopbac...
Angular
3 commits
# 4,334
PHP
libreof...
ods
excel
3 commits
# 403,890
Shell
CSS
Angular
apollo-...
3 commits
# 405,319
Shell
CSS
Angular
apollo-...
3 commits
# 154,726
CSS
Shell
Angular
GraphQL
3 commits
# 345,005
GraphQL
api-man...
Shell
CSS
2 commits
# 185
TypeScr...
sqlserv...
SQLite
typeorm
2 commits
# 3,758
TypeScr...
polymer
React N...
Kotlin
2 commits

Angular

Apollo Angular npm version

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
    [email protected]
    > If you are using Apollo-Client v2, please make sure to use
    [email protected]
    (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 {Component, OnInit} from '@angular/core';
import {Apollo, gql} from 'apollo-angular';

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

@Component({ selector: 'dogs', template: </pre><ul> <li dog of dogs async> {{dog.breed}} </li> </ul> , }) export class DogsComponent implements OnInit { dogs: Observable;

constructor(private 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 of 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.

Bootstraping:

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.