feat(useQuery): implement skip (#42)

Author: avocadowastaken

src/__tests__/useQuery-test.tsx

@@ -608,3 +608,147 @@ it("shouldn't make obsolete renders in suspense mode", async () => {
 
   expect(TasksWrapperWithProfiler).toHaveCommittedTimes(1);
 });
+
+it('skips query in suspense mode', async () => {
+  const client = createMockClient();
+  const { container } = render(
+    <TasksWrapper client={client} skip query={TASKS_QUERY} />
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Skipped loading of data
+</div>
+`);
+
+  await flushEffectsAndWait();
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Skipped loading of data
+</div>
+`);
+});
+
+it('skips query in non-suspense mode', async () => {
+  const client = createMockClient();
+  const { container } = render(
+    <TasksWrapper client={client} skip suspend={false} query={TASKS_QUERY} />
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Skipped loading of data
+</div>
+`);
+
+  await flushEffectsAndWait();
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Skipped loading of data
+</div>
+`);
+});
+
+it('starts skipped query in suspense mode', async () => {
+  const client = createMockClient();
+  const { rerender, container } = render(
+    <TasksWrapper client={client} skip query={TASKS_QUERY} />
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Skipped loading of data
+</div>
+`);
+
+  await flushEffectsAndWait();
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Skipped loading of data
+</div>
+`);
+
+  rerender(<TasksWrapper client={client} skip={false} query={TASKS_QUERY} />);
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  
+  Loading
+</div>
+`);
+
+  await flushEffectsAndWait();
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  <ul>
+    <li>
+      Learn GraphQL
+    </li>
+    <li>
+      Learn React
+    </li>
+    <li>
+      Learn Apollo
+    </li>
+  </ul>
+</div>
+`);
+});
+
+it('starts skipped query in non-suspense mode', async () => {
+  const client = createMockClient();
+  const { rerender, container } = render(
+    <TasksWrapper client={client} skip suspend={false} query={TASKS_QUERY} />
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Skipped loading of data
+</div>
+`);
+
+  await flushEffectsAndWait();
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Skipped loading of data
+</div>
+`);
+
+  rerender(
+    <TasksWrapper
+      client={client}
+      skip={false}
+      suspend={false}
+      query={TASKS_QUERY}
+    />
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Loading without suspense
+</div>
+`);
+
+  await flushEffectsAndWait();
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  <ul>
+    <li>
+      Learn GraphQL
+    </li>
+    <li>
+      Learn React
+    </li>
+    <li>
+      Learn Apollo
+    </li>
+  </ul>
+</div>
+`);
+});

src/useQuery.ts

@@ -32,6 +32,7 @@ export interface QueryHookOptions<TVariables>
   notifyOnNetworkStatusChange?: boolean;
   pollInterval?: number;
   // custom options of `useQuery` hook
+  skip?: boolean;
   suspend?: boolean;
 }
 
@@ -51,6 +52,7 @@ export function useQuery<TData = any, TVariables = OperationVariables>(
   query: DocumentNode,
   {
     // Hook options
+    skip = false,
     suspend = true,
 
     // Watch options
@@ -115,11 +117,15 @@ export function useQuery<TData = any, TVariables = OperationVariables>(
         partial: result.partial,
       };
     },
-    [responseId, observableQuery]
+    [skip, responseId, observableQuery]
   );
 
   useEffect(
     () => {
+      if (skip) {
+        return;
+      }
+
       const invalidateCurrentResult = () => setResponseId(x => x + 1);
       const subscription = observableQuery.subscribe(
         invalidateCurrentResult,
@@ -132,7 +138,7 @@ export function useQuery<TData = any, TVariables = OperationVariables>(
         subscription.unsubscribe();
       };
     },
-    [observableQuery]
+    [skip, observableQuery]
   );
 
   ensureSupportedFetchPolicy(suspend, fetchPolicy);
@@ -145,6 +151,16 @@ export function useQuery<TData = any, TVariables = OperationVariables>(
     updateQuery: observableQuery.updateQuery.bind(observableQuery),
   };
 
+  if (skip) {
+    // Taken from https://github.com/apollographql/react-apollo/blob/5cb63b3625ce5e4a3d3e4ba132eaec2a38ef5d90/src/Query.tsx#L376-L381
+    return {
+      ...helpers,
+      data: undefined,
+      error: undefined,
+      loading: false,
+    };
+  }
+
   if (suspend && currentResult.partial) {
     // throw a promise - use the react suspense to wait until the data is
     // available