docs: update site to include offline mutate

docs/getting-started.md

@@ -4,14 +4,13 @@ title: Getting Started
 navigation: 2
 ---
 
-
 # Getting Started
 
 ## Importing the package
+
 ```javascript
 import {
-  createClient,
-  strategies
+  OfflineClient
 } from 'offix-client';
 ```
 
@@ -28,15 +27,16 @@ let config = {
 ```
 
 ## Creating a Client
+
 ```javascript
-let client = createClient(config);
+let client = new OfflineClient(config);
+client.init();
 ```
 
-# Basic concepts
+## Basic concepts
 
-Client is basing on Apollo GraphQL client that can be used with various web and mobile frameworks.
-We provide version for web and Apache Cordova.
-For basic concepts about Apollo GraphQL please refer to documentation for your own platform.
+OfflineClient is based on Apollo GraphQL client and can be used with various web and mobile frameworks.
+We provide a version for web and Apache Cordova. For basic concepts about Apollo GraphQL please refer to the documentation for your own platform.
 
 For React:
 https://www.apollographql.com/docs/react/

docs/index.md

@@ -6,7 +6,7 @@ navigation: 1
 <p align="center">
   <img width="400" src="https://github.com/graphql-heroes/ApolloOfflineClient/raw/master/resources/logo.png">
   <br/>
-  Offix extends capabilities of Apollo GraphQL providing
+  Offix extends the capabilities of Apollo GraphQL providing a
   fully featured Offline Workflow and Conflict Resolution.
 </p>
 

docs/sections/ref-advanced.md

@@ -35,7 +35,7 @@ until they going to be synced to server. In some circumstances users may want to
 When performing mutations users can decide to supply `optimisticResponse` object that will
 appear instantly in the application UI. SDK provides helper method to work with optimistic responses.
 
-```
+```javascript
  import { createOptimisticResponse } from "@aerogear/datasync-js";
 
  createOptimisticResponse("updateTest", "Test", { data: "test" });

docs/sections/ref-conflict-client.md

@@ -31,20 +31,20 @@ By default plugable conflict resolution is configured to rely on `version` field
 GraphQL type.
 For example:
 
-``
+```javascript
 type User {
   id: ID!
   version: String!
   name: String!
 }
-``
+```
 
 Version field is going to be controlled on the server and will map last version
 that was sent from server. All operations on version field happen automatically
 however users need to make sure that version field is always being passed to server
 for mutations that supports conflict resolution:
 
-```
+```javascript
 type Mutation {
   updateUser(id: ID!, version: String!): User
 }
@@ -53,7 +53,7 @@ type Mutation {
 Alternatively developers can create input element that can be reused in every mutation
 that supports conflict resolution
 
-```
+```javascript
 type Mutation {
   updateUser(user: UserInput): User
 }
@@ -65,7 +65,6 @@ Client can define custom resolution strategies.
 You can provide custom conflict resolution strategies to the client in the config by using the provided `ConflictResolutionStrategies` type from the SDK. By default developers do not need to pass any strategy (`clientVersionWins` strategy is used).
 Custom strategies can be used also to provide different resolution strategy for certain operations:
 
-
 ```javascript
 let updateUserConflictResolver = (serverData, clientData) => {
     delete clientData.socialKey
@@ -99,7 +98,6 @@ Framework allows to receive information about the data conflict that occurred be
 
 Developers can supply their own `conflictListener` implementation
 
-
 ```typescript
 class ConflictLogger implements ConflictListener {
     console.log(`data: ${JSON.stringify(resolvedData)}, server: ${JSON.stringify(server)} client: ${JSON.stringify(client)} `);
@@ -112,4 +110,3 @@ let config = {
 ...
 }
 ```
-

docs/sections/ref-offline.md

@@ -4,16 +4,11 @@ title: Apollo Offline Client
 navigation: 3
 ---
 
-# Offline support
+# Offline Support
 
-SDK provides first class support for performing GraphQL operations while offline.
-Queries and mutations are hold in queue that is being configured to hold requests when client goes offline.
-When client goes offline for long periods of time clients will be able still negotiate local updates with the server state thanks to powerful conflict resolution strategies.
+Offix provides first class support for performing GraphQL operations while offline. Mutations are held in a queue that is configured to hold requests while the client is offline. When the client goes offline for long periods of time they will still be able negotiate local updates with the server state thanks to powerful conflict resolution strategies.
 
-
-Client offers comprehensive set of features to perform data operations when offline.
-Thanks to offline mutation store users can stage their changes to be replicated back
-to server when becoming online:
+Offix-client offers a comprehensive set of features to perform data operations when offline. Thanks to the offline mutation store users can stage their changes to be replicated back to the server when they return online.
 
 Please follow chapters bellow for more information.
 
@@ -23,30 +18,59 @@ By default queries are cached based on the type and id field, and the results of
 
 Because of this, when mutations that can change query results are performed, the `refetchQueries` or update options of the mutate method should be used to ensure the local cache is kept up to date.
 
-In the following example, the app will perform an `ADD_TASK` mutation which will create a new task. The app also has a `GET_TASKS` query to list all the tasks. In order to make sure the cache for the `GET_TASKS` query is kept up to date whenever a new task is created, the update option is used to add the newly created task to the cache:
+Offix makes your cache simple to manage, with out of the box cache helpers in `offix-cache` or by automatically wrapping these helpers in offix-client through the `OfflineClient` class.
 
-```
-  client.mutate({
-    mutation: ADD_TASK, variables: item,
-    update: updateCacheOnAdd
-  });
-
-  function updateCacheOnAdd(cache, { data: { createTask } }) {
-    let { allTasks } = cache.readQuery({ query: GET_TASKS });
-    if (allTasks) {
-      if (!allTasks.find((task) => task.id === createTask.id)) {
-        allTasks.push(createTask);
-      }
-    } else {
-      allTasks = [createTask];
+To use the `offlineMutation` function, we first need to create our `MutationHelperOptions` object. This is an extension of Apollo's MutationOptions.
+
+```javascript
+const { CacheOperation } = require('offix-cache');
+
+const mutationOptions = {
+  mutation: ADD_TASK,
+  variables: {
+    title: 'item title'
+  },
+  updateQuery: {
+    query: GET_TASKS,
+    variables: {
+      filterBy: 'some filter'
     }
-    cache.writeQuery({
-      query: GET_TASKS,
-      data: {
-        'allTasks': allTasks
-      }
-    });
-  }
+  },
+  typeName: 'Task',
+  operationType: CacheOperation.ADD,
+  idField: 'id'
+};
+```
+
+We can also provide more than one query to update in the cache by providing an array to the `updateQuery` parameter:
+
+```javascript
+
+const mutationOptions = {
+  ...
+  updateQuery: [
+    { query: GET_TASKS, variables: {} }
+  ]
+  ,
+  ...
+};
+```
+
+We then simply pass this object to `offlineMutation` and our cache is automatically kept up to date.
+
+```javascript
+client.offlineMutation(mutationOptions);
+```
+
+If you do not wish to use the `offlineMutation` function you can also use the `createMutationOptions` function directly. This function provides an Apollo compatible `MutationOptions` object to pass to your pre-existing client.
+This is shown below where `mutationOptions` is the same object shown in the above code example.
+
+```javascript
+const { createMutationOptions } = require('offix-cache');
+
+const options = createMutationOptions(mutationOptions);
+
+client.mutate(options);
 ```
 
 ## Offline Workflow
@@ -56,16 +80,17 @@ Returned promise will resolve into error (`catch` method is triggered).
 Developers can detect if error is an offline error and watch for change to be replicated back to server.
 
 Example:
-  ```javascript
-  client.mutate(...).catch((error)=> {
-    // 1. Detect if this was an offline error
-   if(error.networkError && error.networkError.offline){
-     const offlineError: OfflineError =  error.networkError;
-     // 2. We can still track when offline change is going to be replicated.
-     offlineError.watchOfflineChange().then(...)
-   }
-  });
-  ```
+
+```javascript
+client.mutate(...).catch((error)=> {
+  // 1. Detect if this was an offline error
+  if(error.networkError && error.networkError.offline){
+    const offlineError: OfflineError =  error.networkError;
+    // 2. We can still track when offline change is going to be replicated.
+    offlineError.watchOfflineChange().then(...)
+  }
+});
+```
 
 > Note: Additionally to watching individual mutations framework offers global offline listener that can be supplied when creating client.
 
@@ -75,7 +100,6 @@ Apollo client holds all mutation parameters in memory. An offline Apollo client
 
 To prevent the loss of all optimisticResponses after a restart, you can configure the Update Functions to restore all optimisticResponses.
 
-
 ```javascript
 const updateFunctions = {
   // Can contain update functions from each component
@@ -101,7 +125,7 @@ Developers can adjust how queue will process new mutations by supplying custom `
 To ensure certain queries are not queued and are always delivered to the network layer, you must make use of Graphql directives.
 To do so on your client, ensure the query has the annotation attached like so:
 
-```
+```javascript
 exampleQuery(...) @onlineOnly {
   ...
 }
@@ -116,10 +140,9 @@ It is possible to provide `offlineQueueListener` in config to be notified about
 - `onOperationFailure` - Called when back online and operation fails with GraphQL error
 - `queueCleared` - Called when offline operation queue is cleared
 
-
 ## Cache
 
-Apollo Offline Client is strongly leveraging Apollo Cache.
+Apollo Offline Client strongly leverages Apollo Cache.
 Please follow documentation for more information about caching in Apollo GraphQL
 
 https://www.apollographql.com/docs/react/advanced/caching.html
@@ -131,7 +154,7 @@ To effectively work with cache users can use `cache-first` fetchPolicy
 when performing queries. This policy will try to use local cache in
 situations when cache was already populated with the server side data.
 
-```
+```javascript
     return this.apollo.watchQuery<YourType>({
       query: YOUR_QUERY,
       fetchPolicy: 'cache-first',