React - using Offix Hooks
ApolloOfflineClient is compatible with all of the official Apollo React Hooks such as
For a quickstart, a simple React todo app can be found in the example folder.
react-offix-hooks library provides an additional
useOfflineMutation React hook for performing offline mutations.
react-offix-hooks is experimental. Please try it and log any issues to help us improve it.
In a normal React application that uses Apollo Client, the client is created at startup and the root component is wrapped with
client.init() needs to be called and this is an asynchronous function call, an extra step is needed. The root
ApolloProvider also needs to be wrapped with
ApolloOfflineProvider for the
useOfflineMutation hook to work.
Below is a boilerplate example that can be used.
In the example above, the following happens.
useState()is used to set a boolean that will be
trueonce the client is initialized.
client.init()is called inside a
useEffectcall making sure the initialization happens only once.
initializedis true, then the application is rendered including the
ApolloProvider. Otherwise a loading screen is shown.
useOfflineMutation is similar to
useMutation but it internally calls
useOfflineMutation will throw an offline error if the mutation was made while offline which needs to be handled in the client.
useOfflineMutation provides additional state that can be used to build UIs.
The following properties are available on the
state returned from
called- true when the mutation was called.
data- the result of the mutation.
error- error returned from the mutation (not including offline errors).
hasError- true when an error occurred.
loading- true when a mutation is in flight or when an offline mutation hasn't been fulfilled yet.
calledWhileOffline- true when mutation was called while offline.
Before the mutation is called:
After the mutation is called while online:
useNetworkStatus hook can be used to build components that render differently depending on the network state. The hook returns
true when the network is online and
false when the network is offline. The hook uses a listener to return a new value when the network status changes.