UNPKG

2.77 kBMarkdownView Raw
1# apollo-boost
2
3The fastest, easiest way to get started with Apollo Client!
4
5Apollo 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.
6
7## Quick start
8
9First, install `apollo-boost`. If you don't have `graphql` & `react-apollo` already in your project, please install those too.
10
11```shell
12npm i apollo-boost graphql react-apollo -S
13```
14
15Next, create your client. Once you create your client, hook it up to your app by passing it to the `ApolloProvider` exported from `react-apollo`.
16
17```js
18import React from 'react';
19import { render } from 'react-dom';
20import ApolloClient from 'apollo-boost';
21import { ApolloProvider } from 'react-apollo';
22
23// Pass your GraphQL endpoint to uri
24const client = new ApolloClient({ uri: 'https://nx9zvp49q7.lp.gql.zone/graphql' });
25
26const ApolloApp = AppComponent => (
27 <ApolloProvider client={client}>
28 <AppComponent />
29 </ApolloProvider>
30);
31
32render(ApolloApp(App), document.getElementById('root'));
33```
34
35Awesome! Your ApolloClient is now connected to your app. Let's create our `<App />` component and make our first query:
36
37```js
38import React from 'react';
39import { gql } from 'apollo-boost';
40import { Query } from 'react-apollo';
41
42const GET_MOVIES = gql`
43 query {
44 movie(id: 1) {
45 id
46 title
47 }
48 }
49`
50
51const App = () => (
52 <Query query={GET_MOVIES}>
53 {({ loading, error, data }) => {
54 if (loading) return <div>Loading...</div>;
55 if (error) return <div>Error :(</div>;
56
57 return (
58 <Movie title={data.movie.title} />
59 )
60 }}
61 </Query>
62)
63```
64
65Time 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.
66
67## What's in Apollo Boost
68
69Apollo Boost includes some packages that we think are essential to developing with Apollo Client. Here's what's in the box:
70
71- `apollo-client`: Where all the magic happens
72- `apollo-cache-inmemory`: Our recommended cache
73- `apollo-link-http`: An Apollo Link for remote data fetching
74- `apollo-link-error`: An Apollo Link for error handling
75- `graphql-tag`: Exports the `gql` function for your queries & mutations
76
77The 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](https://www.apollographql.com/docs/react/essentials/get-started.html#configuration-options) documentation.