feat: skip option for subscription (#1229)

* feat: skip option for subscription

* fix: move skip check

* docs(subscription): add skip option

* docs: revert `options` -> `operation`

Author: brianjd

README.md

@@ -424,6 +424,7 @@ To use subscription you can use either [subscriptions-transport-ws](https://gith
   - `variables`: Object (optional) - Any variables the query might need
   - `operationName`: String (optional) - If your query has multiple operations, you can choose which operation you want to call.
   - `client`: GraphQLClient - If a GraphQLClient is explicitly passed as an option, then it will be used instead of the client from the `ClientContext`.
+  - `skip`: Boolean (optional) - If true, the subscription will not be created.
 - `callback`: Function - This will be invoked when the subscription receives an event from your GraphQL server - it will receive an object with the typical GraphQL response of `{ data: <your result>, errors?: [Error] }`
 
 **Usage**:

packages/graphql-hooks/src/useSubscription.ts

@@ -10,7 +10,7 @@ function useSubscription<
   Variables extends object = object,
   TGraphQLError = object
 >(
-  options: UseSubscriptionOperation<Variables>,
+  options: UseSubscriptionOperation<Variables> & { skip?: boolean },
   callback: (response: {
     data?: ResponseData
     errors?: TGraphQLError[]
@@ -29,6 +29,10 @@ function useSubscription<
   }
 
   useDeepCompareEffect(() => {
+    if (options.skip) {
+      return
+    }
+
     const request = {
       query: options.query,
       variables: options.variables
@@ -51,7 +55,7 @@ function useSubscription<
     return () => {
       subscription.unsubscribe()
     }
-  }, [options.query, options.variables])
+  }, [options.query, options.variables, options.skip])
 }
 
 export default useSubscription

packages/graphql-hooks/test-jsdom/unit/useSubscription.test.tsx

@@ -371,4 +371,29 @@ describe('useSubscription', () => {
       return { unsubscribe, createSubscription: mockClient.createSubscription }
     }
   })
+
+  it('skips creating the subscription when skip is true', () => {
+    const subscriptionClient = new MockSubscriptionClient({
+      type: 'DATA',
+      data: {}
+    })
+    mockClient = {
+      createSubscription: jest.fn(() => {
+        return subscriptionClient.request()
+      }),
+      subscriptionClient
+    }
+    const request = {
+      query: TEST_SUBSCRIPTION,
+      variables: {
+        id: 1
+      },
+      skip: true
+    }
+    renderHook(() => useSubscription(request, jest.fn()), {
+      wrapper: Wrapper
+    })
+
+    expect(mockClient.createSubscription).not.toHaveBeenCalled()
+  })
 })