Repository files navigation

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

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

Apollo Angular is:

1. Incrementally adoptable, so that you can drop it into an existing JavaScript app and startusing GraphQL for just part of your UI.
2. Universally compatible, so that Apollo works with any build setup, any GraphQL server, andany GraphQL schema.
3. Simple to get started with, so you can start loading data right away and learn about advancedfeatures later.
4. Inspectable and understandable, so that you can have great developer tools to understandexactly what is happening in your app.
5. Built for interactive apps, so your users can make changes and see them reflected in the UIimmediately.
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 usecases. 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!

It is simple to install Apollo Angular and related libraries

# installing Apollo Angular in Angular CLIng add apollo-angular# installing each piece independentlyyarn 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 theApollo Client Developer tools for Chromewhich will give you inspectability into your Apollo Angular data.

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

  If you are using Apollo-Client v2, please make sure to useapollo-angular@v1 (and for Angular10 support, make sure to usev1.10.0)

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 oneof your components to your GraphQL server using theApollo service:

import{Apollo,gql}from'apollo-angular';import{map,Observable}from'rxjs';import{AsyncPipe}from'@angular/common';import{Component,OnInit}from'@angular/core';constGET_DOGS=gql`  {    dogs {      id      breed    }  }`;@Component({selector:'dogs',template:`    <ul>      @for (dog of dogs | async; track dog.id) {        <li>          {{ dog.breed }}        </li>      }    </ul>  `,})exportclassDogsComponentimplementsOnInit{publicdogs!:Observable<any>;constructor(privatereadonlyapollo: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 thedocumentation article on queries.

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

Read the Apollo Contributor Guidelines.

This project uses Lerna.

Bootstrapping:

yarn install

Running tests locally:

yarntest

Formatting code with prettier:

yarn prettier

This project uses TypeScript for static typing. You can get it built into your editor with noconfiguration by opening this project inVisual Studio Code, anopen source IDE which is available for free on all platforms.