apollo-boost
The fastest, easiest way to get started with Apollo Client!
Apollo Boost is a zero-config way to start using Apollo Client. It includes some sensible defaults, such as our recommended InMemoryCache
and HttpLink
, which come configured for you with our recommended settings.
Quick start
First, install apollo-boost
. If you don't have graphql
& react-apollo
already in your project, please install those too.
npm i apollo-boost graphql react-apollo -S
Next, create your client. Once you create your client, hook it up to your app by passing it to the ApolloProvider
exported from react-apollo
.
;;;; // Pass your GraphQL endpoint to uriconst client = uri: 'https://nx9zvp49q7.lp.gql.zone/graphql' ; const ApolloApp = <ApolloProvider client=client> <AppComponent /> </ApolloProvider>; ;
Awesome! Your ApolloClient is now connected to your app. Let's create our <App />
component and make our first query:
;;; const GET_MOVIES = gql` query { movie(id: 1) { id title } }` const App = <Query query=GET_MOVIES> { if loading return <div>Loading...</div>; if error return <div>Error :</div>; return <Movie title=datamovietitle /> }} </Query>
Time to celebrate! 🎉 You just made your first Query component. The Query component binds your GraphQL query to your UI so Apollo Client can take care of fetching your data, tracking loading & error states, and updating your UI via the data
prop.
What's in Apollo Boost
Apollo Boost includes some packages that we think are essential to developing with Apollo Client. Here's what's in the box:
apollo-client
: Where all the magic happensapollo-cache-inmemory
: Our recommended cacheapollo-link-http
: An Apollo Link for remote data fetchingapollo-link-error
: An Apollo Link for error handlinggraphql-tag
: Exports thegql
function for your queries & mutations
The awesome thing about Apollo Boost is that you don't have to set any of this up yourself! Just specify a few options if you'd like to use these features and we'll take care of the rest. For a full list of available options, please refer to the Apollo Boost configuration options documentation.