Added auto dispatch to React useQuery

Author: klis87

.eslintrc

@@ -92,6 +92,8 @@
     "react/jsx-no-script-url": 2,
     "react/jsx-no-useless-fragment": 2,
     "react/jsx-pascal-case": 2,
-    "react/jsx-filename-extension": 2
+    "react/jsx-filename-extension": 2,
+
+    "react-hooks/exhaustive-deps": 0
   }
 }

packages/redux-requests-react/src/use-query.js

@@ -1,8 +1,38 @@
+import { useEffect, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { getQuerySelector } from '@redux-requests/core';
 
-const useQuery = props => {
-  return useSelector(getQuerySelector(props));
+import useDispatchRequest from './use-dispatch-request';
+
+const emptyVariables = [];
+
+const useQuery = ({
+  variables = emptyVariables,
+  dispatch = false,
+  ...selectorProps
+}) => {
+  const dispatchRequest = useDispatchRequest();
+
+  const dispatchQuery = useCallback(() => {
+    if (dispatch) {
+      return dispatchRequest(
+        (selectorProps.action || selectorProps.type)(...variables),
+      );
+    }
+
+    return Promise.resolve(null);
+  }, [dispatch, selectorProps.action, selectorProps.type, ...variables]);
+
+  useEffect(() => {
+    if (dispatch) {
+      dispatchQuery();
+    }
+  }, [dispatch, dispatchQuery]);
+
+  return {
+    ...useSelector(getQuerySelector(selectorProps)),
+    load: dispatchQuery,
+  };
 };
 
 export default useQuery;

packages/redux-requests-react/types/index.d.spec.tsx

@@ -9,20 +9,24 @@ import {
   useDispatchRequest,
 } from './index';
 
-const fetchBooks: () => RequestAction<
-  { raw: boolean },
-  { parsed: boolean }
-> = () => {
+function fetchBooks(
+  x: number,
+  y: string,
+  z: { a: boolean },
+): RequestAction<{ raw: boolean }, { parsed: boolean }> {
   return {
     type: 'FETCH_BOOKS',
     request: {
       url: '/books',
+      x,
+      y,
+      a: z.a,
     },
     meta: {
       getData: data => ({ parsed: data.raw }),
     },
   };
-};
+}
 
 function fetchBook(id: string): RequestAction<{ id: string; title: string }> {
   return {
@@ -34,12 +38,23 @@ function fetchBook(id: string): RequestAction<{ id: string; title: string }> {
 }
 
 const query = useQuery<string>({ type: 'Query' });
-const query2 = useQuery({
+const query2 = useQuery<number>({
   type: 'Query',
   multiple: true,
   defaultData: {},
+  variables: [{ x: 1, y: 2 }],
 });
-const query3 = useQuery({ type: fetchBooks });
+query2.data;
+
+const query3 = useQuery({
+  type: fetchBooks,
+  action: fetchBooks,
+  dispatch: true,
+  variables: [1, '1', { a: true }],
+});
+query3.data;
+const x = query3.load();
+
 const query4 = useQuery({ type: 'FETCH_BOOKS', action: fetchBooks });
 
 const mutation = useMutation({ type: 'Mutation' });
@@ -168,7 +183,7 @@ const QueryDispatcher = () => {
   return (
     <button
       onClick={async () => {
-        const response = await dispatch(fetchBooks());
+        const response = await dispatch(fetchBooks(1, '1', { a: false }));
         response.data.parsed;
         const response2 = await dispatch(fetchBook('1'));
         response2.data.title;

packages/redux-requests-react/types/index.d.ts

@@ -3,7 +3,7 @@ import {
   QueryState,
   MutationState,
   RequestAction,
-  dispatchRequest,
+  DispatchRequest,
 } from '@redux-requests/core';
 
 interface LoadingProps {
@@ -57,17 +57,43 @@ interface MutationProps {
 
 export class Mutation extends React.Component<MutationProps> {}
 
-export function useQuery<QueryStateData = any>(props: {
-  type: string | ((...params: any[]) => RequestAction<any, QueryStateData>);
-  action?: (...params: any[]) => RequestAction<any, QueryStateData>;
+interface RequestCreator<QueryStateData = any> {
+  (...args: any[]): RequestAction<any, QueryStateData>;
+}
+
+type GetQueryStateData<T extends RequestCreator> = T extends RequestCreator<
+  infer QueryStateData
+>
+  ? QueryStateData
+  : never;
+
+export function useQuery<
+  Data = undefined,
+  QueryCreator extends RequestCreator = any
+>(props: {
+  type: string | QueryCreator;
+  action?: QueryCreator;
   requestKey?: string;
   multiple?: boolean;
   defaultData?: any;
-}): QueryState<QueryStateData>;
+  dispatch?: boolean;
+  variables?: Parameters<QueryCreator>;
+}): QueryState<
+  Data extends undefined ? GetQueryStateData<QueryCreator> : Data
+> & {
+  load: () => Promise<{
+    data?: QueryState<
+      Data extends undefined ? GetQueryStateData<QueryCreator> : Data
+    >;
+    error?: null;
+    isAborted?: true;
+    action: any;
+  }>;
+};
 
 export function useMutation(props: {
   type: string | ((...params: any[]) => RequestAction);
   requestKey?: string;
 }): MutationState;
 
-export function useDispatchRequest(): typeof dispatchRequest;
+export function useDispatchRequest(): DispatchRequest;

packages/redux-requests/types/index.d.ts

@@ -1,13 +1,15 @@
 import { AnyAction, Reducer, Middleware, Store } from 'redux';
 
-export function dispatchRequest<QueryStateData = any>(
-  requestAction: RequestAction<any, QueryStateData>,
-): Promise<{
-  data?: QueryStateData;
-  error?: null;
-  isAborted?: true;
-  action: any;
-}>;
+export interface DispatchRequest {
+  <QueryStateData = any>(
+    requestAction: RequestAction<any, QueryStateData>,
+  ): Promise<{
+    data?: QueryStateData;
+    error?: null;
+    isAborted?: true;
+    action: any;
+  }>;
+}
 
 interface FilterActions {
   (action: AnyAction): boolean;
@@ -18,7 +20,7 @@ interface ModifyData {
 }
 
 interface RequestsStore extends Store {
-  dispatchRequest: typeof dispatchRequest;
+  dispatchRequest: DispatchRequest;
 }
 
 export const createRequestsStore: (store: Store) => RequestsStore;