Setup and options
#
InstallationThe simplest way to get started with Apollo Angular is by running ng add apollo-angular
command.
#
Installation with Angular SchematicsWe support ng-add
command now.
To start using Apollo Angular simply run:
One thing you need to set is the URL of your GraphQL Server, so open src/app/graphql.module.ts
and set uri
variables:
Done! You can now create your first query, let's go through it together here
#
Installation without Angular SchematicsIf you want to setup Apollo without the help of Angular Schematics, first, let's install some packages:
apollo-client
: Where the magic happensapollo-angular
: Bridge between Angular and Apollo Clientapollo-cache-inmemory
: Our recommended cacheapollo-angular-link-http
: An Apollo Link for remote data fetchinggraphql
: Second most important packagegraphql-tag
: Parses your strings to GraphQL documents
The apollo-client
package requires AsyncIterable
so make sure your tsconfig.json includes esnext.asynciterable
:
Great, now that you have all the dependencies you need, let's create your first Apollo Client.
In our app.module.ts
file use ApolloModule
and APOLLO_OPTIONS
token to configure Apollo Client:
Take a closer look what we did there:
- With
apollo-angular-link-http
andHttpLink
service we connect our client to an external GraphQL Server - Thanks to
apollo-cache-inmemory
andInMemoryCache
we have a place to store data in APOLLO_OPTIONS
provides options to Apollo Client
Apollo's HttpLink requires HttpClient
so that's why we also used HttpClientModule
from @angular/common/http
.
#
Links and CacheApollo Client has a pluggable network interface layer, which can let you configure how queries are sent over HTTP, or replace the whole network part with something completely custom, like a websocket transport, mocked server data, or anything else you can imagine.
One Link that you already have in your application is called apollo-angular-link-http
which uses HTTP to send your queries.
apollo-cache-inmemory
is the default cache implementation for Apollo Client 2.0. InMemoryCache is a normalized data store that supports all of Apollo Client 1.0’s features without the dependency on Redux.
#
Request dataOnce all is hooked up, you're ready to start requesting data with Apollo
service!
Apollo
is an Angular service exported from apollo-angular
to share GraphQL data with your UI.
First, pass your GraphQL query wrapped in the gql
function (from graphql-tag
) to the query
property in the Apollo.watchQuery
method, in your component.
The Apollo
service is a regular angular service available to you, and your data is streamed through Observables.
The watchQuery
method returns a QueryRef
object which has the valueChanges
property that is an Observable
.
An object passed through an Observable contains loading
, error
, and data
properties. Apollo Client tracks error and loading state for you, which will be reflected in the loading
and error
properties. Once the result of your query comes back, it will be attached to the data
property.
It's also possible to fetch data only once. The
query
method ofApollo
service returns anObservable
that also resolves with the same result as above.
Let's create an ExchangeRates
component to see the Apollo
service in action!
#
Basic OperationsIf you want to see how easy it is to fetch data from a GraphQL server with Apollo, you can use the query
method. It is as easy as this:
Congrats, you just made your first query! 🎉 If you render your ExchangeRates
component within your App
component from the previous example, you'll first see a loading indicator and then data on the page once it's ready. Apollo Client automatically caches this data when it comes back from the server, so you won't see a loading indicator if you run the same query twice.
If you'd like to play around with the app we just built, you can view it on StackBlitz. Don't stop there! Try building more components with Apollo
service and experimenting with the concepts you just learned.
#
Next stepsNow that you've learned how to fetch data with Apollo Angular, you're ready to dive deeper into creating more complex queries and mutations. After this section, we recommend moving onto: