docs: Improve detail view guide example

vendure-ecommerce · Nov 6, 2023 · ea03d52 · ea03d52
1 parent 187b26f
commit ea03d52
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 11 deletions.
diff --git a/docs/docs/guides/extending-the-admin-ui/creating-detail-views/index.md b/docs/docs/guides/extending-the-admin-ui/creating-detail-views/index.md
@@ -33,17 +33,39 @@ import { TypedBaseDetailComponent, LanguageCode, SharedModule } from '@vendure/a
 // This is the TypedDocumentNode & type generated by GraphQL Code Generator
 import { graphql } from '../../gql';
 
+export const reviewDetailFragment = graphql(`
+  fragment ReviewDetail on ProductReview {
+    id
+    createdAt
+    updatedAt
+    title
+    rating
+    text
+    authorName
+    productId
+  }
+`);
+
 export const getReviewDetailDocument = graphql(`
   query GetReviewDetail($id: ID!) {
     review(id: $id) {
-      id
-      createdAt
-      updatedAt
-      title
-      rating
-      text
-      authorName
-      productId
+      ...ReviewDetail
+    }
+  }
+`);
+
+export const createReviewDocument = graphql(`
+  mutation CreateReview($input: CreateProductReviewInput!) {
+    createProductReview(input: $input) {
+      ...ReviewDetail
+    }
+  }
+`);
+
+export const updateReviewDocument = graphql(`
+  mutation UpdateReview($input: UpdateProductReviewInput!) {
+    updateProductReview(input: $input) {
+      ...ReviewDetail
     }
   }
 `);
@@ -63,7 +85,7 @@ export class ReviewDetailComponent extends TypedBaseDetailComponent<typeof getRe
         authorName: [''],
     });
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor(private formBuilder: FormBuilder, private notificationService: NotificationService) {
         super();
     }
 
@@ -76,11 +98,31 @@ export class ReviewDetailComponent extends TypedBaseDetailComponent<typeof getRe
     }
 
     create() {
-        // Logic to save a Review
+        const { title, rating, authorName } = this.detailForm.value;
+        if (!title || rating == null || !authorName) {
+            return;
+        }
+        this.dataService
+            .mutate(createReviewDocument, {
+                input: { title, rating, authorName },
+            })
+            .subscribe(({ createProductReview }) => {
+                if (createProductReview.id) {
+                    this.notificationService.success('Review created');
+                    this.router.navigate(['extensions', 'reviews', createProductReview.id]);
+                }
+            });
     }
 
     update() {
-        // Logic to update a Review
+        const { title, rating, authorName } = this.detailForm.value;
+        this.dataService
+            .mutate(updateOrganizationDocument, {
+                input: { id: this.id, title, rating, authorName },
+            })
+            .subscribe(() => {
+                this.notificationService.success('Review updated');
+            });
     }
 
     protected setFormValues(entity: NonNullable<ResultOf<typeof getReviewDetailDocument>['review']>, languageCode: LanguageCode): void {

diff --git a/docs/docs/guides/how-to/codegen/index.md b/docs/docs/guides/how-to/codegen/index.md
@@ -167,6 +167,12 @@ const config: CodegenConfig = {
         'apps/marketplace/src/plugins/marketplace/ui/gql/': {
             preset: 'client',
             documents: 'apps/marketplace/src/plugins/marketplace/ui/**/*.ts',
+            // This disables the "fragment masking" feature. Fragment masking
+            // can improve component isolation but introduces some additional
+            // complexity that we will avoid for now.
+            presetConfig: {
+                fragmentMasking: false,
+            },
         },
         // highlight-end
         'apps/marketplace/src/plugins/marketplace/gql/generated.ts': {