feat(useQuery): change default value for the suspend option to false

BREAKING CHANGE: The default for the `suspend` option of `useQuery` is changed to `false`, and that hook no longer uses suspense by default. Suspense for data fetching is not recommended yet for production code. Please look at the [issue #69](#69) for details.
trojanowski · Feb 12, 2019 · d554aa4 · d554aa4
1 parent 56abacc
commit d554aa4
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -89,8 +89,13 @@ const GET_DOGS = gql`
 `;
 
 const Dogs = () => {
-  const { data, error } = useQuery(GET_DOGS);
-  if (error) return `Error! ${error.message}`;
+  const { data, error, loading } = useQuery(GET_DOGS);
+  if (loading) {
+    return <div>Loading...</div>;
+  };
+  if (error) {
+    return `Error! ${error.message}`;
+  };
 
   return (
     <ul>
@@ -100,35 +105,38 @@ const Dogs = () => {
     </ul>
   );
 };
+
 ```
 
-To check if data is loaded use the
-[Suspense](https://reactjs.org/docs/code-splitting.html#suspense) component:
+### Usage with Suspense (experimental)
 
-```javascript
-import React, { Suspense } from 'react';
+You can use `useQuery` with [React Suspense](https://www.youtube.com/watch?v=6g3g0Q_XVb4)
+with the `{ suspend: true }` option.
+Please note that it's not yet recommended to use it in production. Please look
+at the [issue #69](https://github.com/trojanowski/react-apollo-hooks/issues/69)
+for details.
 
-const MyComponent = () => (
-  <Suspense fallback={<div>Loading...</div>}>
-    <Dogs />
-  </Suspense>
-);
-```
-
-Alternatively you can use the `useQuery` hook without suspense with the
-`{ suspend: false }` option. It's required if you want to use non-standard fetch
-policy. You have to manage loading state by yourself in that case:
+Example usage:
 
 ```javascript
 import gql from 'graphql-tag';
+import React, { Suspense } from 'react';
 import { useQuery } from 'react-apollo-hooks';
 
-const GET_DOGS = gql`...`;
+const GET_DOGS = gql`
+  {
+    dogs {
+      id
+      breed
+    }
+  }
+`;
 
 const Dogs = () => {
-  const { data, error, loading } = useQuery(GET_DOGS, { suspend: false });
-  if (loading) return <div>Loading...</div>;
-  if (error) return `Error! ${error.message}`;
+  const { data, error } = useQuery(GET_DOGS, { suspend: true });
+  if (error) {
+    return `Error! ${error.message}`;
+  }
 
   return (
     <ul>
@@ -138,6 +146,12 @@ const Dogs = () => {
     </ul>
   );
 };
+
+const MyComponent = () => (
+  <Suspense fallback={<div>Loading...</div>}>
+    <Dogs />
+  </Suspense>
+);
 ```
 
 ## useMutation
@@ -264,15 +278,15 @@ component is not supported. You can use `unstable_SuspenseSSR` provided
 by this library instead:
 
 ```javascript
-import { unstable_SuspenseSSR } from 'react-apollo-hooks';
+import { unstable_SuspenseSSR as UnstableSuspenseSSR } from 'react-apollo-hooks';
 
 function MyComponent() {
   return (
-    <unstable_SuspenseSSR fallback={<Spinner />}>
+    <UnstableSuspenseSSR fallback={<Spinner />}>
       <div>
         <ComponentWithGraphqlQuery />
       </div>
-    </unstable_SuspenseSSR>
+    </UnstableSuspenseSSR>
   );
 }
 ```
diff --git a/src/__tests__/useMutation-test.tsx b/src/__tests__/useMutation-test.tsx
@@ -1,5 +1,5 @@
 import gql from 'graphql-tag';
-import React, { Suspense } from 'react';
+import React from 'react';
 import { cleanup, fireEvent, render } from 'react-testing-library';
 
 import { ApolloProvider, useMutation, useQuery } from '..';
@@ -160,13 +160,17 @@ afterEach(cleanup);
 
 it('should create a function to perform mutations', async () => {
   function TasksWithMutation() {
-    const { data, error } = useQuery(TASKS_QUERY);
+    const { data, error, loading } = useQuery(TASKS_QUERY);
     const toggleTask = useMutation(TOGGLE_TASK_MUTATION);
 
     if (error) {
       throw error;
     }
 
+    if (loading) {
+      return <>Loading</>;
+    }
+
     return (
       <TaskList
         onChange={task => toggleTask({ variables: { taskId: task.id } })}
@@ -178,9 +182,7 @@ it('should create a function to perform mutations', async () => {
   const client = createClient({ mocks: TASKS_MOCKS });
   const { container } = render(
     <ApolloProvider client={client}>
-      <Suspense fallback={<div>Loading</div>}>
-        <TasksWithMutation />
-      </Suspense>
+      <TasksWithMutation />
     </ApolloProvider>
   );
 
@@ -199,7 +201,7 @@ it('should create a function to perform mutations', async () => {
 
 it('should allow to pass options forwarded to the mutation', async () => {
   function TasksWithMutation() {
-    const { data, error } = useQuery(TASKS_QUERY);
+    const { data, error, loading } = useQuery(TASKS_QUERY);
     const addTask = useMutation<any, { input: Partial<TaskFragment> }>(
       ADD_TASK_MUTATION,
       {
@@ -222,6 +224,10 @@ it('should allow to pass options forwarded to the mutation', async () => {
       throw error;
     }
 
+    if (loading) {
+      return <>Loading</>;
+    }
+
     return (
       <>
         <TaskList onChange={noop} tasks={data.tasks} />
@@ -235,9 +241,7 @@ it('should allow to pass options forwarded to the mutation', async () => {
   const client = createClient({ mocks: TASKS_MOCKS });
   const { container, getByTestId } = render(
     <ApolloProvider client={client}>
-      <Suspense fallback={<div>Loading</div>}>
-        <TasksWithMutation />
-      </Suspense>
+      <TasksWithMutation />
     </ApolloProvider>
   );