# StoreFront API を利用した購入履歴機能の実装について

**URL:** <https://community.shopify.com/t/storefront-api/52411>\
**Category:** 技術的なQ＆A\
**Created:** [July 8, 2021, 6:32am UTC](https://community.shopify.com/t/storefront-api/52411 "2021-07-08T06:32:00Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

テーマ: Storefront API を用いた、ログイン後の購入履歴表示の可否と実装方法。

最新の結論: 可能。Shopify の Storefront API（フロント向け GraphQL API）で Order オブジェクトを、ログイン後に得られる customerAccessToken（顧客認証トークン）を使って取得する。

実装の要点:
- 顧客がログイン → customerAccessToken を取得。
- GraphQL で customer(customerAccessToken: …) { orders(...) { … } } を実行し、購入履歴を取得。

取得できる主なフィールド例:
- id, name, statusUrl, orderNumber
- canceledAt, processedAt
- financialStatus, fulfillmentStatus
- totalPriceV2 { amount }

補足: 掲載の GraphQL クエリ例（customer→orders）のコード断片が理解の中心。APIバージョン参考リンク（2022-10）も提示。

議論の状態: 反対意見や追加課題は提示されておらず、具体的な実装指針が示されている。

<div class="post-metadata">

**Author:** ![hiddyOtake](https://avatars.discourse-cdn.com/v4/letter/h/439d5e/32.png) [@hiddyOtake](https://community.shopify.com/u/hiddyOtake)\
**Post date:** [July 8, 2021, 6:32am UTC](https://community.shopify.com/t/storefront-api/52411/1 "2021-07-08T06:32:00Z")

</div>

初めまして、hiddyOtakeと申します。

React(Next.js) + StoreFront API を利用し、デモストアの構築に取り組んでおります。

会員 or 非会員問わず、商品を購入できる設計にしたいのですが、

「過去にショップで商品を購入されたことのあるお客様に対しては、サイト内でのログインを実行すれば、購入履歴を表示する機能」の実装は可能でしょうか。

前提として、下記のディスカッションを一読し、Customer creation などで簡易的なログイン機能は実装できるのはわかりました。

[https://community.shopify.com/post/1136692](https://community.shopify.com/post/1136692)

その上で、ログイン後にユーザーの購入履歴情報を、storefront を用いて取得することは可能でしょうか。

勘所をお持ちの方がいれば、ぜひご意見を伺いたく思います。

よろしくお願い申し上げます。

---

<div class="post-metadata">

**Author:** ![naoshiro](https://avatars.discourse-cdn.com/v4/letter/n/b38774/32.png) [@naoshiro](https://community.shopify.com/u/naoshiro)\
**Post date:** [October 19, 2022, 1:43pm UTC](https://community.shopify.com/t/storefront-api/52411/2 "2022-10-19T13:43:13Z")

</div>

[https://shopify.dev/api/storefront/2022-10/objects/Order](https://shopify.dev/api/storefront/2022-10/objects/Order)  
こちらのAPIを使えば取得可能です。  
ログインしたら取得できるcustomerAccessTokenを使って、下記のようなqueryで取得すればよいかと思います。

```markup
{
  customer(customerAccessToken: "${customerAccessToken}") {
    orders(first: 250) {
      edges {
        node {
          id
          name
          statusUrl
          orderNumber
          canceledAt
          processedAt
          financialStatus
          fulfillmentStatus 
          totalPriceV2 {
            amount
          }
        }
      }
    }
  }
}

```