Shopify Admin API と Next.js の API Route を用いてメタフィールドを有効化する

デフォルトでは Storefront API では メタフィールドを取得できない。
Admin API を用いて許可をする必要がある。

https://shopify.dev/docs/admin-api/graphql/reference/metafields/metafieldstorefrontvisibilityinput

API Route 側の設定

https://nextjs.org/docs/api-routes/introduction

pages/api/customField.ts
自分の場合は上の場所にファイルを作成

import { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const body = JSON.parse(req.body) as {
    namespace: string
    key: string
    ownerType: string
  }

  const headers = {
    Authorization:
      'Basic ' +
      Buffer.from(
        process.env.SHOPIFY_ADMIN_API_KEY +
          ':' +
          process.env.SHOPIFY_ADMIN_API_PASS
      ).toString('base64'),
    'X-Shopify-Storefront-Access-Token':
      process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,
    'Content-Type': 'application/json',
    Accept: 'application/json',
    'Access-Control-Allow-Origin': '*',
  } as any

  const query = `
    mutation($input: MetafieldStorefrontVisibilityInput!) {
      metafieldStorefrontVisibilityCreate(
        input: $input
      ) {
        metafieldStorefrontVisibility {
          id
        }
        userErrors {
          field
          message
        }
      }
    }
  `

  const r = await fetch(process.env.SHOPIFY_GRAPHQL_API_URL as string, {
    method: 'POST',
    headers,
    body: JSON.stringify({
      query,
      variables: {
        input: {
          namespace: body.namespace,
          key: body.key,
          ownerType: body.ownerType,
        },
      },
    }),
  })

  const json = await r.json()

  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.end(JSON.stringify(json))
}

• SHOPIFY_ADMIN_API_KEY
• SHOPIFY_ADMIN_API_PASS
• SHOPIFY_STOREFRONT_ACCESS_TOKEN
• SHOPIFY_GRAPHQL_API_URL

は .env で指定

フロント側の設定

  const post = async (input: {
    namespace: string
    key: string
    ownerType: string
  }) => {
    const res = await fetch('/api/customField', {
      method: 'POST',
      body: JSON.stringify(input),
    })

    const json = await res.json()
  }

フォームを作ってポストしてあげる

• namespace
• key
• ownerType

を設定する

---

StoreFront API を叩くと許可したメタフィールドが取得できるようになる！
自分の場合は Admin API を叩くものは Electron で作成するようにしました（Shopify の かんたんな管理画面を Electron で作りました）