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.
* doc: add release notes for 0.13.0 * doc: add 0.13.0 to website * chore: release 0.13.0
- Loading branch information
Showing
18 changed files
with
904 additions
and
24 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
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,72 @@ | ||
--- | ||
id: version-0.13.0-react-native | ||
title: React Native | ||
sidebar_label: React Native | ||
original_id: react-native | ||
--- | ||
|
||
To integrate offix in React Native, developers need to provide custom storage and network layers. | ||
|
||
We recomend developers use following React Native plugins: | ||
|
||
- `@react-native-community/async-storage` - for storage | ||
- `@react-native-community/netinfo` - for network information | ||
|
||
Note: if you are using [Expo](https://expo.io/), you must use the [AsyncStorage included in `react-native`](https://facebook.github.io/react-native/docs/asyncstorage) instead. | ||
|
||
## Integration | ||
|
||
To integrate with offix we need to create wrappers for storage and network. | ||
|
||
Note: if using expo, you will need to `import { AsyncStorage } from 'react-native';` instead of using the `@react-native-community/async-storage` package. | ||
|
||
```js | ||
import { ApolloOfflineClient } from 'offix-client' | ||
import { InMemoryCache } from 'apollo-cache-inmemory'; | ||
import { HttpLink } from 'apollo-link-http'; | ||
import AsyncStorage from '@react-native-community/async-storage' | ||
import NetInfo from '@react-native-community/netinfo' | ||
|
||
// Create cache wrapper | ||
const cacheStorage = { | ||
getItem: async (key) => { | ||
const data = await AsyncStorage.getItem(key); | ||
if (typeof data === 'string') { | ||
return JSON.parse(data); | ||
} | ||
return data; | ||
}, | ||
setItem: async (key, value) => { | ||
let valueStr = value; | ||
if (typeof valueStr === 'object') { | ||
valueStr = JSON.stringify(value); | ||
} | ||
return AsyncStorage.setItem(key, valueStr); | ||
} | ||
}; | ||
|
||
// Create network interface | ||
const networkStatus = { | ||
onStatusChangeListener(callback) { | ||
const listener = (connected) => { | ||
callback.onStatusChange({ online: connected }) | ||
}; | ||
NetInfo.isConnected.addEventListener('connectionChange', listener) | ||
}, | ||
isOffline() { | ||
return NetInfo.isConnected.fetch().then(connected => !connected) | ||
} | ||
}; | ||
|
||
// Create client | ||
const offlineClient = new ApolloOfflineClient({ | ||
cache: new InMemoryCache(), | ||
link: new HttpLink({ uri: 'http://localhost:4000/graphql' }), | ||
offlineStorage: cacheStorage, | ||
cacheStorage, | ||
networkStatus | ||
}); | ||
``` | ||
|
||
For a fully functional example please check react native example app: | ||
https://github.com/aerogear/offix-react-native-example |
Oops, something went wrong.