Apollo Angular Boost migration
Apollo Angular Boost is a great way to get started with Apollo Angular quickly, but there are some advanced features it doesn't support out of the box. If you'd like to use subscriptions, swap out the Apollo cache, or add an existing Apollo Link to your network stack that isn't already included, you will have to set Apollo Angular up manually.
We're working on an eject feature (maybe Angular's schematic) for Apollo Angular Boost that will make migration easier in the future, but for now, let's walk through how to migrate off of Apollo Boost.
#
Basic migrationIf you're not using any configuration options on Apollo Angular Boost, migration should be relatively simple. All you will have to change is the file where you initialize Apollo.
#
BeforeHere's what client initialization looks like with Apollo Angular Boost:
#
AfterTo create a basic client with the same defaults as Apollo Angular Boost, first you need to install some packages:
- apollo-client - core functionality for Apollo ecosystem
- apollo-angular - Angular integration
- apollo-cache-inmemory - basic, most popular cache
- apollo-angular-link-http - allows to make requests through Angular's HttpClient
- graphql-tag - a small utility to parse strings into GraphQL Documents
- graphql - base functionality for everything
To complete the process, you'll need to manually attach your cache
and link
to the client:
The InMemoryCache
is our recommended cache implementation for Apollo Client. The HttpLink
is an Apollo Link that sends HTTP requests through Angular's HttpClient. Your network stack can be made up of one or more links, which you can chain together to create a customizable network stack. Learn more in our network layer guide or the Apollo Link docs.
#
Advanced migrationIf you are using configuration options on Apollo Angular Boost, your migration path will vary depending on which ones you use.
Type your configuration options object as ApolloClientOptions so you can use IntelliSense features on your editor.
We will try to step by step eject each configuration.
#
uri and HttpOptionsBasically, you merge uri
property with an object passed as httpOptions
:
Become:
This one, you put to HttpLink.create()
.
#
clientStateYou can pass all the proprieties of the object to apollo-link-state
by also including ApolloCache.
#
onErrorSimilar as in clientState, you use the config in apollo-link-error
.
#
cacheRedirectsWhatever you have here, just pass it to apollo-cache-inmemory
.
#
SummaryThat's it! If something is hard to think about or understand feel free to open an issue, we will help you and by doing this you will help others!