This short set of instructions gets you up and running with Apollo Angular.
The simplest way to get started with Apollo Angular is by running
ng add apollo-angular command.
Installation with Angular Schematics
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
Done! You can now create your first query, let's go through it together here
Installation without Angular Schematics
If you want to setup Apollo without the help of Angular Schematics, first, let's install some packages:
@apollo/client: Where the magic happens
apollo-angular: Bridge between Angular and Apollo Client
graphql: Second most important package
@apollo/client package requires
AsyncIterable so make sure your tsconfig.json includes
Great, now that you have all the dependencies you need, let's create your first Apollo Client.
app.module.ts file use
APOLLO_OPTIONS token to configure Apollo:
Take a closer look what we did there:
HttpLinkservice we connect our client to an external GraphQL Server
- Thanks to
InMemoryCachewe have a place to store data in
APOLLO_OPTIONSprovides options to Apollo Client
HttpClient so that's why we also used
Links and Cache
Apollo Angular 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
HttpLink which uses HTTP to send your queries.
InMemoryCache is the default cache implementation for Apollo Client 3.0.
Once all is hooked up, you're ready to start requesting data with
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
@apollo/client/core) to the
query property in the
Apollo.watchQuery method, in your component.
Apollo service is a regular angular service available to you, and your data is streamed through Observables.
watchQuery method returns a
QueryRef object which has the
property that is an
An object passed through an Observable contains
data properties. Apollo Client tracks error and loading state for you, which will be reflected in the
error properties. Once the result of your query comes back, it will be attached to the
It's also possible to fetch data only once. The
Apolloservice returns an
Observablethat also resolves with the same result as above.
Let's create an
ExchangeRates component to see the
Apollo service in action!
If 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.
It is possible to have several apollo clients in the application, for example pointing to different endpoints.
app.module.ts file use
APOLLO_OPTIONS token to configure Apollo Client:
Now 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:
- Queries: Learn how to fetch queries with arguments and dive deeper into configuration options..
- Mutations: Learn how to update data with mutations and when you'll need to update the Apollo cache.