Merge pull request #254 from mirumee/ref/use-apollo-hooks

Use Apollo Hooks

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add secret fields in plugin configuration - #246 by @dominik-zeglen
 - Fix subcategories pagination - #249 by @dominik-zeglen
 - Update customer's details page design - #248 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,7 +14,6 @@ export const SectionRoute: React.FC<SectionRouteProps> = ({
   permissions,
   ...props
 }) => {
-  const navigate = useNavigator();
   const { user } = useUser();
 
   const hasPermissions =
@@ -26,18 +21,7 @@ export const SectionRoute: React.FC<SectionRouteProps> = ({
     permissions
       .map(permission => hasPermission(permission, user))
       .reduce((prev, curr) => prev && curr);
-  return hasPermissions ? (
+  return hasPermissions ? <Route {...props} /> : <NotFound />;
-    <AppLayout>
-      <ErrorBoundary
-        FallbackComponent={() => <ErrorPage onBack={() => navigate("/")} />}
-        key={permissions ? permissions.join(":") : "home"}
-      >
-        <Route {...props} />
-      </ErrorBoundary>
-    </AppLayout>
-  ) : (
-    <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,9 +31,11 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
       navigate(categoryUrl(data.categoryCreate.category.id));
     }
   };
-  return (
+
-    <TypedCategoryCreateMutation onCompleted={handleSuccess}>
+  const [createCategory, createCategoryResult] = useCategoryCreateMutation({
-      {(createCategory, createCategoryResult) => {
+    onCompleted: handleSuccess
+  });
+
   const errors = maybe(
     () => createCategoryResult.data.categoryCreate.errors,
     []
@@ -78,8 +80,5 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
       />
     </>
   );
-      }}
-    </TypedCategoryCreateMutation>
-  );
 };
 export default CategoryCreateView;

src/categories/views/CategoryDetails.tsx

@@ -24,11 +24,11 @@ import {
   CategoryUpdatePage
 } from "../components/CategoryUpdatePage/CategoryUpdatePage";
 import {
-  TypedCategoryBulkDeleteMutation,
+  useCategoryBulkDeleteMutation,
-  TypedCategoryDeleteMutation,
+  useCategoryDeleteMutation,
-  TypedCategoryUpdateMutation
+  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({
@@ -73,6 +80,11 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
       navigate(categoryListUrl());
     }
   };
+
+  const [deleteCategory, deleteResult] = useCategoryDeleteMutation({
+    onCompleted: handleCategoryDelete
+  });
+
   const handleCategoryUpdate = (data: CategoryUpdate) => {
     if (data.categoryUpdate.errors.length > 0) {
       const backgroundImageError = data.categoryUpdate.errors.find(
@@ -86,6 +98,27 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
     }
   };
 
+  const [updateCategory, updateResult] = useCategoryUpdateMutation({
+    onCompleted: handleCategoryUpdate
+  });
+
+  const handleBulkCategoryDelete = (data: CategoryBulkDelete) => {
+    if (data.categoryBulkDelete.errors.length === 0) {
+      closeModal();
+      notify({
+        text: intl.formatMessage(commonMessages.savedChanges)
+      });
+      reset();
+    }
+  };
+
+  const [
+    categoryBulkDelete,
+    categoryBulkDeleteOpts
+  ] = useCategoryBulkDeleteMutation({
+    onCompleted: handleBulkCategoryDelete
+  });
+
   const changeTab = (tabName: CategoryPageTab) => {
     reset();
     navigate(
@@ -114,12 +147,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
       })
     );
 
-  return (
-    <TypedCategoryDeleteMutation onCompleted={handleCategoryDelete}>
-      {(deleteCategory, deleteResult) => (
-        <TypedCategoryUpdateMutation onCompleted={handleCategoryUpdate}>
-          {(updateCategory, updateResult) => {
-            const paginationState = createPaginationState(PAGINATE_BY, params);
   const formTransitionState = getMutationState(
     updateResult.called,
     updateResult.loading,
@@ -130,25 +157,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
     deleteResult.loading,
     maybe(() => deleteResult.data.categoryDelete.errors)
   );
-            return (
-              <TypedCategoryDetailsQuery
-                displayLoader
-                variables={{ ...paginationState, id }}
-                require={["category"]}
-              >
-                {({ data, loading, refetch }) => {
-                  const handleBulkCategoryDelete = (
-                    data: CategoryBulkDelete
-                  ) => {
-                    if (data.categoryBulkDelete.errors.length === 0) {
-                      closeModal();
-                      notify({
-                        text: intl.formatMessage(commonMessages.savedChanges)
-                      });
-                      refetch();
-                      reset();
-                    }
-                  };
 
   const handleBulkProductDelete = (data: productBulkDelete) => {
     if (data.productBulkDelete.errors.length === 0) {
@@ -172,31 +180,17 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
   return (
     <>
       <WindowTitle title={maybe(() => data.category.name)} />
-                      <TypedCategoryBulkDeleteMutation
+      <TypedProductBulkDeleteMutation onCompleted={handleBulkProductDelete}>
-                        onCompleted={handleBulkCategoryDelete}
-                      >
-                        {(categoryBulkDelete, categoryBulkDeleteOpts) => (
-                          <TypedProductBulkDeleteMutation
-                            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 (
@@ -206,27 +200,18 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                 currentTab={params.activeTab}
                 category={maybe(() => data.category)}
                 disabled={loading}
-                                    errors={maybe(
+                errors={maybe(() => updateResult.data.categoryUpdate.errors)}
-                                      () =>
+                onAddCategory={() => navigate(categoryAddUrl(id))}
-                                        updateResult.data.categoryUpdate.errors
-                                    )}
-                                    onAddCategory={() =>
-                                      navigate(categoryAddUrl(id))
-                                    }
                 onAddProduct={() => navigate(productAddUrl)}
                 onBack={() =>
                   navigate(
                     maybe(
-                                          () =>
+                      () => categoryUrl(data.category.parent.id),
-                                            categoryUrl(
-                                              data.category.parent.id
-                                            ),
                       categoryListUrl()
                     )
                   )
                 }
-                                    onCategoryClick={id => () =>
+                onCategoryClick={id => () => navigate(categoryUrl(id))}
-                                      navigate(categoryUrl(id))}
                 onDelete={() => openModal("delete")}
                 onImageDelete={() =>
                   updateCategory({
@@ -251,22 +236,17 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                 onNextPage={loadNextPage}
                 onPreviousPage={loadPreviousPage}
                 pageInfo={pageInfo}
-                                    onProductClick={id => () =>
+                onProductClick={id => () => navigate(productUrl(id))}
-                                      navigate(productUrl(id))}
                 onSubmit={formData =>
                   updateCategory({
                     variables: {
                       id,
                       input: {
-                                            backgroundImageAlt:
+                        backgroundImageAlt: formData.backgroundImageAlt,
-                                              formData.backgroundImageAlt,
+                        descriptionJson: JSON.stringify(formData.description),
-                                            descriptionJson: JSON.stringify(
-                                              formData.description
-                                            ),
                         name: formData.name,
                         seo: {
-                                              description:
+                          description: formData.seoDescription,
-                                                formData.seoDescription,
                           title: formData.seoTitle
                         }
                       }
@@ -274,25 +254,16 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                   })
                 }
                 products={maybe(() =>
-                                      data.category.products.edges.map(
+                  data.category.products.edges.map(edge => edge.node)
-                                        edge => edge.node
-                                      )
                 )}
                 saveButtonBarState={formTransitionState}
                 subcategories={maybe(() =>
-                                      data.category.children.edges.map(
+                  data.category.children.edges.map(edge => edge.node)
-                                        edge => edge.node
-                                      )
                 )}
                 subcategoryListToolbar={
                   <IconButton
                     color="primary"
-                                        onClick={() =>
+                    onClick={() => openModal("delete-categories", listElements)}
-                                          openModal(
-                                            "delete-categories",
-                                            listElements
-                                          )
-                                        }
                   >
                     <DeleteIcon />
                   </IconButton>
@@ -300,12 +271,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                 productListToolbar={
                   <IconButton
                     color="primary"
-                                        onClick={() =>
+                    onClick={() => openModal("delete-products", listElements)}
-                                          openModal(
-                                            "delete-products",
-                                            listElements
-                                          )
-                                        }
                   >
                     <DeleteIcon />
                   </IconButton>
@@ -316,13 +282,9 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                 toggleAll={toggleAll}
               />
               <ActionDialog
-                                    confirmButtonState={
+                confirmButtonState={removeDialogTransitionState}
-                                      removeDialogTransitionState
-                                    }
                 onClose={closeModal}
-                                    onConfirm={() =>
+                onConfirm={() => deleteCategory({ variables: { id } })}
-                                      deleteCategory({ variables: { id } })
-                                    }
                 open={params.action === "delete"}
                 title={intl.formatMessage({
                   defaultMessage: "Delete category",
@@ -336,10 +298,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                     values={{
                       categoryName: (
                         <strong>
-                                              {maybe(
+                          {maybe(() => data.category.name, "...")}
-                                                () => data.category.name,
-                                                "..."
-                                              )}
                         </strong>
                       )
                     }}
@@ -354,14 +313,12 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                   params.action === "delete-categories" &&
                   maybe(() => params.ids.length > 0)
                 }
-                                    confirmButtonState={
+                confirmButtonState={categoryBulkDeleteMutationState}
-                                      categoryBulkDeleteMutationState
-                                    }
                 onClose={closeModal}
                 onConfirm={() =>
                   categoryBulkDelete({
                     variables: { ids: params.ids }
-                                      })
+                  }).then(() => refetch())
                 }
                 title={intl.formatMessage({
                   defaultMessage: "Delete categories",
@@ -371,15 +328,11 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
               >
                 <DialogContentText>
                   <FormattedMessage
-                                        defaultMessage="Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} categories}}?"
+                    defaultMessage="Are you sure you want to delete {counter,plural,one{this category} other{{displayQuantity} categories}}?"
                     values={{
-                                          counter: maybe(
+                      counter: maybe(() => params.ids.length),
-                                            () => params.ids.length
-                                          ),
                       displayQuantity: (
-                                            <strong>
+                        <strong>{maybe(() => params.ids.length)}</strong>
-                                              {maybe(() => params.ids.length)}
-                                            </strong>
                       )
                     }}
                   />
@@ -390,14 +343,12 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
               </ActionDialog>
               <ActionDialog
                 open={params.action === "delete-products"}
-                                    confirmButtonState={
+                confirmButtonState={productBulkDeleteMutationState}
-                                      productBulkDeleteMutationState
-                                    }
                 onClose={closeModal}
                 onConfirm={() =>
                   productBulkDelete({
                     variables: { ids: params.ids }
-                                      })
+                  }).then(() => refetch())
                 }
                 title={intl.formatMessage({
                   defaultMessage: "Delete products",
@@ -405,18 +356,13 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                 })}
                 variant="delete"
               >
-                                    {" "}
                 <DialogContentText>
                   <FormattedMessage
-                                        defaultMessage="Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} products}}?"
+                    defaultMessage="Are you sure you want to delete {counter,plural,one{this product} other{{displayQuantity} products}}?"
                     values={{
-                                          counter: maybe(
+                      counter: maybe(() => params.ids.length),
-                                            () => params.ids.length
-                                          ),
                       displayQuantity: (
-                                            <strong>
+                        <strong>{maybe(() => params.ids.length)}</strong>
-                                              {maybe(() => params.ids.length)}
-                                            </strong>
                       )
                     }}
                   />
@@ -426,17 +372,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
           );
         }}
       </TypedProductBulkDeleteMutation>
-                        )}
-                      </TypedCategoryBulkDeleteMutation>
     </>
   );
-                }}
-              </TypedCategoryDetailsQuery>
-            );
-          }}
-        </TypedCategoryUpdateMutation>
-      )}
-    </TypedCategoryDeleteMutation>
-  );
 };
 export default CategoryDetails;

src/categories/views/CategoryList/CategoryList.tsx

@@ -18,8 +18,8 @@ import usePaginator, {
 import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage";
-import { TypedCategoryBulkDeleteMutation } from "../../mutations";
+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,
@@ -138,17 +140,18 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
       reset();
     }
   };
-        return (
+
-          <TypedCategoryBulkDeleteMutation
+  const [
-            onCompleted={handleCategoryBulkDelete}
+    categoryBulkDelete,
-          >
+    categoryBulkDeleteOpts
-            {(categoryBulkDelete, categoryBulkDeleteOpts) => {
+  ] = useCategoryBulkDeleteMutation({
+    onCompleted: handleCategoryBulkDelete
+  });
+
   const bulkDeleteState = getMutationState(
     categoryBulkDeleteOpts.called,
     categoryBulkDeleteOpts.loading,
-                maybe(
+    maybe(() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors)
-                  () => categoryBulkDeleteOpts.data.categoryBulkDelete.errors
-                )
   );
 
   return (
@@ -225,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>
@@ -250,11 +251,5 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
       />
     </>
   );
-            }}
-          </TypedCategoryBulkDeleteMutation>
-        );
-      }}
-    </TypedRootCategoriesQuery>
-  );
 };
 export default CategoryList;

src/components/AppLayout/AppLayout.tsx

@@ -13,13 +13,13 @@ import classNames from "classnames";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage, useIntl } from "react-intl";
-import { RouteComponentProps, withRouter } from "react-router";
+import useRouter from "use-react-router";
 
 import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
 import saleorDarkLogo from "@assets/images/logo-dark.svg";
 import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
-import AppProgressProvider from "@saleor/components/AppProgress";
 import { createConfigurationMenu } from "@saleor/configuration";
+import useAppState from "@saleor/hooks/useAppState";
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useTheme from "@saleor/hooks/useTheme";
@@ -28,6 +28,8 @@ import ArrowDropdown from "@saleor/icons/ArrowDropdown";
 import { maybe } from "@saleor/misc";
 import { staffMemberDetailsUrl } from "@saleor/staff/urls";
 import Container from "../Container";
+import ErrorPage from "../ErrorPage";
+import NotFoundPage from "../NotFoundPage";
 import AppActionContext from "./AppActionContext";
 import AppHeaderContext from "./AppHeaderContext";
 import { appLoaderHeight, drawerWidth, drawerWidthExpanded } from "./consts";
@@ -273,8 +275,7 @@ interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
+const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
-  ({ children, location }: AppLayoutProps & RouteComponentProps<any>) => {
   const classes = useStyles({});
   const { isDark, toggleTheme } = useTheme();
   const [isMenuSmall, setMenuSmall] = useLocalStorage("isMenuSmall", false);
@@ -286,6 +287,8 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
   const { logout, user } = useUser();
   const navigate = useNavigator();
   const intl = useIntl();
+  const [appState, dispatchAppState] = useAppState();
+  const { location } = useRouter();
 
   const menuStructure = createMenuStructure(intl);
   const configurationMenu = createConfigurationMenu(intl);
@@ -321,9 +324,17 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
     setMenuSmall(!isMenuSmall);
   };
 
+  const handleErrorBack = () => {
+    navigate("/");
+    dispatchAppState({
+      payload: {
+        error: null
+      },
+      type: "displayError"
+    });
+  };
+
   return (
-      <AppProgressProvider>
-        {({ isProgress }) => (
     <AppHeaderContext.Provider value={appHeaderAnchor}>
       <AppActionContext.Provider value={appActionAnchor}>
         <div className={classes.root}>
@@ -339,9 +350,7 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
                   [classes.logoDark]: isDark
                 })}
               >
-                      <SVG
+                <SVG src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo} />
-                        src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo}
-                      />
               </div>
               <Hidden smDown>
                 <div
@@ -370,11 +379,8 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
               [classes.contentToggle]: isMenuSmall
             })}
           >
-                  {isProgress ? (
+            {appState.loading ? (
-                    <LinearProgress
+              <LinearProgress className={classes.appLoader} color="primary" />
-                      className={classes.appLoader}
-                      color="primary"
-                    />
             ) : (
               <div className={classes.appLoaderPlaceholder} />
             )}
@@ -402,10 +408,7 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
                         checked={isDark}
                         onClick={toggleTheme}
                       />
-                            <div
+                      <div className={classes.userMenuContainer} ref={anchor}>
-                              className={classes.userMenuContainer}
-                              ref={anchor}
-                            >
                         <Chip
                           avatar={
                             user.avatar && (
@@ -478,17 +481,24 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
                   </div>
                 </Container>
               </div>
-                    <main className={classes.view}>{children}</main>
+              <main className={classes.view}>
+                {appState.error ? (
+                  appState.error === "not-found" ? (
+                    <NotFoundPage onBack={handleErrorBack} />
+                  ) : (
+                    <ErrorPage onBack={handleErrorBack} />
+                  )
+                ) : (
+                  children
+                )}
+              </main>
             </div>
             <div className={classes.appAction} ref={appActionAnchor} />
           </div>
         </div>
       </AppActionContext.Provider>
     </AppHeaderContext.Provider>
-        )}
-      </AppProgressProvider>
   );
-  }
+};
-);
 
 export default AppLayout;

src/components/AppProgress/index.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-interface IAppProgressContext {
-  isProgress: boolean;
-  setProgressState: (isOpened: boolean) => void;
-}
-
-export const AppProgressContext = React.createContext<IAppProgressContext>(
-  undefined
-);
-
-export const AppProgressProvider: React.FC<{}> = ({ children }) => {
-  const [isProgress, setProgressState] = React.useState(false);
-
-  return (
-    <AppProgressContext.Provider
-      value={{
-        isProgress,
-        setProgressState
-      }}
-    >
-      {children}
-    </AppProgressContext.Provider>
-  );
-};
-
-export const AppProgress = AppProgressContext.Consumer;
-export default AppProgress;

src/components/ErrorPage/ErrorPage.tsx

@@ -48,7 +48,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     alignItems: "center",
     display: "flex",
-    height: "calc(100vh - 88px)"
+    height: "calc(100vh - 180px)"
   },
   upperHeader: {
     fontWeight: 600 as 600

src/components/NotFoundPage/NotFoundPage.tsx

@@ -43,8 +43,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     alignItems: "center",
     display: "flex",
-    height: "100vh",
+    height: "calc(100vh - 180px)"
-    width: "100vw"
   }
 }));
 

src/containers/AppState/AppState.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import useRouter from "use-react-router";
+
+import appStateReducer, { AppStateReducerAction } from "./reducer";
+import IAppState, { initialAppState } from "./state";
+
+export type AppStateContextType = [
+  IAppState,
+  React.Dispatch<AppStateReducerAction>
+];
+export const AppStateContext = React.createContext<AppStateContextType>([
+  initialAppState,
+  () => undefined
+]);
+const AppStateProvider: React.FC = ({ children }) => {
+  const { location } = useRouter();
+  const stateAndDispatch = React.useReducer(appStateReducer, initialAppState);
+  const [state, dispatch] = stateAndDispatch;
+
+  React.useEffect(() => {
+    if (!!state.error) {
+      dispatch({
+        payload: {
+          error: null
+        },
+        type: "displayError"
+      });
+    }
+  }, [location]);
+
+  return (
+    <AppStateContext.Provider value={stateAndDispatch}>
+      {children}
+    </AppStateContext.Provider>
+  );
+};
+
+export const { Consumer } = AppStateContext;
+
+export default AppStateProvider;

src/containers/AppState/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./AppState";
+export * from "./AppState";

src/containers/AppState/reducer.ts

@@ -0,0 +1,42 @@
+import IAppState, { AppError } from "./state";
+
+export type AppStateReducerActionType = "displayError" | "displayLoader";
+
+export interface AppStateReducerAction {
+  payload: Partial<{
+    error: AppError;
+    value: boolean;
+  }>;
+  type: AppStateReducerActionType;
+}
+
+function displayError(prevState: IAppState, error: AppError): IAppState {
+  return {
+    ...prevState,
+    error,
+    loading: false
+  };
+}
+
+function displayLoader(prevState: IAppState, value: boolean): IAppState {
+  return {
+    ...prevState,
+    loading: value
+  };
+}
+
+function reduceAppState(
+  prevState: IAppState,
+  action: AppStateReducerAction
+): IAppState {
+  switch (action.type) {
+    case "displayError":
+      return displayError(prevState, action.payload.error);
+    case "displayLoader":
+      return displayLoader(prevState, action.payload.value);
+    default:
+      return prevState;
+  }
+}
+
+export default reduceAppState;

src/containers/AppState/state.ts

@@ -0,0 +1,13 @@
+export type AppError = "unhandled" | "not-found";
+
+interface IAppState {
+  error: AppError | null;
+  loading: boolean;
+}
+
+export const initialAppState: IAppState = {
+  error: null,
+  loading: false
+};
+
+export default IAppState;

src/hooks/makeMutation.ts

@@ -0,0 +1,65 @@
+import { ApolloError } from "apollo-client";
+import { DocumentNode } from "graphql";
+import {
+  MutationFunction,
+  MutationResult,
+  useMutation as useBaseMutation
+} from "react-apollo";
+import { useIntl } from "react-intl";
+
+import { commonMessages } from "@saleor/intl";
+import { maybe } from "@saleor/misc";
+import useNotifier from "./useNotifier";
+
+type UseMutation<TData, TVariables> = [
+  MutationFunction<TData, TVariables>,
+  MutationResult<TData>
+];
+type UseMutationCbs<TData> = Partial<{
+  onCompleted: (data: TData) => void;
+  onError: (error: ApolloError) => void;
+}>;
+type UseMutationHook<TData, TVariables> = (
+  cbs: UseMutationCbs<TData>
+) => UseMutation<TData, TVariables>;
+
+function makeMutation<TData, TVariables>(
+  mutation: DocumentNode
+): UseMutationHook<TData, TVariables> {
+  function useMutation<TData, TVariables>({
+    onCompleted,
+    onError
+  }: UseMutationCbs<TData>): UseMutation<TData, TVariables> {
+    const notify = useNotifier();
+    const intl = useIntl();
+    const [mutateFn, result] = useBaseMutation(mutation, {
+      onCompleted,
+      onError: (err: ApolloError) => {
+        if (
+          maybe(
+            () =>
+              err.graphQLErrors[0].extensions.exception.code ===
+              "ReadOnlyException"
+          )
+        ) {
+          notify({
+            text: intl.formatMessage(commonMessages.readOnly)
+          });
+        } else {
+          notify({
+            text: intl.formatMessage(commonMessages.somethingWentWrong)
+          });
+        }
+        if (onError) {
+          onError(err);
+        }
+      }
+    });
+
+    return [mutateFn, result];
+  }
+
+  return useMutation;
+}
+
+export default makeMutation;

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;

src/hooks/useAppState.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { AppStateContext } from "../containers/AppState";
+
+function useAppState() {
+  const stateAndDispatch = React.useContext(AppStateContext);
+
+  return stateAndDispatch;
+}
+
+export default useAppState;

src/index.tsx

@@ -8,9 +8,11 @@ import { createUploadLink } from "apollo-upload-client";
 import React from "react";
 import { ApolloProvider } from "react-apollo";
 import { render } from "react-dom";
+import ErrorBoundary from "react-error-boundary";
 import { useIntl } from "react-intl";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 
+import useAppState from "@saleor/hooks/useAppState";
 import AttributeSection from "./attributes";
 import { attributeSection } from "./attributes/urls";
 import Auth, { getAuthToken, removeAuthToken } from "./auth";
@@ -20,7 +22,7 @@ import SectionRoute from "./auth/components/SectionRoute";
 import { hasPermission } from "./auth/misc";
 import CategorySection from "./categories";
 import CollectionSection from "./collections";
-import { AppProgressProvider } from "./components/AppProgress";
+import AppLayout from "./components/AppLayout";
 import { DateProvider } from "./components/Date";
 import { LocaleProvider } from "./components/Locale";
 import { MessageManager } from "./components/messages";
@@ -29,6 +31,7 @@ import ThemeProvider from "./components/Theme";
 import { WindowTitle } from "./components/WindowTitle";
 import { API_URI, APP_MOUNT_URI } from "./config";
 import ConfigurationSection, { createConfigurationMenu } from "./configuration";
+import AppStateProvider from "./containers/AppState";
 import { CustomerSection } from "./customers";
 import DiscountSection from "./discounts";
 import HomePage from "./home";
@@ -119,11 +122,11 @@ const App: React.FC = () => {
           <DateProvider>
             <LocaleProvider>
               <MessageManager>
-                <AppProgressProvider>
+                <AppStateProvider>
                   <ShopProvider>
                     <Routes />
                   </ShopProvider>
-                </AppProgressProvider>
+                </AppStateProvider>
               </MessageManager>
             </LocaleProvider>
           </DateProvider>
@@ -135,6 +138,7 @@ const App: React.FC = () => {
 
 const Routes: React.FC = () => {
   const intl = useIntl();
+  const [, dispatchAppState] = useAppState();
 
   return (
     <>
@@ -148,6 +152,17 @@ const Routes: React.FC = () => {
           user
         }) =>
           isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
+            <AppLayout>
+              <ErrorBoundary
+                onError={() =>
+                  dispatchAppState({
+                    payload: {
+                      error: "unhandled"
+                    },
+                    type: "displayError"
+                  })
+                }
+              >
                 <Switch>
                   <SectionRoute exact path="/" component={HomePage} />
                   <SectionRoute
@@ -241,7 +256,9 @@ const Routes: React.FC = () => {
                     component={ServiceSection}
                   />
                   {createConfigurationMenu(intl).filter(menu =>
-                menu.menuItems.map(item => hasPermission(item.permission, user))
+                    menu.menuItems.map(item =>
+                      hasPermission(item.permission, user)
+                    )
                   ).length > 0 && (
                     <SectionRoute
                       exact
@@ -251,6 +268,8 @@ const Routes: React.FC = () => {
                   )}
                   <Route component={NotFound} />
                 </Switch>
+              </ErrorBoundary>
+            </AppLayout>
           ) : hasToken && tokenVerifyLoading ? (
             <LoginLoading />
           ) : (

src/products/utils/data.ts

@@ -174,19 +174,23 @@ export function getProductUpdatePageFormData(
     publicationDate: maybe(() => product.publicationDate, ""),
     seoDescription: maybe(() => product.seoDescription, ""),
     seoTitle: maybe(() => product.seoTitle, ""),
-    sku: maybe(() =>
+    sku: maybe(
+      () =>
         product.productType.hasVariants
           ? undefined
           : variants && variants[0]
           ? variants[0].sku
-        : undefined
+          : undefined,
+      ""
     ),
-    stockQuantity: maybe(() =>
+    stockQuantity: maybe(
+      () =>
         product.productType.hasVariants
           ? undefined
           : variants && variants[0]
           ? variants[0].quantity
-        : undefined
+          : undefined,
+      0
     )
   };
 }

src/queries.tsx

@@ -5,9 +5,7 @@ import React from "react";
 import { Query, QueryResult } from "react-apollo";
 import { useIntl } from "react-intl";
 
-import AppProgress from "./components/AppProgress";
+import useAppState from "./hooks/useAppState";
-import ErrorPage from "./components/ErrorPage/ErrorPage";
-import useNavigator from "./hooks/useNavigator";
 import useNotifier from "./hooks/useNotifier";
 import { commonMessages } from "./intl";
 import { maybe, RequireAtLeastOne } from "./misc";
@@ -68,13 +66,11 @@ export function TypedQuery<TData, TVariables>(
   query: DocumentNode
 ): React.FC<TypedQueryInnerProps<TData, TVariables>> {
   return ({ children, displayLoader, skip, variables, require }) => {
-    const navigate = useNavigator();
     const pushMessage = useNotifier();
+    const [, dispatchAppState] = useAppState();
     const intl = useIntl();
 
     return (
-      <AppProgress>
-        {({ setProgressState }) => (
       <Query
         fetchPolicy="cache-and-network"
         query={query}
@@ -116,10 +112,6 @@ export function TypedQuery<TData, TVariables>(
               variables: { ...variables, ...extraVariables }
             });
 
-              let childrenOrNotFound = children({
-                ...queryData,
-                loadMore
-              });
           if (
             !queryData.loading &&
             require &&
@@ -129,26 +121,53 @@ export function TypedQuery<TData, TVariables>(
               true
             )
           ) {
-                childrenOrNotFound = <ErrorPage onBack={() => navigate("/")} />;
+            dispatchAppState({
+              payload: {
+                error: "not-found"
+              },
+              type: "displayError"
+            });
           }
 
           if (displayLoader) {
             return (
               <QueryProgress
                 loading={queryData.loading}
-                    onCompleted={() => setProgressState(false)}
+                onCompleted={() =>
-                    onLoading={() => setProgressState(true)}
+                  dispatchAppState({
+                    payload: {
+                      value: false
+                    },
+                    type: "displayLoader"
+                  })
+                }
+                onLoading={() =>
+                  dispatchAppState({
+                    payload: {
+                      value: true
+                    },
+                    type: "displayLoader"
+                  })
+                }
               >
-                    {childrenOrNotFound}
+                {children({
+                  ...queryData,
+                  loadMore
+                })}
               </QueryProgress>
             );
           }
 
-              return <>{childrenOrNotFound}</>;
+          return (
+            <>
+              {children({
+                ...queryData,
+                loadMore
+              })}
+            </>
+          );
         }}
       </Query>
-        )}
-      </AppProgress>
     );
   };
 }

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -97522,6 +97522,7 @@ Ctrl + K"
                       disabled=""
                       name="sku"
                       type="text"
+                      value=""
                     />
                     <fieldset
                       aria-hidden="true"
@@ -97543,8 +97544,8 @@ Ctrl + K"
                   class="MuiFormControl-root-id MuiTextField-root-id"
                 >
                   <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                    data-shrink="false"
+                    data-shrink="true"
                   >
                     Inventory
                   </label>
@@ -97557,6 +97558,7 @@ Ctrl + K"
                       disabled=""
                       name="stockQuantity"
                       type="number"
+                      value="0"
                     />
                     <fieldset
                       aria-hidden="true"
@@ -97565,7 +97567,7 @@ Ctrl + K"
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​