fix: stop double rendering of same quiers

We rely on graphql-tag to make sure that we have the same queries, which
means all users need to use graphql-tag now for their queries.

BREAKING CHANGE: Please use graphql-tag to tag your queries

Author: Daniel Schmidt

src/index.ts

@@ -1,24 +1,31 @@
 import { useMemo } from "react";
-import { GraphQLSchema } from "graphql";
+import { GraphQLSchema, DocumentNode } from "graphql";
 import graphql from "reactive-graphql";
-import gql from "graphql-tag";
 
 import useObservable from "./useObservable";
 
+type ReactiveGraphQLResponse = {
+  data: any;
+};
+
 export default function getReactiveGraphqlReact(schema: GraphQLSchema) {
-  return function reactiveGraphqlReact(query: string, context?: Object) {
-    const observable = useMemo(
-      () =>
-        graphql(
-          gql`
-            ${query}
-          `,
-          schema,
-          context || {}
-        ),
-      [query, JSON.stringify(context)]
-    );
+  if (!(schema instanceof GraphQLSchema)) {
+    throw new Error("schema needs to be a GraphQLSchema");
+  }
 
-    return useObservable(observable, null);
+  return function useReactiveGraphqlReact(
+    query: DocumentNode,
+    context?: Object
+  ) {
+    const observable = useMemo(() => graphql(query, schema, context || {}), [
+      query,
+      JSON.stringify(context)
+    ]);
+
+    const [data, errors] = useObservable<ReactiveGraphQLResponse, any[]>(
+      observable,
+      null
+    );
+    return [data === null ? data : data.data, errors];
   };
 }

src/useObservable.ts

@@ -1,16 +1,18 @@
 import { useState, useEffect } from "react";
+import { Observable } from "rxjs";
 
-export default function useObservable(observable$, initialValue) {
+export default function useObservable<T, E>(
+  observable$: Observable<T>,
+  initialValue: T | null = null
+): [T, E] {
   const [value, update] = useState(initialValue);
   const [error, updateError] = useState(null);
 
-  useEffect(
-    () => {
-      const s = observable$.subscribe(update, updateError);
-      return () => s.unsubscribe();
-    },
-    [observable$]
-  );
+  useEffect(() => {
+    const s = observable$.subscribe(update, updateError);
+
+    return () => s.unsubscribe();
+  }, [observable$]);
 
   return [value, error];
 }