updated single typings, adding test for useSingle hook, setup jest an…

…d babel

package.json

@@ -9,11 +9,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
+    "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@types/jest": "^26.0.14",
     "@types/node": "^13.7.6",
     "@types/react": "^16.9.23",
+    "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-define": "^2.0.0",
+    "jest": "^26.4.2",
     "lerna": "^3.22.1",
     "typescript": "^3.8.2",
     "webpack": "^4.41.6",

packages/react-hooks/multi.ts

@@ -31,7 +31,7 @@ Options:
          
 */
 
-import { useQuery, gql } from "@apollo/client";
+import { useQuery, gql, QueryResult } from "@apollo/client";
 import { useState } from "react";
 import { multiClientTemplate, VulcanGraphqlModel } from "@vulcanjs/graphql";
 import merge from "lodash/merge";
@@ -131,21 +131,17 @@ const buildQueryOptions = (options, paginationInput = {}, props) => {
   };
 };
 
-const buildResult = (
+const buildMultiResult = (
   options,
   { fragmentName, fragment, resolverName },
   { setPaginationInput, paginationInput, initialPaginationInput },
-  returnedProps
-) => {
+  queryResult: QueryResult
+): MultiQueryResult => {
   //console.log('returnedProps', returnedProps);
-  const {
-    refetch,
-    networkStatus,
-    error,
-    fetchMore,
-    data,
-    graphQLErrors,
-  } = returnedProps;
+
+  // workaround for https://github.com/apollographql/apollo-client/issues/2810
+  const graphQLErrors = get(queryResult, "error.networkError.result.errors");
+  const { refetch, networkStatus, error, fetchMore, data } = queryResult;
   // Note: Scalar types like Dates are NOT converted. It should be done at the UI level.
   const results = data && data[resolverName] && data[resolverName].results;
   const totalCount =
@@ -161,16 +157,13 @@ const buildResult = (
   }
 
   return {
+    ...queryResult,
     // see https://github.com/apollostack/apollo-client/blob/master/src/queries/store.ts#L28-L36
     // note: loading will propably change soon https://github.com/apollostack/apollo-client/issues/831
-    loading,
     loadingInitial,
     loadingMore,
     results,
     totalCount,
-    refetch,
-    networkStatus,
-    error,
     networkError: error && error.networkError,
     graphQLErrors,
     count: results && results.length,
@@ -237,7 +230,20 @@ interface UseMultiOptions {
   fragmentName?: string;
   extraQueries?: string; // Get more data alongside the objects
 } // & useQuery options?
-type QueryResult = { graphQLErrors: any } & ReturnType<typeof useQuery>;
+interface MultiQueryResult<TData = any> extends QueryResult<TData> {
+  graphQLErrors: any;
+  loadingInitial: boolean;
+  loadingMore: boolean;
+  loadMore: Function;
+  loadMoreInc: Function;
+  results?: Array<TData>;
+  totalCount?: number;
+  count?: number;
+  networkError?: any;
+  graphqlErrors?: Array<any>;
+  fragment: string;
+  fragmentName: string;
+}
 
 export const useMulti = (options: UseMultiOptions, props = {}) => {
   const initialPaginationInput = getInitialPaginationInput(options, props);
@@ -274,16 +280,13 @@ export const useMulti = (options: UseMultiOptions, props = {}) => {
   });
 
   const queryOptions = buildQueryOptions(options, paginationInput, props);
-  const queryRes: Partial<QueryResult> = useQuery(query, queryOptions);
-
-  // workaround for https://github.com/apollographql/apollo-client/issues/2810
-  queryRes.graphQLErrors = get(queryRes, "error.networkError.result.errors");
+  const queryResult: QueryResult = useQuery(query, queryOptions);
 
-  const result = buildResult(
+  const result = buildMultiResult(
     options,
     { fragment, fragmentName, resolverName },
     { setPaginationInput, paginationInput, initialPaginationInput },
-    queryRes
+    queryResult
   );
 
   return result;

packages/react-hooks/package.json

@@ -20,5 +20,9 @@
   "gitHead": "f4594745e0a5c455a2f0c3e78fa3ff7a35ef4c95",
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "@testing-library/react-hooks": "^3.4.1",
+    "react-test-renderer": "^16.13.1"
   }
 }

packages/react-hooks/single.ts

@@ -1,3 +1,7 @@
+/**
+ * Differences with Vulcan Meteor:
+ * - No more "propertyName" option, data are returned in the "document" shortcut
+ */
 import _merge from "lodash/merge";
 
 import { singleClientTemplate, VulcanGraphqlModel } from "@vulcanjs/graphql";
@@ -8,6 +12,7 @@ import {
   useQuery,
   QueryOptions,
   gql,
+  QueryResult,
 } from "@apollo/client";
 import { QueryInput } from "./typings";
 
@@ -21,6 +26,11 @@ export const buildSingleQuery = ({
   fragmentName,
   fragment,
   extraQueries,
+}: {
+  typeName: string;
+  fragmentName: string;
+  fragment: string;
+  extraQueries?: string;
 }) => {
   const query = gql`
     ${singleClientTemplate({ typeName, fragmentName, extraQueries })}
@@ -70,27 +80,30 @@ const buildQueryOptions = <TData = any, TVariables = OperationVariables>(
   };
 };
 
-const buildResult = (
-  options,
+interface SingleResult<TData = any> extends QueryResult<TData> {
+  fragmentName: string;
+  fragment: string;
+  result: TData; // shortcut to get the document
+}
+const buildSingleResult = <TData = any>(
+  options: UseSingleOptions,
   { fragmentName, fragment, resolverName },
-  returnedProps
-) => {
-  const { /* ownProps, */ data, error } = returnedProps;
-  const propertyName = options.propertyName || "document";
-  const props = {
-    ...returnedProps,
+  queryResult: QueryResult<TData>
+): SingleResult<TData> => {
+  const { /* ownProps, */ data, error } = queryResult;
+  const propertyName = "document";
+  const result = {
+    ...queryResult,
     // Note: Scalar types like Dates are NOT converted. It should be done at the UI level.
-    [propertyName]: data && data[resolverName] && data[resolverName].result,
+    result: data && data[resolverName] && data[resolverName].result,
     fragmentName,
     fragment,
-    data,
-    error,
   };
   if (error) {
     // eslint-disable-next-line no-console
     console.log(error);
   }
-  return props;
+  return result;
 };
 
 interface SingleInput extends QueryInput {
@@ -122,11 +135,11 @@ export const useSingle = (options: UseSingleOptions, props = {}) => {
     extraQueries,
   });
 
-  const queryRes = useQuery(query, buildQueryOptions(options, props));
-  const result = buildResult(
+  const queryResult = useQuery(query, buildQueryOptions(options, props));
+  const result = buildSingleResult(
     options,
     { fragment, fragmentName, resolverName },
-    queryRes
+    queryResult
   );
   return result;
 };