Use Apollo Hooks

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix tax settings updating - #243 by @dominik-zeglen
 - Add secret fields in plugin configuration - #246 by @dominik-zeglen
 - Fix subcategories pagination - #249 by @dominik-zeglen
+- Use Apollo Hooks - #254 by @dominik-zeglen
 
 ## 2.0.0
 

package.json

@@ -47,7 +47,7 @@
     "moment-timezone": "^0.5.26",
     "qs": "^6.9.0",
     "react": "^16.9.0",
-    "react-apollo": "^3.0.0",
+    "react-apollo": "^3.1.3",
     "react-dom": "^16.9.0",
     "react-dropzone": "^8.2.0",
     "react-error-boundary": "^1.2.5",

src/auth/components/SectionRoute.tsx

@@ -1,10 +1,6 @@
 import React from "react";
-import ErrorBoundary from "react-error-boundary";
 import { Route, RouteProps } from "react-router-dom";
 
-import AppLayout from "@saleor/components/AppLayout";
-import ErrorPage from "@saleor/components/ErrorPage";
-import useNavigator from "@saleor/hooks/useNavigator";
 import useUser from "@saleor/hooks/useUser";
 import NotFound from "../../NotFound";
 import { PermissionEnum } from "../../types/globalTypes";
@@ -18,26 +14,14 @@ export const SectionRoute: React.FC<SectionRouteProps> = ({
   permissions,
   ...props
 }) => {
-  const navigate = useNavigator();
   const { user } = useUser();
 
   const hasPermissions =
     !permissions ||
     permissions
       .map(permission => hasPermission(permission, user))
       .reduce((prev, curr) => prev && curr);
-  return hasPermissions ? (
-    <AppLayout>
-      <ErrorBoundary
-        FallbackComponent={() => <ErrorPage onBack={() => navigate("/")} />}
-        key={permissions ? permissions.join(":") : "home"}
-      >
-        <Route {...props} />
-      </ErrorBoundary>
-    </AppLayout>
-  ) : (
-    <NotFound />
-  );
+  return hasPermissions ? <Route {...props} /> : <NotFound />;
 };
 SectionRoute.displayName = "Route";
 export default SectionRoute;

src/categories/mutations.ts

@@ -1,6 +1,6 @@
 import gql from "graphql-tag";
 
-import { TypedMutation } from "../mutations";
+import makeMutation from "@saleor/hooks/makeMutation";
 import { categoryDetailsFragment } from "./queries";
 import {
   CategoryBulkDelete,
@@ -29,7 +29,7 @@ export const categoryDeleteMutation = gql`
     }
   }
 `;
-export const TypedCategoryDeleteMutation = TypedMutation<
+export const useCategoryDeleteMutation = makeMutation<
   CategoryDelete,
   CategoryDeleteVariables
 >(categoryDeleteMutation);
@@ -48,7 +48,7 @@ export const categoryCreateMutation = gql`
     }
   }
 `;
-export const TypedCategoryCreateMutation = TypedMutation<
+export const useCategoryCreateMutation = makeMutation<
   CategoryCreate,
   CategoryCreateVariables
 >(categoryCreateMutation);
@@ -67,7 +67,7 @@ export const categoryUpdateMutation = gql`
     }
   }
 `;
-export const TypedCategoryUpdateMutation = TypedMutation<
+export const useCategoryUpdateMutation = makeMutation<
   CategoryUpdate,
   CategoryUpdateVariables
 >(categoryUpdateMutation);
@@ -82,7 +82,7 @@ export const categoryBulkDeleteMutation = gql`
     }
   }
 `;
-export const TypedCategoryBulkDeleteMutation = TypedMutation<
+export const useCategoryBulkDeleteMutation = makeMutation<
   CategoryBulkDelete,
   CategoryBulkDeleteVariables
 >(categoryBulkDeleteMutation);

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/CategoryCreate.tsx

@@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { getMutationState, maybe } from "../../misc";
 import CategoryCreatePage from "../components/CategoryCreatePage";
-import { TypedCategoryCreateMutation } from "../mutations";
+import { useCategoryCreateMutation } from "../mutations";
 import { CategoryCreate } from "../types/CategoryCreate";
 import { categoryListUrl, categoryUrl } from "../urls";
 
@@ -31,55 +31,54 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
       navigate(categoryUrl(data.categoryCreate.category.id));
     }
   };
-  return (
-    <TypedCategoryCreateMutation onCompleted={handleSuccess}>
-      {(createCategory, createCategoryResult) => {
-        const errors = maybe(
-          () => createCategoryResult.data.categoryCreate.errors,
-          []
-        );
 
-        const formTransitionState = getMutationState(
-          createCategoryResult.called,
-          createCategoryResult.loading,
-          errors
-        );
+  const [createCategory, createCategoryResult] = useCategoryCreateMutation({
+    onCompleted: handleSuccess
+  });
+
+  const errors = maybe(
+    () => createCategoryResult.data.categoryCreate.errors,
+    []
+  );
+
+  const formTransitionState = getMutationState(
+    createCategoryResult.called,
+    createCategoryResult.loading,
+    errors
+  );
 
-        return (
-          <>
-            <WindowTitle
-              title={intl.formatMessage({
-                defaultMessage: "Create category",
-                description: "window title"
-              })}
-            />
-            <CategoryCreatePage
-              saveButtonBarState={formTransitionState}
-              errors={errors}
-              disabled={createCategoryResult.loading}
-              onBack={() =>
-                navigate(parentId ? categoryUrl(parentId) : categoryListUrl())
-              }
-              onSubmit={formData =>
-                createCategory({
-                  variables: {
-                    input: {
-                      descriptionJson: JSON.stringify(formData.description),
-                      name: formData.name,
-                      seo: {
-                        description: formData.seoDescription,
-                        title: formData.seoTitle
-                      }
-                    },
-                    parent: parentId || null
-                  }
-                })
-              }
-            />
-          </>
-        );
-      }}
-    </TypedCategoryCreateMutation>
+  return (
+    <>
+      <WindowTitle
+        title={intl.formatMessage({
+          defaultMessage: "Create category",
+          description: "window title"
+        })}
+      />
+      <CategoryCreatePage
+        saveButtonBarState={formTransitionState}
+        errors={errors}
+        disabled={createCategoryResult.loading}
+        onBack={() =>
+          navigate(parentId ? categoryUrl(parentId) : categoryListUrl())
+        }
+        onSubmit={formData =>
+          createCategory({
+            variables: {
+              input: {
+                descriptionJson: JSON.stringify(formData.description),
+                name: formData.name,
+                seo: {
+                  description: formData.seoDescription,
+                  title: formData.seoTitle
+                }
+              },
+              parent: parentId || null
+            }
+          })
+        }
+      />
+    </>
   );
 };
 export default CategoryCreateView;