Add queryUpdatedAt helper that can be used in checkConflict without h…

…aving the write an addtional query

.changeset/cuddly-kings-build.md

@@ -0,0 +1,5 @@
+---
+"@comet/cms-admin": minor
+---
+
+Add queryUpdatedAt helper that can be used in checkConflict without having the write an addtional query

demo/admin/src/products/ProductForm.gql.ts

@@ -23,14 +23,6 @@ export const productQuery = gql`
     ${productFormFragment}
 `;
 
-export const productCheckForChangesQuery = gql`
-    query CheckForChangesProduct($id: ID!) {
-        product(id: $id) {
-            updatedAt
-        }
-    }
-`;
-
 export const createProductMutation = gql`
     mutation ProductFormCreateProduct($input: ProductInput!) {
         createProduct(input: $input) {

demo/admin/src/products/ProductForm.tsx

@@ -19,11 +19,9 @@ import {
 } from "@comet/admin";
 import { ArrowLeft } from "@comet/admin-icons";
 import { BlockState, createFinalFormBlock } from "@comet/blocks-admin";
-import { DamImageBlock, EditPageLayout, resolveHasSaveConflict, useFormSaveConflict } from "@comet/cms-admin";
+import { DamImageBlock, EditPageLayout, queryUpdatedAt, resolveHasSaveConflict, useFormSaveConflict } from "@comet/cms-admin";
 import { CircularProgress, FormControlLabel, IconButton, MenuItem } from "@mui/material";
 import {
-    GQLCheckForChangesProductQuery,
-    GQLCheckForChangesProductQueryVariables,
     GQLProductFormCreateProductMutation,
     GQLProductFormCreateProductMutationVariables,
     GQLProductFormFragment,
@@ -39,7 +37,7 @@ import isEqual from "lodash.isequal";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { createProductMutation, productCheckForChangesQuery, productFormFragment, productQuery, updateProductMutation } from "./ProductForm.gql";
+import { createProductMutation, productFormFragment, productQuery, updateProductMutation } from "./ProductForm.gql";
 
 interface FormProps {
     id?: string;
@@ -80,13 +78,8 @@ function ProductForm({ id }: FormProps): React.ReactElement {
 
     const saveConflict = useFormSaveConflict({
         checkConflict: async () => {
-            if (!id) return false;
-            const { data: hasConflictData } = await client.query<GQLCheckForChangesProductQuery, GQLCheckForChangesProductQueryVariables>({
-                query: productCheckForChangesQuery,
-                variables: { id },
-                fetchPolicy: "no-cache",
-            });
-            return resolveHasSaveConflict(data?.product.updatedAt, hasConflictData.product.updatedAt);
+            const updatedAt = await queryUpdatedAt(client, "product", id);
+            return resolveHasSaveConflict(data?.product.updatedAt, updatedAt);
         },
         formApiRef,
         loadLatestVersion: async () => {

packages/admin/cms-admin/src/form/queryUpdatedAt.tsx

@@ -0,0 +1,20 @@
+import { ApolloClient } from "@apollo/client";
+import gql from "graphql-tag";
+
+export async function queryUpdatedAt(client: ApolloClient<object>, rootQueryName: string, id: string | undefined): Promise<string | undefined> {
+    if (!id) return undefined;
+
+    const query = gql`
+        query ($id: ID!) {
+            ${rootQueryName}(id: $id) {
+                updatedAt
+            }
+        }
+    `;
+    const { data } = await client.query({
+        query,
+        variables: { id },
+        fetchPolicy: "no-cache",
+    });
+    return data[rootQueryName]?.updatedAt;
+}

packages/admin/cms-admin/src/index.ts

@@ -50,6 +50,7 @@ export type { DocumentInterface, DocumentType, IdsMap } from "./documents/types"
 export { ChooseFileDialog } from "./form/file/chooseFile/ChooseFileDialog";
 export { FileField } from "./form/file/FileField";
 export { FinalFormToggleButtonGroup } from "./form/FinalFormToggleButtonGroup";
+export { queryUpdatedAt } from "./form/queryUpdatedAt";
 export { serializeInitialValues } from "./form/serializeInitialValues";
 export { SyncFields } from "./form/SyncFields";
 export { useFormSaveConflict } from "./form/useFormSaveConflict";