🐡

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

2021/05/20に公開約2,300字3件のコメント

デフォルトでは 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 で作りました)

Discussion

コメント失礼します
SHOPIFY_ADMIN_API_PASSはどこから取ってきた値でしょうか?🙇‍♂️

@今正 さん
今はShopifyの管理画面上でメタフィールドをAPIに公開できるようになったのでこの記事の作業は行わなくても大丈夫になりました🙏

ありがとうございます!

ログインするとコメントできます