Skip to content
This repository has been archived by the owner on Apr 17, 2023. It is now read-only.

Commit

Permalink
fix: minor information to docs (#290)
Browse files Browse the repository at this point in the history
  • Loading branch information
wtrocki authored and darahayes committed Dec 5, 2019
1 parent 4d0e392 commit e39a45d
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 41 deletions.
4 changes: 2 additions & 2 deletions docs/android.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ sidebar_label: Android

Offix supports Android platform by seprate project called Offix Android.

For docs go to:
Offix Android Documentation:
http://android.offix.dev

Github:
Offix Android Github:
https://github.com/aerogear/offix-android
15 changes: 15 additions & 0 deletions docs/angular.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
id: angular
title: Angular
sidebar_label: Angular
---

Offix does not provide a specific API for Angular,
However, the regular `offix-client` module can be used for most use cases.

## Example Angular Application

We maintain an Angular based example Ionic application that showcases how to use Offix.
For more information please check:

https://github.com/aerogear/ionic-showcase/
33 changes: 26 additions & 7 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,14 @@ title: Getting Started
sidebar_label: Getting Started
---

## Install Offix Client
Offix can be used with existing Apollo GraphQL applications as an extension to the Apollo Client.
The Offix Client provides additional methods that support various offline use cases.

Offix supports multiple platforms by extendable javascript library and individual wrappers for
specific web and cross platform frameworks.


## Installing Offix Client

Using [npm](https://www.npmjs.com/package/offix-client):

Expand All @@ -18,7 +25,12 @@ Or [yarn](https://yarnpkg.com/en/package/offix-client):
yarn add offix-client
```

## Creating the Client
## Using the Client inside your application

To work with Offix you should create Offix client.

> NOTE: Offix client extends Apollo Client - if you already using Apollo Client you would need to
swap it with the Offix client implementation

```javascript
import { ApolloOfflineClient } from 'offix-client';
Expand All @@ -34,6 +46,8 @@ const config = {
const client = new ApolloOfflineClient(config);

// initialise the client
// Client needs to be installised before any other queries and mutations will happen.
// Please see platform guide to see how this can be done in React, Angular etc.
await client.init();
```

Expand All @@ -43,7 +57,9 @@ The `ApolloOfflineClient` is a full `ApolloClient` but with some additional feat

## Offix Client Boost

The `offix-client-boost` is a convenient way to create a client already bundled with a cache and [Apollo Links](https://www.apollographql.com/docs/link/) subscriptions and file uploads.
The `offix-client-boost` is a convenient way to create a client already bundled with all you nead to work with GraphQL.
Mainly an cache and [Apollo Links](https://www.apollographql.com/docs/link/) subscriptions and file uploads.
Offix Boost is recomended if you trying to build your first GraphQL application and want to have seamless experience.

```js
import { createClient } from 'offix-client-boost'
Expand All @@ -56,9 +72,12 @@ const config = {
const client = await createClient(config)
```

## Example Mutation
## Working with client

Client will offer the same API as Apollo GraphQL client.
Offix will supply additional methods that help with offline experience.

The following example shows the `client.offlineMutate()` method which schedules mutations while the application is considered offline.
The following example shows the `client.offlineMutate()` method which support sending new mutation while the application is considered offline.

```js
const options = {
Expand Down Expand Up @@ -98,10 +117,10 @@ try {
}
```

## Basic concepts
## Non Offline realated API

`ApolloOfflineClient` is and extension of the 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 basic concepts about Apollo GraphQL please refer to the documentation for your own platform.

For React:
https://www.apollographql.com/docs/react/
Expand Down
50 changes: 20 additions & 30 deletions docs/ref-advanced.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,14 @@
# Advanced topics
---
id: cookbooks
title: Cookbooks
sidebar_label: Offline Cookbook
---


# Offix Cookbook

This section contains multiple tips and tricks for working with Offix.


## Implementing Custom Network Status checks

Expand All @@ -11,36 +21,16 @@ To use your own custom network checks, implement the [NetworkStatus](NetworkStat
isOffline(): boolean;
```

## Logging debug messages

Sync package is using debug package to print out debug messages

To enable debug please execute in console
`localStorage.debug = 'AeroGearSync:*'`

Some certain features can be enabled separately
This interface can be used to redefine what being offline means.
For example, for some use cases developers might decide to use scheduler only when Wifi connection is available.

`localStorage.debug = 'AeroGearSync:OfflineMutations*'`

## Optimistic UI

By default user changes that are made when offline will not appear in the app
until they going to be synced to server. In some circumstances users may want to see them instantly to perform various operations on the data
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" });
```
## Querying Data when Offline

Users can detect if the provided data is optimistic response by checking `optimisticResponse` flag is set to true.
To make sure that data will be available when the devices comes back online, we need to query it with the proper
`fetchPolicy`

## Listening to the offline queue events
We recommend to always use the default fetch policy and to let Offix to control the flow. However, for advanced use cases
developers can modify their approach.

Developers can implement `offlineQueueListener` that can be passed as config element.
This listener is going to be notified about new items that were added to offline queue.
Listener can be used to build UI support and show pending changes.
This feature can be mixed together with `OptimisticResponse` to deliver great offline experience
See example application for more information.
For more information see:
https://medium.com/@wtr/data-query-patterns-for-graphql-clients-af66830531aa
4 changes: 3 additions & 1 deletion docs/ref-cache.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ title: Offix Cache
sidebar_label: Client Cache
---

The offix-cache package helps developers to manage some of their client's state such as cache, optimistic responses and subscriptions.
The `offix-cache` package helps developers to manage some of their client's state such as cache, optimistic responses and subscriptions.

Offix Cache capabilities are available automatically when using `client.offlineMutate`.

## Optimistic UI

Expand Down
2 changes: 1 addition & 1 deletion docs/ref-offline.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ client.offlineMutate(...).catch((error)=> {

Apollo client holds all mutation parameters in memory. An offline Apollo client will continue to store mutation parameters and once online, it will restore all mutations to memory. Any Update Functions that are supplied to mutations cannot be cached by an Apollo client resulting in the loss of all optimisticResponses after a restart. Update functions supplied to mutations cannot be saved in the cache. As a result, all optimisticResponses will disappear from the application after a restart and it will only reappear when the Apollo client becomes online and successfully syncs with the server.

To prevent the loss of all optimisticResponses after a restart, you can configure the Update Functions to restore all optimisticResponses.
To prevent the loss of all optimisticResponses after a restart, you can configure the `update` functions to restore all optimisticResponses.

```javascript
const updateFunctions = {
Expand Down
2 changes: 2 additions & 0 deletions website/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@
"Platforms": [
"react",
"react-native",
"angular",
"ionic",
"android"
],
"Advanced topics": [
"cookbooks",
"offix-scheduler-introduction"
],
"Releases": [
Expand Down

0 comments on commit e39a45d

Please sign in to comment.