1 | # apollo-boost
|
2 |
|
3 | The fastest, easiest way to get started with Apollo Client!
|
4 |
|
5 | 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.
|
6 |
|
7 | ## Quick start
|
8 |
|
9 | First, install `apollo-boost`. If you don't have `graphql` & `react-apollo` already in your project, please install those too.
|
10 |
|
11 | ```shell
|
12 | npm i apollo-boost graphql react-apollo -S
|
13 | ```
|
14 |
|
15 | 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`.
|
16 |
|
17 | ```js
|
18 | import React from 'react';
|
19 | import { render } from 'react-dom';
|
20 | import ApolloClient from 'apollo-boost';
|
21 | import { ApolloProvider } from 'react-apollo';
|
22 |
|
23 | // Pass your GraphQL endpoint to uri
|
24 | const client = new ApolloClient({ uri: 'https://nx9zvp49q7.lp.gql.zone/graphql' });
|
25 |
|
26 | const ApolloApp = AppComponent => (
|
27 | <ApolloProvider client={client}>
|
28 | <AppComponent />
|
29 | </ApolloProvider>
|
30 | );
|
31 |
|
32 | render(ApolloApp(App), document.getElementById('root'));
|
33 | ```
|
34 |
|
35 | Awesome! Your ApolloClient is now connected to your app. Let's create our `<App />` component and make our first query:
|
36 |
|
37 | ```js
|
38 | import React from 'react';
|
39 | import { gql } from 'apollo-boost';
|
40 | import { Query } from 'react-apollo';
|
41 |
|
42 | const GET_MOVIES = gql`
|
43 | query {
|
44 | movie(id: 1) {
|
45 | id
|
46 | title
|
47 | }
|
48 | }
|
49 | `
|
50 |
|
51 | const 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 |
|
65 | 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.
|
66 |
|
67 | ## What's in Apollo Boost
|
68 |
|
69 | Apollo 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 |
|
77 | 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](https://www.apollographql.com/docs/react/essentials/get-started.html#configuration-options) documentation.
|