Update metaobject through the admin api

app/routes/api.update.tsx

@@ -0,0 +1,45 @@
+import { json } from '@shopify/remix-oxygen'
+
+const METAOBJECT_UPDATE_MUTATION = `#graphql
+mutation UpdateMetaobject($id: ID!, $metaobject: MetaobjectUpdateInput!) {
+  metaobjectUpdate(id: $id, metaobject: $metaobject) {
+    metaobject {
+      handle
+    }
+    userErrors {
+      field
+      message
+      code
+    }
+  }
+}`
+
+export async function action({ request, context }) {
+  const body = await request.json()
+  const result = await fetch(
+    context.env.SHOPIFY_STORE_URL,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Shopify-Access-Token':
+          context.env.SHOPIFY_STORE_ACCESS_TOKEN,
+      },
+
+      body: JSON.stringify({
+        query: METAOBJECT_UPDATE_MUTATION,
+        variables: {
+          id: body.id,
+          metaobject: {
+            fields: [{ key: 'quote', value: body.value }],
+          },
+        },
+      }),
+    },
+  ).then((res) => res.json())
+
+  return json({
+    status: 'success',
+    body: JSON.stringify(result),
+  })
+}

app/routes/products.$handle/sections/reviews.jsx

@@ -59,6 +59,7 @@ export default function Reviews() {
               return (
                 <Review
                   key={review.id}
+                  id={review.id}
                   quote={review.quote.value}
                   customer={review.customer.value}
                   background={review.background}
@@ -87,14 +88,30 @@ const review = cva({
 })
 
 export function Review({ className, ...props }) {
-  const { quote, customer, background } = props
+  const { quote, customer, background, id } = props
   const classes = cx(
     review({ ...props, background }),
     className,
   )
   const { firstSentence, remainingText } =
     splitTextIntoSentences(quote)
 
+  const updateReview = React.useCallback(() => {
+    const newReview = prompt('New review quote')
+    fetch(`/api/update`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        id,
+        value: newReview,
+      }),
+    })
+      .then((res) => res.json())
+      .then((r) => console.log(r))
+  }, [id])
+
   return (
     <div style={{ contain: 'layout' }}>
       <Column
@@ -139,6 +156,9 @@ export function Review({ className, ...props }) {
         >
           &mdash;{customer}
         </Text>
+        <button onClick={updateReview}>
+          Update review
+        </button>
       </Column>
     </div>
   )

env.d.ts

@@ -30,6 +30,8 @@ declare global {
     PUBLIC_STOREFRONT_ID: string;
     PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
     PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
+    SHOPIFY_STORE_URL: string;
+    SHOPIFY_STORE_ACCESS_TOKEN: string;
   }
 }