feat: allow to use useQuery hook without suspense

README.md

@@ -96,7 +96,7 @@ const Dogs = () => (
 );
 ```
 
-Note: to check if data is loaded use the [Suspense](https://reactjs.org/docs/code-splitting.html#suspense) component:
+To check if data is loaded use the [Suspense](https://reactjs.org/docs/code-splitting.html#suspense) component:
 
 ```javascript
 import React, { Suspense } from 'react';
@@ -112,6 +112,34 @@ const MyComponent = () => {
 }
 ```
 
+Alternatively you can use the `useQuery` hook without suspense with the
+`{ suspense: 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:
+
+```javascript
+import gql from 'graphql-tag';
+import { useQuery } from 'react-apollo-hooks';
+
+const GET_DOGS = gql`...`;
+
+const Dogs = () => (
+  const { data, error, loading } = useQuery(GET_DOGS);
+  if (loading) return <div>Loading...</div>;
+  if (error) return `Error! ${error.message}`;
+
+  return (
+    <ul>
+      {data.dogs.map(dog => (
+        <li key={dog.id}>
+          {dog.breed}
+        </li>
+      ))}
+    </ul>
+  );
+);
+```
+
 ## useMutation
 
 ```javascript

src/index.d.ts

@@ -30,7 +30,9 @@ export function useApolloClient<CacheShape = any>(): ApolloClient<
   CacheShape
 > | null;
 
-type QueryHookOptions<TVariables> = Omit<QueryOptions<TVariables>, 'query'>;
+type QueryHookOptions<TVariables> = Omit<QueryOptions<TVariables>, 'query'> & {
+  suspend: boolean;
+};
 
 export function useQuery<TData = any, TVariables = OperationVariables>(
   query: DocumentNode,

src/index.js

@@ -17,7 +17,12 @@ export function useApolloClient() {
 
 export function useQuery(
   query,
-  { variables, context: apolloContextOptions, ...restOptions } = {}
+  {
+    variables,
+    suspend = true,
+    context: apolloContextOptions,
+    ...restOptions
+  } = {}
 ) {
   const client = useApolloClient();
   const [result, setResult] = useState();
@@ -47,6 +52,8 @@ export function useQuery(
     ]
   );
 
+  ensureSupportedFetchPolicy(restOptions.fetchPolicy, suspend);
+
   const helpers = {
     fetchMore: opts => observableQuery.current.fetchMore(opts),
   };
@@ -70,7 +77,7 @@ export function useQuery(
     });
     observableQuery.current = watchedQuery;
     const currentResult = watchedQuery.currentResult();
-    if (currentResult.partial) {
+    if (currentResult.partial && suspend) {
       // throw a promise - use the react suspense to wait until the data is
       // available
       throw watchedQuery.result();
@@ -88,6 +95,17 @@ export function useMutation(mutation, baseOptions) {
     client.mutate({ mutation, ...baseOptions, ...localOptions });
 }
 
+function ensureSupportedFetchPolicy(fetchPolicy, suspend) {
+  if (!suspend) {
+    return;
+  }
+  if (fetchPolicy && fetchPolicy !== 'cache-first') {
+    throw new Error(
+      `Fetch policy ${fetchPolicy} is not supported without 'suspend: false'`
+    );
+  }
+}
+
 function objToKey(obj) {
   if (!obj) {
     return null;