Autoplay

    Zero-config Apollo + GraphQL with Apollo Boost

    Andrew Del PreteAndrew Del Prete

    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:

    What's in Apollo Boost

    Zero config GraphQL State Management

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss