1 | [![Angular](https://user-images.githubusercontent.com/25294569/63955021-b99fca80-ca8c-11e9-9362-1ee8083edd2e.gif)](https://www.apollo-angular.com/)
|
2 |
|
3 | # [Apollo Angular](https://www.apollo-angular.com/) [![npm version](https://badge.fury.io/js/apollo-angular.svg)](https://badge.fury.io/js/apollo-angular)
|
4 |
|
5 | Apollo Angular allows you to fetch data from your GraphQL server and use it in building complex and
|
6 | reactive UIs using the Angular framework. Apollo Angular may be used in any context that Angular may
|
7 | be used. In the browser, in NativeScript, or in Node.js when you want to do server-side rendering.
|
8 |
|
9 | Apollo Angular requires _no_ complex build setup to get up and running. As long as you have a
|
10 | GraphQL server you can get started building out your application with Angular immediately. Apollo
|
11 | Angular works out of the box with both [Angular CLI](https://cli.angular.io/)
|
12 | (`ng add apollo-angular`) and [NativeScript](https://www.nativescript.org/) with a single install.
|
13 |
|
14 | Apollo Angular is:
|
15 |
|
16 | 1. **Incrementally adoptable**, so that you can drop it into an existing JavaScript app and start
|
17 | using GraphQL for just part of your UI.
|
18 | 1. **Universally compatible**, so that Apollo works with any build setup, any GraphQL server, and
|
19 | any GraphQL schema.
|
20 | 1. **Simple to get started with**, so you can start loading data right away and learn about advanced
|
21 | features later.
|
22 | 1. **Inspectable and understandable**, so that you can have great developer tools to understand
|
23 | exactly what is happening in your app.
|
24 | 1. **Built for interactive apps**, so your users can make changes and see them reflected in the UI
|
25 | immediately.
|
26 | 1. **Small and flexible**, so you don't get stuff you don't need. The core is under 12kb compressed.
|
27 | 1. **Community driven**, because Apollo is driven by the community and serves a variety of use
|
28 | cases. Everything is planned and developed in the open.
|
29 |
|
30 | Get started today on the app you’ve been dreaming of, and let Apollo Angular take you to the moon!
|
31 |
|
32 | ## Installation
|
33 |
|
34 | It is simple to install Apollo Angular and related libraries
|
35 |
|
36 | ```bash
|
37 | # installing Apollo Angular in Angular CLI
|
38 | ng add apollo-angular
|
39 |
|
40 | # installing each piece independently
|
41 | yarn add @apollo/client apollo-angular graphql
|
42 | ```
|
43 |
|
44 | That’s it! You may now use Apollo Angular in any of your Angular environments.
|
45 |
|
46 | For an amazing developer experience you may also install the
|
47 | [Apollo Client Developer tools for Chrome](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm)
|
48 | which will give you inspectability into your Apollo Angular data.
|
49 |
|
50 | - If you are using Apollo-Client v3, please make sure to use `apollo-angular@v3`
|
51 | > If you are using Apollo-Client v2, please make sure to use `apollo-angular@v1` (and for Angular
|
52 | > 10 support, make sure to use `v1.10.0`)
|
53 |
|
54 | ## Usage
|
55 |
|
56 | Now you may create components that are connected to your GraphQL API.
|
57 |
|
58 | Finally, to demonstrate the power of Apollo Angular in building interactive UIs let us connect one
|
59 | of your components to your GraphQL server using the `Apollo` service:
|
60 |
|
61 | ```ts
|
62 | import { Apollo, gql } from 'apollo-angular';
|
63 | import { Component, OnInit } from '@angular/core';
|
64 |
|
65 | const GET_DOGS = gql`
|
66 | {
|
67 | dogs {
|
68 | id
|
69 | breed
|
70 | }
|
71 | }
|
72 | `;
|
73 |
|
74 | @Component({
|
75 | selector: 'dogs',
|
76 | template: `
|
77 | <ul>
|
78 | <li *ngFor="let dog of dogs | async">
|
79 | {{ dog.breed }}
|
80 | </li>
|
81 | </ul>
|
82 | `,
|
83 | })
|
84 | export class DogsComponent implements OnInit {
|
85 | dogs: Observable<any>;
|
86 |
|
87 | constructor(private apollo: Apollo) {}
|
88 |
|
89 | ngOnInit() {
|
90 | this.dogs = this.apollo
|
91 | .watchQuery({
|
92 | query: GET_DOGS,
|
93 | })
|
94 | .valueChanges.pipe(map(result => result.data && result.data.dogs));
|
95 | }
|
96 | }
|
97 | ```
|
98 |
|
99 | To learn more about querying with Apollo Angular be sure to start reading the
|
100 | [documentation article on queries](https://apollo-angular.com/docs/data/queries/).
|
101 |
|
102 | ## Documentation
|
103 |
|
104 | All the documentation for Apollo Angular including usage articles and helpful recipes lives on:
|
105 | [https://www.apollo-angular.com/](https://www.apollo-angular.com/)
|
106 |
|
107 | ## Contributing
|
108 |
|
109 | [Read the Apollo Contributor Guidelines.](CONTRIBUTING.md)
|
110 |
|
111 | This project uses Lerna.
|
112 |
|
113 | Bootstrapping:
|
114 |
|
115 | ```bash
|
116 | yarn install
|
117 | ```
|
118 |
|
119 | Running tests locally:
|
120 |
|
121 | ```bash
|
122 | yarn test
|
123 | ```
|
124 |
|
125 | Formatting code with prettier:
|
126 |
|
127 | ```bash
|
128 | yarn prettier
|
129 | ```
|
130 |
|
131 | This project uses TypeScript for static typing. You can get it built into your editor with no
|
132 | configuration by opening this project in [Visual Studio Code](https://code.visualstudio.com/), an
|
133 | open source IDE which is available for free on all platforms.
|