DEVDOCS-5878: [Update] graphql-cart-metafields (#314)

<!-- Ticket number or summary of work -->
# [DEVDOCS-5878]


## What changed?
Add new article "Working with Cart Metafields"

## Release notes draft
Talk to Jamie

Examples:
* The newly-released [X feature] is now available to use. Now, you’ll be
able to [perform Y action].
* We're happy to announce [X feature], which can help you [perform Y
action].
* [X feature] helps you to create [Y response] using the [Z query
parameter]. Now, you can deliver [ex, localized shopping experiences for
your customers].
* Fixed a bug in the [X endpoint]. Now the [Y field] will appear when
you click [Z option]. -->
* 

## Anything else?
<!-- Add related PRs, salient notes, additional ticket numbers, etc. -->

ping {names}


[DEVDOCS-5878]:
https://bigcommercecloud.atlassian.net/browse/DEVDOCS-5878?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Sarah Riehl <sarah.riehl@bigcommerce.com>

docs/storefront/cart-checkout/metafields.mdx

@@ -0,0 +1,215 @@
+**GraphQL Storefront API: Cart Metafields**
+
+# Working with cart metafields
+
+Cart metafields let you add custom metadata to a cart to display product information. Cart metafields are key-value pairs. You can work with them using both the GraphQL Storefront API and the REST Storefront API.
+
+## Example queries and mutations
+
+### Query cart metafields
+
+<Tabs items={['Request', 'Response']}>
+  <Tab>
+```graphql filename="Example query: Get cart metafields" showLineNumbers copy 
+ query getCartMetafields {
+   site{
+     cart{
+      metafields(namespace: "bc_storefront"){
+        edges{
+          node{
+            id
+            key
+            value
+          }
+        }
+      }
+    }
+  }
+}
+```
+</Tab>
+<Tab>
+```json filename="Example query: Get cart metafields" showLineNumbers copy
+{
+  "data": {
+    "site": {
+      "cart": {
+        "metafields": {
+          "edges": [
+            {
+              "node": {
+                "id": "TWV0YWZpZWxkczo1NQ==",
+                "key": "size",
+                "value": "small"
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}
+```
+</Tab>
+</Tabs>
+
+
+### Create a cart metafield
+
+<Callout type="info">
+The platform limit is 250 metafields for a single cart. 
+</Callout>
+
+<Tabs items={['Request', 'Response']}>
+  <Tab>
+```graphql filename="Example mutation: Create a cart metafield" showLineNumbers copy 
+mutation createCartMetafield { 
+ cart {
+  createCartMetafield(input:{
+    cartEntityId: "4a5fd706-beb9-41b5-9ac2-01593b471168"
+    data: {
+      key: "size"
+      value: "small"
+    }
+  }) {
+    metafield {
+      id
+      entityId
+      key
+      value
+    }
+    errors {
+      ...on Error {
+        message
+      }
+    }
+  }
+}
+}
+ ```
+</Tab>
+  <Tab>
+  ```json filename="Example mutation: Create a cart metafield" showLineNumbers copy
+  {
+  "data": {
+    "cart": {
+      "createCartMetafield": {
+        "metafield": {
+          "id": "TWV0YWZpZWxkczo1Mw==",
+          "entityId": 53,
+          "key": "size",
+          "value": "small"
+        },
+        "errors": []
+      }
+    }
+  }
+}
+```
+  </Tab>
+</Tabs>
+
+### Update a cart metafield
+<Tabs items={['Request', 'Response']}>
+  <Tab>
+  ```graphql filename="Example mutation: Update a cart metafield" showLineNumbers copy 
+  mutation updateCartMetafield {
+   cart {
+    updateCartMetafield(input:{
+      cartEntityId: "4a5fd706-beb9-41b5-9ac2-01593b471168"
+      metafieldEntityId:53
+      data: {
+        key: "Size",
+	value: "medium"
+      }
+    }) {
+      metafield {
+        id
+        entityId
+        key
+        value
+      }
+      errors {
+        ...on Error {
+          message
+        }
+      }
+    }
+  }
+}
+
+```
+</Tab>
+  <Tab>
+```json filename="Example mutation: Update a cart metafield" showLineNumbers copy
+ {
+  "data": {
+    "cart": {
+      "updateCartMetafield": {
+        "metafield": {
+          "id": "TWV0YWZpZWxkczo1Mw==",
+          "entityId": 53,
+          "key": "Size",
+          "value": "medium"
+        },
+        "errors": []
+      }
+    }
+  }
+}
+```
+  </Tab>
+</Tabs>
+
+### Delete a cart metafield
+<Tabs items={['Request', 'Response']}>
+  <Tab>
+```graphql filename="Example mutation: Delete a cart metafield" showLineNumbers copy 
+ mutation deleteCartMetafield {
+  cart {
+   deleteCartMetafield(input:{
+     cartEntityId: "4a5fd706-beb9-41b5-9ac2-01593b471168"
+     metafieldEntityId: 53
+  }) {
+  errors {
+        ... on NotFoundError {
+          __typename
+          message
+        }
+        ... on ValidationError {
+          __typename
+          message
+          path
+        }
+        ... on NotAuthorisedError {
+          __typename
+        }
+      }
+    }
+  }
+}
+```
+</Tab>
+  <Tab>
+```json filename="Example mutation: Delete a cart metafield" showLineNumbers copy
+{
+  "data": {
+    "cart": {
+      "deleteCartMetafield": {
+        "errors": []
+      }
+    }
+  }
+}
+```
+  </Tab>
+</Tabs>
+
+## Resources
+
+### GraphQL documentation
+- [GraphQL Storefront API overview](/docs/storefront/graphql)
+- [GraphQL Storefront API: Carts and Checkout](/docs/storefront/cart-checkout/guide/graphql-storefront)
+- [Authenticating requests to the GraphQL Storefront API](/docs/start/authentication/graphql-storefront)
+- [Authentication and Example Requests: BigCommerce-generated JWTs](/docs/start/authentication#bigcommerce-generated-jwts)
+- [GraphQL Storefront Playground](/graphql-storefront/playground)