Fix Apollo cache update when page is published.

packages/webiny-app-cms/src/admin/plugins/pageDetails/utils/withPublishRevisionHandler.js

@@ -1,6 +1,7 @@
+// @flow
 import React from "react";
 import { compose, withHandlers } from "recompose";
-import { get, set } from "dot-prop-immutable";
+import { set } from "dot-prop-immutable";
 import { graphql } from "react-apollo";
 import { withSnackbar } from "webiny-app-admin/components";
 import { publishRevision, getPage } from "webiny-app-cms/admin/graphql/pages";
@@ -22,9 +23,11 @@ export default (prop: string) => {
                             return;
                         }
 
+                        const getPageQuery = getPage();
+
                         // Update revisions
                         const pageFromCache = cache.readQuery({
-                            query: getPage(),
+                            query: getPageQuery,
                             variables: { id: page.id }
                         });
 
@@ -44,7 +47,7 @@ export default (prop: string) => {
 
                         // Write our data back to the cache.
                         cache.writeQuery({
-                            query: getPage(),
+                            query: getPageQuery,
                             data: set(pageFromCache, "cms.page.data", page)
                         });
                     }

packages/webiny-app-cms/src/admin/views/Pages/Editor.js

@@ -13,7 +13,6 @@ import { withSavedElements } from "webiny-app-cms/admin/components";
 import Snackbar from "webiny-app-admin/plugins/Snackbar/Snackbar";
 import { Typography } from "webiny-ui/Typography";
 import { LoadingEditor, LoadingTitle } from "./EditorStyled.js";
-
 import editorMock from "webiny-app-cms/admin/assets/editor-mock.png";
 
 const getEmptyData = (page = {}, revisions = []) => {

packages/webiny-app-cms/src/admin/views/Pages/PageDetails.js

@@ -1,15 +1,17 @@
 // @flow
 import * as React from "react";
 import { compose, withProps } from "recompose";
-import { graphql } from "react-apollo";
+import { Query } from "react-apollo";
 import { renderPlugins } from "webiny-app/plugins";
 import { withRouter } from "webiny-app/components";
-import { PageDetailsProvider, PageDetailsConsumer } from "../../components/PageDetailsContext";
 import type { WithRouterProps } from "webiny-app/components";
-import Loader from "./Loader";
 import styled from "react-emotion";
 import { Elevation } from "webiny-ui/Elevation";
+import { Typography } from "webiny-ui/Typography";
 import { getPage } from "webiny-app-cms/admin/graphql/pages";
+import editorMock from "webiny-app-cms/admin/assets/editor-mock.png";
+import { LoadingEditor, LoadingTitle } from "./EditorStyled.js";
+import { PageDetailsProvider, PageDetailsConsumer } from "../../components/PageDetailsContext";
 
 type Props = WithRouterProps & {
     pageId: string,
@@ -42,8 +44,8 @@ const DetailsContainer = styled("div")({
     }
 });
 
-const PageDetails = ({ router, page, loading }: Props) => {
-    if (!router.getQuery("id")) {
+const PageDetails = ({ pageId }: Props) => {
+    if (!pageId) {
         return (
             <EmptySelect>
                 <Elevation z={2} className={"select-page"}>
@@ -53,41 +55,47 @@ const PageDetails = ({ router, page, loading }: Props) => {
         );
     }
 
-    if (loading) {
-        /* TODO: Ovo je C/P loadera od DataList komponente, treba ga sloziti da lici na taj PageDetails view */
-        return <Loader />;
-    }
+    return (
+        <Query query={getPage()} variables={{ id: pageId }}>
+            {({ data, loading }) => {
+                if (loading) {
+                    return (
+                        <LoadingEditor>
+                            <img src={editorMock} />
+                            <LoadingTitle>
+                                <Typography tag={"div"} use={"headline6"}>
+                                    Loading page...<span>.</span>
+                                    <span>.</span>
+                                    <span>.</span>
+                                </Typography>
+                            </LoadingTitle>
+                        </LoadingEditor>
+                    );
+                }
 
-    const details = { page, loading };
+                const details = { page: loading ? {} : data.cms.page.data, loading };
 
-    return (
-        <DetailsContainer>
-            <PageDetailsProvider value={details}>
-                <PageDetailsConsumer>
-                    {pageDetails => (
-                        <React.Fragment>
-                            {renderPlugins("cms-page-details", { pageDetails })}
-                        </React.Fragment>
-                    )}
-                </PageDetailsConsumer>
-            </PageDetailsProvider>
-        </DetailsContainer>
+                return (
+                    <DetailsContainer>
+                        <PageDetailsProvider value={details}>
+                            <PageDetailsConsumer>
+                                {pageDetails => (
+                                    <React.Fragment>
+                                        {renderPlugins("cms-page-details", { pageDetails })}
+                                    </React.Fragment>
+                                )}
+                            </PageDetailsConsumer>
+                        </PageDetailsProvider>
+                    </DetailsContainer>
+                );
+            }}
+        </Query>
     );
 };
 
 export default compose(
     withRouter(),
     withProps(({ router }) => ({
         pageId: router.getQuery("id")
-    })),
-    graphql(getPage(), {
-        skip: props => !props.pageId,
-        options: ({ pageId }) => ({ variables: { id: pageId } }),
-        props: ({ data }) => {
-            return {
-                loading: data.loading,
-                page: data.loading ? {} : data.cms.page.data
-            };
-        }
-    })
+    }))
 )(PageDetails);