Update handler names for useSubscription hook (#10134)

Deprecates the `onSubscriptionData` and `onSubscriptionComplete` callbacks in favor of the simplified `onData` and `onComplete` callbacks.

docs/shared/subscription-options.mdx

@@ -3,7 +3,10 @@
 | `subscription` | DocumentNode | A GraphQL subscription document parsed into an AST by `graphql-tag`. **Optional** for the `useSubscription` Hook since the subscription can be passed in as the first parameter to the Hook. **Required** for the `Subscription` component. |
 | `variables` | { [key: string]: any } | An object containing all of the variables your subscription needs to execute |
 | `shouldResubscribe` | boolean | Determines if your subscription should be unsubscribed and subscribed again |
-| `onSubscriptionData` | (options: OnSubscriptionDataOptions<TData>) => any | Allows the registration of a callback function, that will be triggered each time the `useSubscription` Hook / `Subscription` component receives data. The callback `options` object param consists of the current Apollo Client instance in `client`, and the received subscription data in `subscriptionData`. |
+| `onSubscriptionData` | **Deprecated.** (options: OnSubscriptionDataOptions<TData>) => any | Allows the registration of a callback function, that will be triggered each time the `useSubscription` Hook / `Subscription` component receives data. The callback `options` object param consists of the current Apollo Client instance in `client`, and the received subscription data in `subscriptionData`. |
+| `onData` | (options: OnDataOptions<TData>) => any | Allows the registration of a callback function, that will be triggered each time the `useSubscription` Hook / `Subscription` component receives data. The callback `options` object param consists of the current Apollo Client instance in `client`, and the received subscription data in `data`. |
+| `onSubscriptionComplete` | **Deprecated.** () => void | Allows the registration of a callback function, that will be triggered when the `useSubscription` Hook / `Subscription` component completes the subscription. |
+| `onComplete` | () => void | Allows the registration of a callback function, that will be triggered each time the `useSubscription` Hook / `Subscription` component completes the subscription. |
 | `fetchPolicy` | FetchPolicy | How you want your component to interact with the Apollo cache. For details, see [Setting a fetch policy](/react/data/queries/#setting-a-fetch-policy). |
 | `context` | Record<string, any> | Shared context between your component and your network interface (Apollo Link). |
 | `client` | ApolloClient | An `ApolloClient` instance. By default `useSubscription` / `Subscription` uses the client passed down via context, but a different client can be passed in. |

package.json

@@ -58,7 +58,7 @@
     {
       "name": "apollo-client",
       "path": "./dist/apollo-client.min.cjs",
-      "maxSize": "31.68kB"
+      "maxSize": "31.71kB"
     }
   ],
   "engines": {

src/react/components/Subscription.tsx

@@ -20,6 +20,8 @@ Subscription.propTypes = {
   variables: PropTypes.object,
   children: PropTypes.func,
   onSubscriptionData: PropTypes.func,
+  onData: PropTypes.func,
   onSubscriptionComplete: PropTypes.func,
+  onComplete: PropTypes.func,
   shouldResubscribe: PropTypes.oneOfType([PropTypes.func, PropTypes.bool])
 } as Subscription<any, any>["propTypes"];

src/react/components/__tests__/client/Subscription.test.tsx

@@ -88,7 +88,37 @@ itAsync('executes the subscription', (resolve, reject) => {
   waitFor(() => expect(renderCount).toBe(5)).then(resolve, reject);
 });
 
-itAsync('calls onSubscriptionData if given', (resolve, reject) => {
+it('calls onData if given', async () => {
+  let count = 0;
+
+  const Component = () => (
+    <Subscription
+      subscription={subscription}
+      onData={(opts: any) => {
+        expect(opts.client).toBeInstanceOf(ApolloClient);
+        const { data } = opts.data;
+        expect(data).toEqual(results[count].result.data);
+        count++;
+      }}
+    />
+  );
+
+  render(
+    <ApolloProvider client={client}>
+      <Component />
+    </ApolloProvider>
+  );
+
+  const interval = setInterval(() => {
+    link.simulateResult(results[count]);
+    if (count >= 3) clearInterval(interval);
+  }, 10);
+
+  await waitFor(() => expect(count).toBe(4));
+});
+
+it('calls onSubscriptionData with deprecation warning if given', async () => {
+  const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
   let count = 0;
 
   const Component = () => (
@@ -109,22 +139,60 @@ itAsync('calls onSubscriptionData if given', (resolve, reject) => {
     </ApolloProvider>
   );
 
+  expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
+  expect(consoleWarnSpy).toHaveBeenCalledWith(
+    expect.stringContaining("'onSubscriptionData' is deprecated")
+  );
+
   const interval = setInterval(() => {
     link.simulateResult(results[count]);
     if (count >= 3) clearInterval(interval);
   }, 10);
 
-  waitFor(() => expect(count).toBe(4)).then(resolve, reject);
+  await waitFor(() => expect(count).toBe(4))
+
+  consoleWarnSpy.mockRestore();
 });
 
-itAsync('should call onSubscriptionComplete if specified', (resolve, reject) => {
+it('should call onComplete if specified', async () => {
   let count = 0;
 
   let done = false;
   const Component = () => (
     <Subscription
       subscription={subscription}
-      onSubscriptionData={() => {
+      onData={() => {
+        count++;
+      }}
+      onComplete={() => {
+        done = true;
+      }}
+    />
+  );
+
+  render(
+    <ApolloProvider client={client}>
+      <Component />
+    </ApolloProvider>
+  );
+
+  const interval = setInterval(() => {
+    link.simulateResult(results[count], count === 3);
+    if (count >= 3) clearInterval(interval);
+  }, 10);
+
+  await waitFor(() => expect(done).toBeTruthy());
+});
+
+it('should call onSubscriptionComplete with deprecation warning if specified', async () => {
+  const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+  let count = 0;
+
+  let done = false;
+  const Component = () => (
+    <Subscription
+      subscription={subscription}
+      onData={() => {
         count++;
       }}
       onSubscriptionComplete={() => {
@@ -139,12 +207,19 @@ itAsync('should call onSubscriptionComplete if specified', (resolve, reject) =>
     </ApolloProvider>
   );
 
+  expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
+  expect(consoleWarnSpy).toHaveBeenCalledWith(
+    expect.stringContaining("'onSubscriptionComplete' is deprecated")
+  );
+
   const interval = setInterval(() => {
     link.simulateResult(results[count], count === 3);
     if (count >= 3) clearInterval(interval);
   }, 10);
 
-  waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
+  await waitFor(() => expect(done).toBeTruthy());
+
+  consoleWarnSpy.mockRestore();
 });
 
 itAsync('executes subscription for the variables passed in the props', (resolve, reject) => {