Skip to content

Add Apollo boost #313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 30, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 45 additions & 7 deletions docs/guide/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,45 @@
If you are using vue-cli 3.x, you can [use this vue-cli plugin](https://github.com/Akryum/vue-cli-plugin-apollo): it will install everything you need for you in a few minutes so you can start coding right away!
:::

Try and install these packages before server side set (of packages), add apollo to meteor.js before then, too.
## Apollo Boost

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 and it's perfect for starting to develop fast:

Install:

```
npm install --save vue-apollo graphql apollo-boost
```

Or:

```
yarn add vue-apollo graphql apollo-boost
```

### Apollo client

In your app, create an `ApolloClient` instance and install the `VueApollo` plugin:

```js
import Vue from 'vue'
import ApolloClient from "apollo-boost"
import VueApollo from "vue-apollo"

const apolloProvider = new VueApollo({
defaultClient: new ApolloClient({
uri: "https://api.graphcms.com/simple/v1/awesomeTalksClone"
})
})

Vue.use(VueApollo)
```



## Manual

If you want some more fine grain control try and install these packages before server side set (of packages), add apollo to meteor.js before then, too.

```
npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
Expand All @@ -16,7 +54,7 @@ Or:
yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
```

## Apollo client
### Apollo client

In your app, create an `ApolloClient` instance and install the `VueApollo` plugin:

Expand All @@ -39,6 +77,10 @@ const apolloClient = new ApolloClient({
connectToDevTools: true,
})

const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})

// Install the vue plugin
Vue.use(VueApollo)
```
Expand All @@ -48,13 +90,9 @@ Vue.use(VueApollo)
The provider holds the apollo client instances that can then be used by all the child components. Inject it into your components with `provide`:

```js
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})

new Vue({
el: '#app',
provide: apolloProvider.provide(),
render: h => h(App),
})
```
```
3 changes: 2 additions & 1 deletion docs/guide/local-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,5 +31,6 @@ export default {
```

[Example project](https://codesandbox.io/s/zqqj82396p) (thx @chriswingler)
[Todo App](https://codesandbox.io/s/x2jr96r8pp) (thx @NikkitaFTW)

---
---