Zero-config Apollo + GraphQL with Apollo Boost
In this lesson I refactor a simple application built with Apollo, GraphQL, and React to utilize Apollo Boost. Apollo Boost combines many of the Apollo libraries we had to import and configure separately into one awesome API.
Resources:
Instructor: [00:00] I have a very small application that displays the country and flag of a given IP address. I'm using a public GraphQL API to retrieve country information, Apollo to handle interacting with the service and to manage state, and React to render everything to the screen.
[00:18] I won't go into all the details of how each component works in this example, but I am going to refactor it to use Apollo Boost to help simplify the setup. As you can see in my code, I'm importing like six different libraries here -- Apollo Client, React Apollo, Apollo Link, Apollo Link HTTP, Apollo Cache In Memory, and Apollo Link State.
[00:38] I'm also leveraging these libraries to do some local state and mutations, setting up the Apollo client with our state and endpoint, and finally, passing the client to the Apollo provider to leverage the greatness that is Apollo.
[00:49] Apollo Boost allows us to simplify this boilerplate by combining many of these libraries into one awesome API. First I'll remove the unnecessary imports and add one for Apollo Boost.
[00:59] We can get rid of these, and Apollo Client actually comes from Apollo Boost now, so we'll go ahead and change it to this. Next we'll remove the manual setup of InMemoryCache and withClientState. Apollo Boost sets these up for us out of the box so we don't have to.
[01:13] I'm going to go ahead and common out the default state and resolvers to use in just a second. Apollo Client is greatly simplified. Just pass it at endpoint and clientState and be on your way.
[01:24] Apollo Boost comes with a number of options for you to customize the setup. You can do this without pulling in each individual package, so definitely check out the docs.