react-apollo-hooks

Use Apollo Client as React hooks

Use Apollo Client as React hooks.

Warning: Hooks are currently a React RFC and not ready for production. Use at minimum react@16.7.0-alpha.0 to use this package.

CircleCI

Installation

npm install react-apollo-hooks

Example

https://codesandbox.io/s/8819w85jn9 is a port of Pupstagram sample app to react-apollo-hooks.

API

ApolloProvider

Similar to ApolloProvider from react-apollo. Both packages can be used together, if you want to try out using hooks and retain QueryMutationSubscription, etc. HOCs from react-apollo without having to rewrite existing components throughout your app.

In order for this package to work, you need to wrap your component tree with ApolloProvider at an appropriate level, encapsulating all components which will use hooks.

Standalone usage

If you would like to use this package standalone, this can be done with:

import React from 'react';
import { render } from 'react-dom';

import { ApolloProvider } from 'react-apollo-hooks';

const client = ... // create Apollo client

const App = () => (
  <ApolloProvider client={client}>
    <MyRootComponent />
  </ApolloProvider>
);

render(<App />, document.getElementById('root'));
render(, document.getElementById('root'));

Usage with react-apollo

To use with react-apollo’s ApolloProvider already present in your project:

import React from 'react';
import { render } from 'react-dom';

import { ApolloProvider } from 'react-apollo';
import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks';

const client = ... // create Apollo client

const App = () => (
  <ApolloProvider client={client}>
    <ApolloHooksProvider client={client}>
      <MyRootComponent />
   </ApolloHooksProvider>
  </ApolloProvider>
);

render(<App />, document.getElementById('root'));

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.