Apollo Angular 2.0 - (Apollo Client 3.0)

.circleci/config.yml

@@ -7,7 +7,7 @@ jobs:
       - checkout
       - run:
           name: Install
-          command: yarn
+          command: yarn install --frozen-lockfile
       - run:
           name: Build
           command: yarn build

.gitignore

@@ -51,7 +51,6 @@ jspm_packages
 
 # Packages lock
 package-lock.json
-yarn.lock
 packages/**/package-lock.json
 packages/**/yarn.lock
 
@@ -60,3 +59,6 @@ packages/*/npm/
 
 # docs
 docs/public/docs
+
+# Verdaccio
+.verdaccio

.vscode/settings.json

@@ -7,7 +7,7 @@
     "**/.git": true,
     "**/.DS_Store": true,
     "**/node_modules/**": true,
-    "**/build/**": true,
+    "**/build/**": false,
     "**/coverage/**": true,
     "**/npm/**": true
   },

docs/.gitignore

@@ -3,3 +3,4 @@ _multiconfig.yml
 !package-lock.json
 .cache
 public
+yarn.lock

docs/gatsby-config.js

@@ -1,7 +1,6 @@
 const themeOptions = require('gatsby-theme-apollo-docs/theme-options');
 
 module.exports = {
-  pathPrefix: '/docs/angular',
   plugins: [
     {
       resolve: 'gatsby-theme-apollo-docs',
@@ -11,6 +10,7 @@ module.exports = {
         subtitle: 'Apollo Angular',
         description: 'A guide to using the Apollo GraphQL Client with Angular',
         githubRepo: 'apollographql/apollo-angular',
+        defaultVersion: 1,
         sidebarCategories: {
           null: [
             'index',

docs/package.json

@@ -6,8 +6,8 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "gatsby": "2.18.21",
-    "gatsby-theme-apollo-docs": "3.2.5",
+    "gatsby": "2.19.12",
+    "gatsby-theme-apollo-docs": "3.2.7",
     "react": "16.12.0",
     "react-dom": "16.12.0"
   }

docs/source/basics/caching.md

@@ -5,22 +5,12 @@ description: A guide to customizing and directly accessing your Apollo cache
 
 ## InMemoryCache
 
-`apollo-cache-inmemory` is the default cache implementation for Apollo Client 2.0. `InMemoryCache` is a normalized data store that supports all of Apollo Client 1.0's features without the dependency on Redux.
+`InMemoryCache` is the default cache implementation for Apollo Client 2.0. It is a normalized data store that supports all of Apollo Client 1.0's features without the dependency on Redux.
 
 In some instances, you may need to manipulate the cache directly, such as updating the store after a mutation. We'll cover some common use cases [here](#recipes).
 
-### Installation
-
-```bash
-npm install apollo-cache-inmemory --save
-```
-
-After installing the package, you'll want to initialize the cache constructor. Then, you can pass in your newly created cache to ApolloClient.
-
 ```ts
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { Apollo } from 'apollo-angular';
-import { HttpLink } from 'apollo-angular-link-http';
+import { Apollo, InMemoryCache, HttpLink } from 'apollo-angular';
 
 @NgModule({ ... })
 class AppModule {
@@ -81,7 +71,7 @@ const cache = new InMemoryCache({
 
 To interact directly with your cache, you can use the Apollo Client class methods readQuery, readFragment, writeQuery, and writeFragment. These methods are available to us via the [`DataProxy` interface](https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.mutate). An instance of ApolloClient can be accessed by `getClient()` method of `Apollo` Service.
 
-Any code demonstration in the following sections will assume that we have already initialized an instance of `ApolloClient` and that we have imported the `gql` tag from `graphql-tag`.
+Any code demonstration in the following sections will assume that we have already initialized an instance of `ApolloClient` and that we have imported the `gql` tag from `apollo-angular`.
 
 ### readQuery
 
@@ -264,4 +254,3 @@ Here are some common situations where you would need to access the cache directl
 ### Server side rendering
 
 If you would like to learn more about server side rendering, please check out more in depth guide [here](/recipes/server-side-rendering/).
-

docs/source/basics/local-state.md

@@ -97,8 +97,7 @@ What if we want to immediately subscribe to the data we just wrote to the cache?
 
 ```ts
 import {Component, OnInit, Input} from '@angular/core';
-import {Apollo} from 'apollo-angular';
-import gql from 'graphql-tag';
+import {Apollo, gql} from 'apollo-angular';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
@@ -183,8 +182,7 @@ Let's learn how to trigger our `toggleTodo` mutation from our component:
 
 ```ts
 import {Component, Input} from '@angular/core';
-import {Apollo} from 'apollo-angular';
-import gql from 'graphql-tag';
+import {Apollo, gql} from 'apollo-angular';
 
 const TOGGLE_TODO = gql`
   mutation ToggleTodo($id: Int!) {
@@ -233,8 +231,7 @@ Querying the Apollo cache is similar to querying your GraphQL server. The only d
 
 ```ts
 import {Component, OnInit} from '@angular/core';
-import {Apollo} from 'apollo-angular';
-import gql from 'graphql-tag';
+import {Apollo, gql} from 'apollo-angular';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
@@ -333,7 +330,7 @@ While `apollo-link-state` achieved some of the goals of local state handling, th
 
 Updating your application to use Apollo Client's local state management features, instead of `apollo-link-state`, is fairly straightforward. The necessary steps are outlined below.
 
-1. Including `apollo-link-state` as a dependency, and importing it to use `withClientState`, is no longer necessary. You can remove the `apollo-link-state` dependency since local state management is included with `apollo-client` >= 2.5.0.
+1. Including `apollo-link-state` as a dependency, and importing it to use `withClientState`, is no longer necessary. You can remove the `apollo-link-state` dependency since local state management is included with `@apollo/client` >= 2.5.0.
 
 2. Using `withClientState` is no longer supported. The following
 

docs/source/basics/mutations.md

@@ -40,8 +40,7 @@ Using `Apollo` it's easy to call mutation. You can simply use `mutate` method.
 ```ts
 import { Component } from '@angular/core';
 
-import { Apollo } from 'apollo-angular';
-import gql from 'graphql-tag';
+import { Apollo, gql } from 'apollo-angular';
 
 const submitRepository = gql`
   mutation submitRepository {
@@ -70,8 +69,7 @@ Most mutations will require arguments in the form of query variables, and you ma
 ```ts
 import { Component } from '@angular/core';
 
-import { Apollo } from 'apollo-angular';
-import gql from 'graphql-tag';
+import { Apollo, gql } from 'apollo-angular';
 
 const submitRepository = gql`
   mutation submitRepository($repoFullName: String!) {
@@ -106,8 +104,7 @@ However, typically you'd want to keep the concern of understanding the mutation'
 
 ```ts
 import {Component, Injectable} from '@angular/core';
-import {Apollo} from 'apollo-angular';
-import gql from 'graphql-tag';
+import {Apollo, gql} from 'apollo-angular';
 
 @Injectable()
 class SubmitRepositoryService {
@@ -158,8 +155,7 @@ Apollo Client gives you a way to specify the `optimisticResponse` option, that w
 ```ts
 import { Component } from '@angular/core';
 
-import { Apollo } from 'apollo-angular';
-import gql from 'graphql-tag';
+import { Apollo, gql } from 'apollo-angular';
 
 const submitComment = gql`
   mutation submitComment($repoFullName: String!, $commentContent: String!) {

docs/source/basics/network-layer.md

@@ -10,13 +10,12 @@ Apollo Client has a pluggable network interface layer, which can let you configu
 
 ### Using an link
 
-To create a link to use with Apollo Client, you can install and import one from npm or create your own. We recommend using `apollo-angular-link-http` for most setups!
+To create a link to use with Apollo Client, you can install and import one from npm or create your own. We recommend using `HttpLink` for most setups!
 
 First, you need to import Module for each package:
 
 ```ts
-import { ApolloModule } from 'apollo-angular';
-import { HttpLinkModule } from 'apollo-angular-link-http';
+import { ApolloModule, HttpLinkModule } from 'apollo-angular';
 
 @NgModule({
   imports: [
@@ -33,8 +32,7 @@ Since the example runs in browser, we are going to use `HttpClientModule` from `
 
 ```ts
 import { HttpClientModule } from '@angular/common/http';
-import { ApolloModule } from 'apollo-angular';
-import { HttpLinkModule } from 'apollo-angular-link-http';
+import { ApolloModule, HttpLinkModule } from 'apollo-angular';
 
 @NgModule({
   imports: [
@@ -50,8 +48,7 @@ Since Angular has now access to Apollo related services, here's how you would in
 
 ```ts
 import { HttpClientModule } from '@angular/common/http';
-import { ApolloModule, Apollo } from 'apollo-angular';
-import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
+import { ApolloModule, Apollo, HttpLinkModule, HttpLink } from 'apollo-angular';
 
 @NgModule({
   imports: [
@@ -78,8 +75,7 @@ class AppModule {
 And if you needed to pass additional options to [`HttpClient`](https://angular.io/api/common/http/HttpClient):
 
 ```ts
-import { Apollo } from 'apollo-angular';
-import { HttpLink } from 'apollo-angular-link-http';
+import { Apollo, HttpLink } from 'apollo-angular';
 
 @NgModule({ ... })
 class AppModule {
@@ -108,9 +104,7 @@ Apollo Link is designed from day one to be easy to use middleware on your reques
 The following examples shows how you'd create a middleware. In both examples, we'll show how you would add an authentication token to the HTTP header of the requests being sent by the client.
 
 ```js
-import { Apollo } from 'apollo-angular';
-import { HttpLink } from 'apollo-angular-link-http';
-import { ApolloLink, concat } from 'apollo-link';
+import { Apollo, HttpLink, ApolloLink, concat } from 'apollo-angular';
 import { HttpHeaders } from '@angular/common/http';
 
 @NgModule({ ... })
@@ -143,9 +137,7 @@ The above example shows the use of a single middleware joined with the HttpLink.
 The following example shows the use of multiple middlewares passed as an array:
 
 ```ts
-import { Apollo } from 'apollo-angular';
-import { HttpLink } from 'apollo-angular-link-http';
-import { ApolloLink } from 'apollo-link';
+import { Apollo, HttpLink, ApolloLink } from 'apollo-angular';
 
 @NgModule({ ... })
 class AppModule {
@@ -194,8 +186,7 @@ Much like middlewares, Apollo Link was designed to make afterwares easy and powe
 The following example demonstrates how to implement an afterware function.
 
 ```ts
-import { Apollo } from 'apollo-angular';
-import { HttpLink } from 'apollo-angular-link-http';
+import { Apollo, HttpLink } from 'apollo-angular';
 import { onError } from 'apollo-link-error'
 
 import { Auth } from './auth';
@@ -244,4 +235,4 @@ For more information about using WebSocket's with Apollo Link, check out the [in
 
 ### Query Batching
 
-Apollo lets you automatically batch multiple queries into one request when they are made within a certain interval. This means that if you render several components, for example a navbar, sidebar, and content, and each of those do their own GraphQL query, they will all be sent in one roundtrip. Batching works only with server that support batched queries (for example graphql-server). Batched requests to servers that don’t support batching will fail. To learn how to use batching with Apollo checkout the [indepth guide](https://github.com/apollographql/apollo-angular/tree/master/packages/apollo-angular-link-http-batch)
+Apollo lets you automatically batch multiple queries into one request when they are made within a certain interval. This means that if you render several components, for example a navbar, sidebar, and content, and each of those do their own GraphQL query, they will all be sent in one roundtrip. Batching works only with server that support batched queries (for example graphql-server). Batched requests to servers that don’t support batching will fail. To learn how to use batching with Apollo checkout the [indepth guide](https://github.com/apollographql/apollo-angular/tree/master/packages/apollo-angular/src/http-batch)

docs/source/basics/queries.md

@@ -16,16 +16,15 @@ can also put into your Apollo Client code.
 
 When we are using a basic query, we can use the `Apollo.watchQuery` method in a
 very simple way. We simply need to parse our query into a GraphQL document using
-the `graphql-tag` library.
+the `graphql-tag` library (comes with `apollo-angular`).
 
 For instance, in GitHunt, we want to display the current user (if logged in) in
 the `Profile` component:
 
 ```ts
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { Apollo } from 'apollo-angular';
-import gql from 'graphql-tag';
+import { Apollo, gql } from 'apollo-angular';
 
 // We use the gql tag to parse our query string into a query document
 const CurrentUserForProfile = gql`
@@ -177,9 +176,8 @@ of the property you want to get from `data`.
 
 ```ts
 import {Component, OnInit} from '@angular/core';
-import {Apollo} from 'apollo-angular';
+import {Apollo, gql} from 'apollo-angular';
 import {Observable} from 'rxjs';
-import gql from 'graphql-tag';
 
 const FeedQuery = gql`
   query Feed {
@@ -234,10 +232,9 @@ What's really interesting is that, because of this, you can avoid using `SelectP
 
 ```ts
 import {Component, OnInit} from '@angular/core';
-import {Apollo} from 'apollo-angular';
+import {Apollo, gql} from 'apollo-angular';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
-import gql from 'graphql-tag';
 
 const FeedQuery = gql`
   query Feed {

docs/source/basics/services.md

@@ -26,8 +26,7 @@ You create a service and extend it with a `Query` class from `apollo-angular`. O
 
 ```ts
 import {Injectable} from '@angular/core';
-import {Query} from 'apollo-angular';
-import gql from 'graphql-tag';
+import {Query, gql} from 'apollo-angular';
 
 export interface Post {
   id: string;
@@ -134,8 +133,7 @@ You create a service and extend it with a `Mutation` class from `apollo-angular`
 
 ```ts
 import {Injectable} from '@angular/core';
-import {Mutation} from 'apollo-angular';
-import gql from 'graphql-tag';
+import {Mutation, gql} from 'apollo-angular';
 
 @Injectable({
   providedIn: 'root',
@@ -198,8 +196,7 @@ You create a service and extend it with a `Subscription` class from `apollo-angu
 
 ```ts
 import {Injectable} from '@angular/core';
-import {Subscription} from 'apollo-angular';
-import gql from 'graphql-tag';
+import {Subscription, gql} from 'apollo-angular';
 
 @Injectable({
   providedIn: 'root',