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.
If 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.
Here's what client initialization looks like with Apollo Angular Boost:
To 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
link to the client:
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.
If 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 HttpOptions
Basically, you merge
uri property with an object passed as
This one, you put to
You can pass all the proprieties of the object to
apollo-link-state by also including ApolloCache.
Similar as in clientState, you use the config in
Whatever you have here, just pass it to
That'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!