+ {(addPost, { data }) => (
+
+
+ )}
+
+
+```
+
+## Migrate from Apollo Boost to Apollo client
+
+[migration](https://www.apollographql.com/docs/react/advanced/boost-migration.html)
+
+`npm install apollo-client apollo-cache-inmemory apollo-link-http apollo-link-error apollo-link --save`
+
+```
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { HttpLink } from 'apollo-link-http';
+
+const link = new HttpLink({ uri: 'my-graphql-server' });
+
+const client = new ApolloClient({
+ link,
+ cache: new InMemoryCache()
+});
+
+```
+
+you can also use [apollo-cache-persist](https://github.com/apollographql/apollo-cache-persist)
+
+### Apollo Link is a Network Layer
+
+Check the [docs](https://www.apollographql.com/docs/react/advanced/network-layer.html#linkMiddleware) for more in depth overview
+
+## Authentication
+
+```
+import { setContext } from 'apollo-link-context';
+
+
+const httpLink = new HttpLink({
+ uri: "https://graphql-on-postgres-demo.herokuapp.com/v1alpha1/graphql"
+});
+
+const authLink = setContext((_, { headers }) => {
+ // return the headers to the context so httpLink can read them
+ return {
+ headers: {
+ "X-Hasura-access-key": "my-secret-hash",
+ }
+ }
+});
+
+const client = new ApolloClient({
+ link: authLink.concat(link),
+ cache: new InMemoryCache()
+})
+
+```
+
+## Subscriptions
+
+`npm install apollo-link-ws subscriptions-transport-ws apollo-utilities`
+
+additional imports
+```
+import { getMainDefinition } from 'apollo-utilities';
+import { split } from 'apollo-link';
+import { WebSocketLink } from 'apollo-link-ws';
+```
+
+setup websocket link
+```
+const wsLink = new WebSocketLink({
+ uri: "wss://graphql-bootcamp-sample-blog.herokuapp.com/v1alpha1/graphql",
+ options: {
+ reconnect: true
+ }
+});
+```
+
+Redirect to operation based on operation definition
+
+```
+const link = split(
+ // split based on operation type
+ ({ query }) => {
+ const { kind, operation } = getMainDefinition(query);
+ return kind === 'OperationDefinition' && operation === 'subscription';
+ },
+ wsLink,
+ httpLink,
+);
+```
+
+## Bonus
+
+[ReactNativeWeb](https://codesandbox.io/s/xk7zw3n4)
+
+
+## Hooks
+
+
+
+# Angular
+
+[Setup](https://www.apollographql.com/docs/angular/basics/setup.html)
+
+
+```
+npm install --save apollo-angular \
+ apollo-angular-link-http \
+ apollo-link \
+ apollo-client \
+ apollo-cache-inmemory \
+ graphql-tag \
+ graphql
+```
+
+
+The apollo-client package requires `AsyncIterable` so make sure your `tsconfig.json` includes `esnext.asynciterable`:
+
+```
+import { HttpClientModule } from '@angular/common/http';
+import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
+import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+```
+
+Setup providers
+
+```
+@NgModule({
+ imports: [BrowserModule, HttpClientModule, ApolloModule, HttpLinkModule],
+ providers: [{
+ provide: APOLLO_OPTIONS,
+ useFactory(httpLink: HttpLink) {
+ return {
+ cache: new InMemoryCache(),
+ link: httpLink.create({
+ uri: `https://graphql-bootcamp-sample-blog.herokuapp.com/v1alpha1/graphql`
+ })
+ }
+ },
+ deps: [HttpLink]
+ }],
+```
+
+in component
+
+```
+ rates: any[];
+ loading = true;
+ error: any;
+```
+
+`constructor(private apollo: Apollo) {}`
+
+```
+ ngOnInit() {
+ this.apollo
+ .watchQuery({
+ query: gql`
+ {
+ posts(order_by: { timestamp: desc }) {
+ id
+ subject
+ content
+ user {
+ firstName
+ lastName
+ }
+ timestamp
+ }
+ }
+ `,
+ })
+ .valueChanges.subscribe(result => {
+ this.posts = result.data && result.data.posts;
+ this.loading = result.loading;
+ this.error = result.error;
+ });
+}
+```
+
+
+
+[Demo](https://stackblitz.com/edit/basic-apollo-angular-app-i6ejrc)
+
+[Docs](https://www.apollographql.com/docs/angular)
+
+# Vue
+
+[Demo](https://codesandbox.io/s/o1q71q63z)
+
+[Vue Apollo](https://vue-apollo.netlify.com)
+
+```
+import { ApolloClient } from 'apollo-client'
+import { HttpLink } from 'apollo-link-http'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+// New Imports
+import { split } from 'apollo-link'
+import { WebSocketLink } from 'apollo-link-ws'
+import { getMainDefinition } from 'apollo-utilities'
+```
+
+Same as React exept:
+
+```
+// Install the vue plugin
+Vue.use(VueApollo)
+```
+
+Queries declaration
+
+```
+new Vue({
+ apollo: {
+ // Apollo specific options
+ },
+})
+```
+
+```
+