fix direct api example. (#2990)

Author: fatbattk

packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/examples/direct-api-access/direct-api-access.ts

@@ -1,15 +1,16 @@
 import {
   extension,
   POSBlock,
-  Text,
   POSBlockRow,
-  DirectApiRequestBody,
+  Text,
 } from '@shopify/ui-extensions/point-of-sale';
 import type {DirectApiRequestBody} from '@shopify/ui-extensions/point-of-sale';
 
+// This mutation requires the `write_products` access scope.
+// https://shopify.dev/docs/api/admin-graphql/latest/mutations/metafieldsset
 async function mutateMetafield(productId: number) {
   const requestBody: DirectApiRequestBody = {
-    query: `
+    query: `#graphql
         mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
           metafieldsSet(metafields: $metafields) {
             metafields {
@@ -40,9 +41,10 @@ async function mutateMetafield(productId: number) {
   });
 }
 
+// https://shopify.dev/docs/api/admin-graphql/latest/queries/product
 async function queryProductMetafields(productId: number) {
   const requestBody: DirectApiRequestBody = {
-    query: `
+    query: `#graphql
       query GetProduct($id: ID!) {
         product(id: $id) {
           id

packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/examples/direct-api-access/direct-api-access.tsx

@@ -1,16 +1,18 @@
 import {
   reactExtension,
   useApi,
-  Text,
   POSBlock,
   POSBlockRow,
+  Text,
 } from '@shopify/ui-extensions-react/point-of-sale';
-import type {DirectApiRequestBody} from '@shopify/ui-extensions-react/point-of-sale';
-import {useEffect, useState} from 'react';
+import type {DirectApiRequestBody} from '@shopify/ui-extensions/point-of-sale';
+import React, {useEffect, useState} from 'react';
 
+// This mutation requires the `write_products` access scope.
+// https://shopify.dev/docs/api/admin-graphql/latest/mutations/metafieldsset
 async function mutateMetafield(productId: number) {
   const requestBody: DirectApiRequestBody = {
-    query: `
+    query: `#graphql
         mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
           metafieldsSet(metafields: $metafields) {
             metafields {
@@ -41,9 +43,10 @@ async function mutateMetafield(productId: number) {
   });
 }
 
+// https://shopify.dev/docs/api/admin-graphql/latest/queries/product
 async function queryProductMetafields(productId: number) {
   const requestBody: DirectApiRequestBody = {
-    query: `
+    query: `#graphql
       query GetProduct($id: ID!) {
         product(id: $id) {
           id
@@ -71,7 +74,7 @@ async function queryProductMetafields(productId: number) {
 
 const ProductDetailsBlock = () => {
   const {product} = useApi<'pos.product-details.block.render'>();
-  const [productInfo, setProductInfo] = useState<any>();
+  const [productInfo, setProductInfo] = useState<string>('');
   useEffect(() => {
     async function getProductInfo() {
       const result = await queryProductMetafields(product.id);

packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/pages/pos-overview.doc.ts

@@ -110,13 +110,18 @@ const data: LandingTemplateSchema = {
           type: 'info',
           sectionContent: `Direct API access is available as of POS version 10.2.0 for extensions targeting \`unstable\`. This feature will be available for all extensions targeting stable API versions in the future.`,
         },
+        {
+          title: 'Access scopes',
+          type: 'note',
+          sectionContent: `Be sure to declare all required access scopes in your app's TOML file. For local development, access scopes are only registered or updated when the app is deployed and installed on your test store.`,
+        },
       ],
       sectionContent:
         "You can make Shopify Admin API requests directly from your extension using the standard [web fetch API](https://developer.mozilla.org/en-US/docs/Web/API/fetch)!\n\nAny `fetch()` calls from your extension to Shopify's Admin GraphQL API are automatically authenticated by default. These calls are fast too, because Shopify handles requests directly.\n\nDirect API requests use [online access](https://shopify.dev/docs/apps/build/authentication-authorization/access-token-types/online-access-tokens) mode by default.",
       anchorLink: 'direct-api-access',
 
       codeblock: {
-        title: 'Query Shopify data',
+        title: 'Query Shopify data directly',
         tabs: [
           {
             code: '../examples/direct-api-access/direct-api-access.tsx',