# apollo-boost

> The easiest way to get started with Apollo Client

Latest version **0.4.9** (published 2020-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install apollo-boost
pnpm add apollo-boost
yarn add apollo-boost
bun add apollo-boost
```

## Health

**Score 50/100 (C)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.4.9 |
| Published | 2020-05-14 |
| First published | 2018-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 75.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19803 |
| Author | Peggy Rayzis |
| Maintainers | apollo-bot, benjamn, jbaxleyiii, peggyrayzis |

## Links

- npm: https://www.npmjs.com/package/apollo-boost
- Repository: https://github.com/apollographql/apollo-client
- Homepage: https://github.com/apollographql/apollo-client#readme
- Issues: https://github.com/apollographql/apollo-client/issues
- npm.io page: https://npm.io/package/apollo-boost

## Dependencies (9)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0
- [apollo-link](https://npm.io/package/apollo-link.md) ^1.0.6
- [graphql-tag](https://npm.io/package/graphql-tag.md) ^2.4.2
- [apollo-cache](https://npm.io/package/apollo-cache.md) ^1.3.5
- [ts-invariant](https://npm.io/package/ts-invariant.md) ^0.4.0
- [apollo-client](https://npm.io/package/apollo-client.md) ^2.6.10
- [apollo-link-http](https://npm.io/package/apollo-link-http.md) ^1.3.1
- [apollo-link-error](https://npm.io/package/apollo-link-error.md) ^1.0.3
- [apollo-cache-inmemory](https://npm.io/package/apollo-cache-inmemory.md) ^1.6.6

## Recent versions

- 0.4.9 (latest) — 2020-05-14
- 0.4.9-test.0 (test) — 2020-05-14
- 0.4.0-rc.3 (beta) — 2019-05-21
- 0.3.0-rc.3 (next) — 2019-02-26
- 0.3.0-alpha.12 (alpha) — 2019-01-14
- 0.4.8 — 2020-05-09
- 0.4.7 — 2019-12-14
- 0.4.6 — 2019-12-14
- 0.4.4 — 2019-08-10
- 0.4.3 — 2019-06-18
- 0.4.2 — 2019-06-06
- 0.4.1 — 2019-06-04
- 0.4.0 — 2019-05-21
- 0.4.0-rc.2 — 2019-05-10
- 0.4.0-rc.1 — 2019-05-06
- … 88 more at https://npm.io/package/apollo-boost/versions

## README

# 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.

```shell
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`.

```js
import React from 'react';
import { render } from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

// Pass your GraphQL endpoint to uri
const client = new ApolloClient({ uri: 'https://nx9zvp49q7.lp.gql.zone/graphql' });

const ApolloApp = AppComponent => (
  <ApolloProvider client={client}>
    <AppComponent />
  </ApolloProvider>
);

render(ApolloApp(App), document.getElementById('root'));
```

Awesome! Your ApolloClient is now connected to your app. Let's create our `<App />` component and make our first query:

```js
import React from 'react';
import { gql } from 'apollo-boost';
import { Query } from 'react-apollo';

const GET_MOVIES = gql`
  query {
    movie(id: 1) {
      id
      title
    }
  }
`

const App = () => (
  <Query query={GET_MOVIES}>
    {({ loading, error, data }) => {
      if (loading) return <div>Loading...</div>;
      if (error) return <div>Error :(</div>;

      return (
        <Movie title={data.movie.title} />
      )
    }}
  </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 happens
- `apollo-cache-inmemory`: Our recommended cache
- `apollo-link-http`: An Apollo Link for remote data fetching
- `apollo-link-error`: An Apollo Link for error handling
- `graphql-tag`: Exports the `gql` 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](https://www.apollographql.com/docs/react/essentials/get-started.html#configuration-options) documentation.

---
_Source: https://npm.io/package/apollo-boost · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._