Merge pull request #18 from molindo/apollo-hooks

Add support for react-apollo@^3.0.0

Author: amannn

CHANGELOG.md

@@ -1,6 +1,23 @@
 # Changelog
+
+## 3.0
+
+### New features
+
+ - Support for `@apollo/react-*` packages.
+ - Export `NetworkStatus` and `OperationError` types for TypeScript users.
+
+### Breaking changes
+
+ - Raised required peer dependency version of `apollo-client` to `^2.6.0`.
+ - You need to depend on a React integration from one of the `@apollo/react-*` packages. See [upgrade guide](https://www.apollographql.com/docs/react/migrating/hooks-migration/).
+
+Special thanks to [Matth10](https://github.com/Matth10), [rcohen-unext](https://github.com/rcohen-unext) and [MasterKale](https://github.com/MasterKale) for beta testing this release in their apps and code review.
+
 ## 2.0
 
+Compatible with `react-apollo@^2`. See [usage instructions](https://github.com/molindo/react-apollo-network-status/tree/e08e7b43e2e3447ec0d9399262d17b162162805e#react-apollo-network-status).
+
 ### New features
 
  - Use hooks for reading the network status.
@@ -18,6 +35,12 @@
  - The opt-out property `context: {useNetworkStatusNotifier: false}` was renamed to `useApolloNetworkStatus`.
  - If you provide a custom reducer, there's now a new signature where you only provide one function which handles action types instead of separate functions. This pattern composes better since you usually have to cover all network events to implement a given feature.
 
+## 1.1
+
+Subscription operations no longer affect the loading property, but they can potentially set the error property (@shurik239 in [#9](https://github.com/molindo/react-apollo-network-status/pull/9)).
+
 ## 1.0
 
-Initial stable release
+Compatible with `react-apollo@<=2`. See [usage instructions](https://github.com/molindo/react-apollo-network-status/tree/583a00f6344e05edcfee90bee0823a7736f56021#react-apollo-network-status).
+
+Initial stable release.

README.md

@@ -13,7 +13,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {ApolloClient} from 'apollo-client';
 import {createHttpLink} from 'apollo-link-http';
-import {ApolloProvider} from 'react-apollo';
+import {ApolloProvider} from '@apollo/react-common';
 import {ApolloNetworkStatusProvider, useApolloNetworkStatus} from 'react-apollo-network-status';
 
 function GlobalLoadingIndicator() {
@@ -42,6 +42,10 @@ const element = (
 ReactDOM.render(element, document.getElementById('root'));
 ```
 
+> **Note:** The current version of this library supports the latest [`@apollo/react-*` packages](https://www.apollographql.com/docs/react/migrating/hooks-migration/). If you're using an older version of React Apollo and don't want to upgrade, you can use an older version of this library (see [changelog](./CHANGELOG.md)).
+
+## Returned data
+
 The hook `useApolloNetworkStatus` provides an object with the following properties:
 
 ```tsx
@@ -69,7 +73,6 @@ type OperationError = {
 
 The error objects have the same structure as the one provided by [apollo-link-error](https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-error). Subscriptions currently don't affect the status returned by `useApolloNetworkStatus`.
 
-
 Useful applications are for example integrating with [NProgress.js](http://ricostacruz.com/nprogress/) or showing errors with [snackbars from Material UI](http://www.material-ui.com/#/components/snackbar).
 
 ## Advanced usage

example/DataFetcher.tsx

@@ -1,7 +1,6 @@
-import React, {useState} from 'react';
+import {useQuery} from '@apollo/react-hooks';
 import gql from 'graphql-tag';
-import {Query} from 'react-apollo';
-import usePendingPromise from './usePendingPromise';
+import React, {useState, useEffect} from 'react';
 
 type Props = {
   isBroken?: boolean;
@@ -29,69 +28,60 @@ interface Variables {
 
 export default function DataFetcher({isBroken}: Props) {
   const [skip, setSkip] = useState(true);
-  const [queryPromise, setQueryPromise] = usePendingPromise();
+  const {data, loading, error, refetch} = useQuery<Data, Variables>(query, {
+    context: {useApolloNetworkStatus: true},
+    notifyOnNetworkStatusChange: true,
+    fetchPolicy: 'network-only',
+    skip,
+    variables: isBroken ? undefined : {id: '1'}
+  });
 
-  function onFetch() {
+  function onFetchClick() {
     setSkip(false);
   }
 
-  return (
-    <p>
-      <Query<Data, Variables>
-        context={{useApolloNetworkStatus: true}}
-        fetchPolicy="network-only"
-        onError={error => {
-          // eslint-disable-next-line no-console
-          console.error(error);
-        }}
-        query={query}
-        skip={skip}
-        variables={isBroken ? undefined : {id: '1'}}
-      >
-        {({data, loading, error, refetch}) => {
-          function onRefetchClick() {
-            const result = refetch();
-            setQueryPromise(result);
-          }
+  function onRefetchClick() {
+    refetch();
+  }
+
+  function onRetryClick() {
+    refetch();
+  }
 
-          function onRetryClick() {
-            refetch();
-          }
+  useEffect(() => {
+    if (error) console.error(error);
+  }, [error]);
 
-          if (skip) {
-            return (
-              <span>
-                Idle{' '}
-                <button onClick={onFetch}>
-                  {isBroken ? 'Broken fetch' : 'Fetch'}
-                </button>
-              </span>
-            );
-          }
+  let content;
+  if (skip) {
+    content = (
+      <>
+        Idle{' '}
+        <button onClick={onFetchClick}>
+          {isBroken ? 'Broken fetch' : 'Fetch'}
+        </button>
+      </>
+    );
+  } else if (data && data.user) {
+    content = (
+      <>
+        User: {data.user.name}{' '}
+        <button disabled={loading} onClick={onRefetchClick}>
+          Refetch
+        </button>
+      </>
+    );
+  } else if (loading) {
+    content = 'Loading …';
+  } else if (error) {
+    content = (
+      <>
+        Error <button onClick={onRetryClick}>Retry</button>{' '}
+      </>
+    );
+  } else {
+    throw new Error('Unexpected state');
+  }
 
-          return (
-            <span>
-              {data && data.user ? (
-                <span>
-                  User: {data.user.name}{' '}
-                  <button
-                    disabled={queryPromise != null}
-                    onClick={onRefetchClick}
-                  >
-                    Refetch
-                  </button>
-                </span>
-              ) : loading ? (
-                'Loading …'
-              ) : error ? (
-                <>
-                  Error <button onClick={onRetryClick}>Retry</button>
-                </>
-              ) : null}
-            </span>
-          );
-        }}
-      </Query>
-    </p>
-  );
+  return <p>{content}</p>;
 }

example/DataUpdater.tsx

@@ -1,7 +1,6 @@
-import React, {FormEvent} from 'react';
 import gql from 'graphql-tag';
-import {Mutation} from 'react-apollo';
-import usePendingPromise from './usePendingPromise';
+import {useMutation} from '@apollo/react-hooks';
+import React, {FormEvent, useState} from 'react';
 
 const mutation = gql`
   mutation updateUser($id: ID!, $user: UserInput!) {
@@ -27,32 +26,27 @@ interface Variables {
 }
 
 export default function DataUpdater() {
-  const [submissionPromise, setSubmissionPromise] = usePendingPromise<any>();
+  const [name, setName] = useState('');
+  const [updateUser, result] = useMutation<Data, Variables>(mutation);
 
-  return (
-    <Mutation<Data, Variables> mutation={mutation}>
-      {updateUser => {
-        function onSubmit(e: FormEvent) {
-          e.preventDefault();
-
-          const nameInput = e.currentTarget.children[0];
-          if (!(nameInput instanceof HTMLInputElement)) {
-            throw new Error('`name` input not found');
-          }
+  function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    updateUser({variables: {id: '1', user: {name}}});
+  }
 
-          const result = updateUser({
-            variables: {id: '1', user: {name: nameInput.value}}
-          });
-          setSubmissionPromise(result);
-        }
+  function onNameInputChange(event: FormEvent<HTMLInputElement>) {
+    setName(event.currentTarget.value);
+  }
 
-        return (
-          <form onSubmit={onSubmit}>
-            <input name="name" placeholder="Update user name" type="text" />{' '}
-            <input disabled={submissionPromise != null} type="submit" />
-          </form>
-        );
-      }}
-    </Mutation>
+  return (
+    <form onSubmit={onSubmit}>
+      <input
+        onChange={onNameInputChange}
+        placeholder="Update user name"
+        type="text"
+        value={name}
+      />{' '}
+      <input disabled={result.loading} type="submit" />
+    </form>
   );
 }

example/NetworkStatusBoundary.tsx

@@ -10,17 +10,15 @@ export default function NetworkStatusBoundary({children}: Props) {
   const [enableBubbling, setEnableBubbling] = useState(false);
   const [optIn, setOptIn] = useState(false);
 
-  function onBubblingCheckboxChange(e: SyntheticEvent<HTMLInputElement>) {
-    setEnableBubbling(e.currentTarget.checked);
+  function onBubblingCheckboxChange(event: SyntheticEvent<HTMLInputElement>) {
+    setEnableBubbling(event.currentTarget.checked);
   }
 
-  function onOptInCheckboxChange(e: SyntheticEvent<HTMLInputElement>) {
-    setOptIn(e.currentTarget.checked);
+  function onOptInCheckboxChange(event: SyntheticEvent<HTMLInputElement>) {
+    setOptIn(event.currentTarget.checked);
   }
 
   return (
-    // @ts-ignore False positive which asks for `client` property. This
-    // prop is injected via a HOC and not needed here.
     <ApolloNetworkStatusProvider enableBubbling={enableBubbling}>
       <div style={{backgroundColor: '#2368841a'}}>
         <div
@@ -48,7 +46,7 @@ export default function NetworkStatusBoundary({children}: Props) {
                 onChange={onOptInCheckboxChange}
                 type="checkbox"
               />
-              Ignore mutation
+              Ignore mutation loading state
             </label>
           </div>
         </div>

example/NetworkStatusReporter.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import {Operation} from 'apollo-link';
+import React from 'react';
 import {useApolloNetworkStatus} from '../src';
 
 type Props = {

example/index.tsx

@@ -1,6 +1,6 @@
+import {ApolloProvider} from '@apollo/react-common';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {ApolloProvider} from 'react-apollo';
 import createClient from '../src/__testUtils__/createClient';
 import DataFetcher from './DataFetcher';
 import DataUpdater from './DataUpdater';