Create makeQuery hook

src/categories/queries.ts

@@ -1,6 +1,7 @@
 import gql from "graphql-tag";
 
-import { pageInfoFragment, TypedQuery } from "../queries";
+import makeQuery from "@saleor/hooks/makeQuery";
+import { pageInfoFragment } from "../queries";
 import {
   CategoryDetails,
   CategoryDetailsVariables
@@ -65,7 +66,7 @@ export const rootCategories = gql`
     }
   }
 `;
-export const TypedRootCategoriesQuery = TypedQuery<RootCategories, {}>(
+export const useRootCategoriesQuery = makeQuery<RootCategories, {}>(
   rootCategories
 );
 
@@ -119,7 +120,7 @@ export const categoryDetails = gql`
     }
   }
 `;
-export const TypedCategoryDetailsQuery = TypedQuery<
+export const useCategoryDetailsQuery = makeQuery<
   CategoryDetails,
   CategoryDetailsVariables
 >(categoryDetails);

src/categories/views/CategoryDetails.tsx

@@ -28,7 +28,7 @@ import {
   useCategoryDeleteMutation,
   useCategoryUpdateMutation
 } from "../mutations";
-import { TypedCategoryDetailsQuery } from "../queries";
+import { useCategoryDetailsQuery } from "../queries";
 import { CategoryBulkDelete } from "../types/CategoryBulkDelete";
 import { CategoryDelete } from "../types/CategoryDelete";
 import { CategoryUpdate } from "../types/CategoryUpdate";
@@ -63,6 +63,13 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
   );
   const intl = useIntl();
 
+  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const { data, loading, refetch } = useCategoryDetailsQuery({
+    displayLoader: true,
+    require: ["category"],
+    variables: { ...paginationState, id }
+  });
+
   const handleCategoryDelete = (data: CategoryDelete) => {
     if (data.categoryDelete.errors.length === 0) {
       notify({
@@ -140,7 +147,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
       })
     );
 
-  const paginationState = createPaginationState(PAGINATE_BY, params);
   const formTransitionState = getMutationState(
     updateResult.called,
     updateResult.loading,
@@ -152,13 +158,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
     maybe(() => deleteResult.data.categoryDelete.errors)
   );
 
-  return (
-    <TypedCategoryDetailsQuery
-      displayLoader
-      variables={{ ...paginationState, id }}
-      require={["category"]}
-    >
-      {({ data, loading, refetch }) => {
   const handleBulkProductDelete = (data: productBulkDelete) => {
     if (data.productBulkDelete.errors.length === 0) {
       closeModal();
@@ -181,23 +180,17 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
   return (
     <>
       <WindowTitle title={maybe(() => data.category.name)} />
-            <TypedProductBulkDeleteMutation
+      <TypedProductBulkDeleteMutation onCompleted={handleBulkProductDelete}>
-              onCompleted={handleBulkProductDelete}
-            >
         {(productBulkDelete, productBulkDeleteOpts) => {
           const categoryBulkDeleteMutationState = getMutationState(
             categoryBulkDeleteOpts.called,
             categoryBulkDeleteOpts.loading,
-                  maybe(
+            maybe(() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors)
-                    () => categoryBulkDeleteOpts.data.categoryBulkDelete.errors
-                  )
           );
           const productBulkDeleteMutationState = getMutationState(
             productBulkDeleteOpts.called,
             productBulkDeleteOpts.loading,
-                  maybe(
+            maybe(() => productBulkDeleteOpts.data.productBulkDelete.errors)
-                    () => productBulkDeleteOpts.data.productBulkDelete.errors
-                  )
           );
 
           return (
@@ -207,9 +200,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                 currentTab={params.activeTab}
                 category={maybe(() => data.category)}
                 disabled={loading}
-                      errors={maybe(
+                errors={maybe(() => updateResult.data.categoryUpdate.errors)}
-                        () => updateResult.data.categoryUpdate.errors
-                      )}
                 onAddCategory={() => navigate(categoryAddUrl(id))}
                 onAddProduct={() => navigate(productAddUrl)}
                 onBack={() =>
@@ -252,9 +243,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                       id,
                       input: {
                         backgroundImageAlt: formData.backgroundImageAlt,
-                              descriptionJson: JSON.stringify(
+                        descriptionJson: JSON.stringify(formData.description),
-                                formData.description
-                              ),
                         name: formData.name,
                         seo: {
                           description: formData.seoDescription,
@@ -274,9 +263,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                 subcategoryListToolbar={
                   <IconButton
                     color="primary"
-                          onClick={() =>
+                    onClick={() => openModal("delete-categories", listElements)}
-                            openModal("delete-categories", listElements)
-                          }
                   >
                     <DeleteIcon />
                   </IconButton>
@@ -284,9 +271,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                 productListToolbar={
                   <IconButton
                     color="primary"
-                          onClick={() =>
+                    onClick={() => openModal("delete-products", listElements)}
-                            openModal("delete-products", listElements)
-                          }
                   >
                     <DeleteIcon />
                   </IconButton>
@@ -389,8 +374,5 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
       </TypedProductBulkDeleteMutation>
     </>
   );
-      }}
-    </TypedCategoryDetailsQuery>
-  );
 };
 export default CategoryDetails;

src/categories/views/CategoryList/CategoryList.tsx

@@ -19,7 +19,7 @@ import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage";
 import { useCategoryBulkDeleteMutation } from "../../mutations";
-import { TypedRootCategoriesQuery } from "../../queries";
+import { useRootCategoriesQuery } from "../../queries";
 import { CategoryBulkDelete } from "../../types/CategoryBulkDelete";
 import {
   categoryAddUrl,
@@ -53,6 +53,20 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
   );
   const intl = useIntl();
 
+  const paginationState = createPaginationState(settings.rowNumber, params);
+  const queryVariables = React.useMemo(
+    () => ({
+      ...paginationState,
+      filter: getFilterVariables(params)
+    }),
+    [params]
+  );
+  const { data, loading, refetch } = useRootCategoriesQuery({
+    displayLoader: true,
+    require: ["categories"],
+    variables: queryVariables
+  });
+
   const tabs = getFilterTabs();
 
   const currentTab =
@@ -113,18 +127,6 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
     handleTabChange(tabs.length + 1);
   };
 
-  const paginationState = createPaginationState(settings.rowNumber, params);
-  const queryVariables = React.useMemo(
-    () => ({
-      ...paginationState,
-      filter: getFilterVariables(params)
-    }),
-    [params]
-  );
-
-  return (
-    <TypedRootCategoriesQuery displayLoader variables={queryVariables}>
-      {({ data, loading, refetch }) => {
   const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
     maybe(() => data.categories.pageInfo),
     paginationState,
@@ -226,9 +228,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
             defaultMessage="Are you sure you want to delete {counter,plural,one{this category} other{{displayQuantity} categories}}?"
             values={{
               counter: maybe(() => params.ids.length),
-                    displayQuantity: (
+              displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
-                      <strong>{maybe(() => params.ids.length)}</strong>
-                    )
             }}
           />
         </DialogContentText>
@@ -251,8 +251,5 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
       />
     </>
   );
-      }}
-    </TypedRootCategoriesQuery>
-  );
 };
 export default CategoryList;

src/hooks/makeQuery.ts

@@ -0,0 +1,115 @@
+import { ApolloQueryResult } from "apollo-client";
+import { DocumentNode } from "graphql";
+import { useEffect } from "react";
+import { QueryResult, useQuery as useBaseQuery } from "react-apollo";
+import { useIntl } from "react-intl";
+
+import { commonMessages } from "@saleor/intl";
+import { maybe, RequireAtLeastOne } from "@saleor/misc";
+import useAppState from "./useAppState";
+import useNotifier from "./useNotifier";
+
+export interface LoadMore<TData, TVariables> {
+  loadMore: (
+    mergeFunc: (prev: TData, next: TData) => TData,
+    extraVariables: Partial<TVariables>
+  ) => Promise<ApolloQueryResult<TData>>;
+}
+
+type UseQuery<TData, TVariables> = QueryResult<TData, TVariables> &
+  LoadMore<TData, TVariables>;
+type UseQueryOpts<TData, TVariables> = Partial<{
+  displayLoader: boolean;
+  require: Array<keyof TData>;
+  skip: boolean;
+  variables: TVariables;
+}>;
+type UseQueryHook<TData, TVariables> = (
+  opts: UseQueryOpts<TData, TVariables>
+) => UseQuery<TData, TVariables>;
+
+function makeQuery<TData, TVariables>(
+  query: DocumentNode
+): UseQueryHook<TData, TVariables> {
+  function useQuery<TData, TVariables>({
+    displayLoader,
+    require,
+    skip,
+    variables
+  }: UseQueryOpts<TData, TVariables>): UseQuery<TData, TVariables> {
+    const notify = useNotifier();
+    const intl = useIntl();
+    const [, dispatchAppState] = useAppState();
+    const queryData = useBaseQuery(query, {
+      context: {
+        useBatching: true
+      },
+      errorPolicy: "all",
+      fetchPolicy: "cache-and-network",
+      skip,
+      variables
+    });
+
+    useEffect(() => {
+      if (displayLoader) {
+        dispatchAppState({
+          payload: {
+            value: queryData.loading
+          },
+          type: "displayLoader"
+        });
+      }
+    }, [queryData.loading]);
+
+    if (queryData.error) {
+      if (
+        !queryData.error.graphQLErrors.every(
+          err =>
+            maybe(() => err.extensions.exception.code) === "PermissionDenied"
+        )
+      ) {
+        notify({
+          text: intl.formatMessage(commonMessages.somethingWentWrong)
+        });
+      }
+    }
+
+    const loadMore = (
+      mergeFunc: (previousResults: TData, fetchMoreResult: TData) => TData,
+      extraVariables: RequireAtLeastOne<TVariables>
+    ) =>
+      queryData.fetchMore({
+        query,
+        updateQuery: (previousResults, { fetchMoreResult }) => {
+          if (!fetchMoreResult) {
+            return previousResults;
+          }
+          return mergeFunc(previousResults, fetchMoreResult);
+        },
+        variables: { ...variables, ...extraVariables }
+      });
+
+    if (
+      !queryData.loading &&
+      require &&
+      queryData.data &&
+      !require.reduce((acc, key) => acc && queryData.data[key] !== null, true)
+    ) {
+      dispatchAppState({
+        payload: {
+          error: "not-found"
+        },
+        type: "displayError"
+      });
+    }
+
+    return {
+      ...queryData,
+      loadMore
+    };
+  }
+
+  return useQuery;
+}
+
+export default makeQuery;