This repository has been archived by the owner on Apr 17, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: release 0.12.0 * doc: 0.12.0 version on website
- Loading branch information
Showing
21 changed files
with
983 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
id: version-0.12.0-android | ||
title: Android | ||
sidebar_label: Android | ||
original_id: android | ||
--- | ||
|
||
Offix supports Android platform by seprate project called Offix Android. | ||
|
||
Offix Android Documentation: | ||
http://android.offix.dev | ||
|
||
Offix Android Github: | ||
https://github.com/aerogear/offix-android |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
--- | ||
id: version-0.12.0-angular | ||
title: Angular | ||
sidebar_label: Angular | ||
original_id: 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/ |
130 changes: 130 additions & 0 deletions
130
website/versioned_docs/version-0.12.0/getting-started.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,130 @@ | ||
--- | ||
id: version-0.12.0-getting-started | ||
title: Getting Started | ||
sidebar_label: Getting Started | ||
original_id: getting-started | ||
--- | ||
|
||
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): | ||
|
||
```shell | ||
npm install offix-client | ||
``` | ||
|
||
Or [yarn](https://yarnpkg.com/en/package/offix-client): | ||
|
||
```shell | ||
yarn add offix-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'; | ||
import { InMemoryCache } from 'apollo-cache-inmemory'; | ||
import { HttpLink } from "apollo-link-http"; | ||
|
||
const config = { | ||
link: new HttpLink({ uri: 'http://example.com/graphql' }) | ||
cache: new InMemoryCache() | ||
}; | ||
|
||
// create the client | ||
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(); | ||
``` | ||
|
||
The `ApolloOfflineClient` is a full `ApolloClient` but with some additional features for building offline workflows. | ||
|
||
**Note** `client.init` must be resolved before the application makes any queries/mutations, otherwise the cache and storage mechanisms may not work properly. | ||
|
||
## Offix Client Boost | ||
|
||
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' | ||
|
||
const config = { | ||
httpUrl: 'http://example.com/graphql', | ||
wsUrl: 'ws://example.com/graphql' | ||
} | ||
|
||
const client = await createClient(config) | ||
``` | ||
|
||
## 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 support sending new mutation while the application is considered offline. | ||
|
||
```js | ||
const options = { | ||
mutation: gql` | ||
mutation greeting($name: String!){ | ||
greeting(name: $name) { | ||
body | ||
} | ||
}`, | ||
variables: { | ||
name: 'hello world!' | ||
} | ||
}; | ||
|
||
client.offlineMutate(options).catch((error) => { | ||
// we are offline - lets wait for changes | ||
if(error.offline) { | ||
error.watchOfflineChange().then((result) => { | ||
console.log('mutation was completed after we came back online!', result) | ||
}) | ||
} | ||
}); | ||
``` | ||
|
||
When offline, an error is returned with a reference to a promise which can be used to wait for the mutation to complete. This will happen when the application comes back online. | ||
|
||
`async/await` can be used too. | ||
|
||
```js | ||
try { | ||
await client.offlineMutate(options) | ||
} catch(error) { | ||
if(error.offline) { | ||
const result = await error.watchOfflineChange() | ||
console.log('mutation was completed after we came back online!', result) | ||
} | ||
} | ||
``` | ||
|
||
## Non Offline realated API | ||
|
||
`ApolloOfflineClient` is and extension of the Apollo GraphQL client and can be used with various web and mobile frameworks. | ||
For basic concepts about Apollo GraphQL please refer to the documentation for your own platform. | ||
|
||
For React: | ||
https://www.apollographql.com/docs/react/ | ||
|
||
For Angular: | ||
https://www.apollographql.com/docs/angular/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
--- | ||
id: version-0.12.0-cookbooks | ||
title: Cookbooks | ||
sidebar_label: Offline Cookbook | ||
original_id: cookbooks | ||
--- | ||
|
||
|
||
# Offix Cookbook | ||
|
||
This section contains multiple tips and tricks for working with Offix. | ||
|
||
|
||
## Implementing Custom Network Status checks | ||
|
||
To use your own custom network checks, implement the [NetworkStatus](NetworkStatus.ts) | ||
interface which provides two functions; | ||
|
||
```javascript | ||
onStatusChangeListener(callback: NetworkStatusChangeCallback): void; | ||
|
||
isOffline(): boolean; | ||
``` | ||
|
||
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. | ||
|
||
## Querying Data when Offline | ||
|
||
To make sure that data will be available when the devices comes back online, we need to query it with the proper | ||
`fetchPolicy` | ||
|
||
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. | ||
|
||
For more information see: | ||
https://medium.com/@wtr/data-query-patterns-for-graphql-clients-af66830531aa |
Oops, something went wrong.