> For the complete documentation index, see [llms.txt](https://docs.chiliz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chiliz.com/th/phatthana/sung-khuen/tit-tam-fan-token.md).

# ติดตามการโอน Fan Token

การติดตามการเคลื่อนไหวของ Fan Token บน Chiliz Chain เป็นวิธีที่ดีในการตรวจสอบกิจกรรมของ token ที่คุณชื่นชอบ คุณสามารถใช้สิ่งนี้เป็นจุดเริ่มต้นสำหรับ dashboard ที่มีศักยภาพ เพื่อวิเคราะห์ข้อมูลและให้ insight ว่าอะไรกำลังเป็นที่นิยมและอะไรไม่ใช่

เมื่อติดตามการเคลื่อนไหวของ Fan Token™ คุณจะพบกับความท้าทายอย่างรวดเร็ว: การอ่านข้อมูลโดยตรงจาก blockchain มีประสิทธิภาพสำหรับสถานะปัจจุบัน ("*ยอดคงเหลือของกระเป๋าเงิน X คือเท่าไหร่?*") แต่ไม่มีประสิทธิภาพสำหรับข้อมูลในอดีต ("*แสดงธุรกรรมทุกรายการที่เกี่ยวข้องกับกระเป๋าเงิน X ในช่วงปีที่ผ่านมา*")

เพื่อแก้ปัญหานี้ เราสามารถใช้ subgraphs

## เกี่ยวกับ subgraphs

Subgraph คือ API แบบกำหนดเองที่ดึงข้อมูลจาก blockchain ประมวลผล และจัดเก็บไว้เพื่อให้สามารถ query ได้อย่างง่ายดาย\
แทนที่จะขอให้ blockchain สแกนบล็อกหลายล้านบล็อกทุกครั้งที่คุณต้องการข้อมูล subgraph จะ index event เฉพาะที่เกิดขึ้นและจัดเก็บไว้ในฐานข้อมูล

Chiliz Chain รองรับ indexing protocols มาตรฐานอุตสาหกรรม คุณสามารถเลือกผู้ให้บริการที่เหมาะสมที่สุดกับความต้องการของโปรเจกต์คุณ:

* [The Graph](https://thegraph.com/): มาตรฐานอุตสาหกรรมสำหรับ decentralized indexing ช่วยให้คุณ deploy subgraph ของคุณไปยัง decentralized network ของ indexers
* [Goldsky](https://goldsky.com/): บริการ indexing แบบ hosted ที่มีประสิทธิภาพสูง รองรับโค้ดของ The Graph อย่างสมบูรณ์ (มักใช้โค้ดเดียวกันได้เลย) แต่มีความเร็วในการ index ที่สูงกว่าและฟีเจอร์ real-time data streaming

เครื่องมือทั้งสองใช้ framework การพัฒนาเดียวกัน ดังนั้นขั้นตอนส่วนใหญ่ในหน้านี้จึงใช้ได้กับทั้งคู่

มาดูกันว่าเราจะติดตามการโอนของ PSG Fan Token ได้อย่างไร...

## 0. เลือกเครื่องมือ

คุณสามารถ deploy subgraph บน Chiliz Chain โดยใช้ **The Graph** (decentralized network) หรือ **Goldsky** (hosted indexer) โครงสร้างโค้ดเหมือนกัน ต่างกันเพียงคำสั่ง deployment เท่านั้น

แน่นอนว่าคุณสามารถอ้างอิงเอกสารของพวกเขาได้:

{% embed url="<https://thegraph.com/docs/en/subgraphs/quick-start/>" %}

{% embed url="<https://docs.goldsky.com/subgraphs/deploying-subgraphs>" %}

## 1. เริ่มต้นโปรเจกต์ subgraph

ทั้ง The Graph และ Goldsky มีวิธีการสร้าง graph ผ่าน CLI

{% hint style="info" %}
The Graph มี [Subgraph Studio](https://thegraph.com/studio/) ซึ่งคุณสามารถเชื่อมต่อโดยใช้ Web3 ของคุณ จากนั้นสร้าง subgraph ผ่านอินเทอร์เฟซ

Goldsky ให้ [dashboard](https://app.goldsky.com/) เมื่อคุณสร้างบัญชี ซึ่งคุณสามารถสร้าง subgraph ได้จากที่นั่น
{% endhint %}

### ติดตั้ง Graph CLI⁠

บนเครื่องของคุณ รันคำสั่งต่อไปนี้:

```bash
npm install -g @graphprotocol/graph-cli
```

{% hint style="info" %}
คุณสามารถสร้าง subgraph โดยใช้ CLI tool จาก The Graph สำหรับทั้ง subgraphs แบบ decentralized ของ The Graph หรือ subgraphs แบบ hosted ของ Goldsky

Goldsky มี CLI tool ของตัวเอง ซึ่งคุณจะต้องใช้หากต้องการ deploy บน Goldsky (ดูด้านล่าง)
{% endhint %}

### เริ่มต้น subgraph ของคุณ⁠

คุณสามารถคัดลอกสิ่งนี้โดยตรงจากหน้า subgraph ของคุณเพื่อใส่ subgraph slug เฉพาะของคุณ:

```bash
graph init --studio <SUBGRAPH_SLUG>
```

แท็ก `--studio` เป็นตัวเลือกไม่บังคับ

ในตัวอย่าง PSG Fan Token ของเรา เราสามารถใช้:

```bash
graph init chiliz-psg-fantoken-followup
```

คุณจะถูกถามให้ระบุข้อมูลบางอย่างเกี่ยวกับ subgraph ของคุณ ดังนี้:

<figure><img src="/files/t8smb1pFd6tOf5HCMT2P" alt=""><figcaption></figcaption></figure>

คุณต้องมี smart contract ที่ยืนยันแล้วบน block explorer และ CLI จะดึง ABI โดยอัตโนมัติและตั้งค่า subgraph ของคุณ การตั้งค่าเริ่มต้นจะสร้าง entity สำหรับแต่ละ event

{% hint style="warning" %}
หมายเหตุ:

* หาก smart contract ใช้ proxy เช่น PSG Fan Token ให้ใช้ที่อยู่ของ implementation contract แทน คุณจะเห็นได้ในแท็บ "Read/write contract" บนหน้า block explorer ของ smart contract ตัวอย่างเช่น [ดูที่นี่สำหรับ PSG Fan Token contract บน Chiliz Block Explorer](https://scan.chiliz.com/token/0xc2661815C69c2B3924D3dd0c2C1358A1E38A3105?tab=read_write_contract)
  * หากคุณต้องป้อนที่อยู่ implementation contract ของ proxy เมื่อโปรเจกต์ตั้งค่าเสร็จแล้ว ให้ไปที่ manifest file (`subgraph.yaml`) และเปลี่ยนที่อยู่ smart contract เป็นที่อยู่ของ proxy
* หาก Start Block ไม่ได้ถูกดึงมาโดยอัตโนมัติ คุณสามารถป้อนหมายเลขบล็อกที่ smart contract ถูกสร้างขึ้นด้วยตนเอง คุณสามารถดูข้อมูลนี้จาก block explorer
  {% endhint %}

{% hint style="info" %}
เมื่อทำการเปลี่ยนแปลง subgraph ของคุณ คุณจะทำงานส่วนใหญ่กับไฟล์สามไฟล์:

* Manifest (`subgraph.yaml`): กำหนด data sources ที่ subgraph ของคุณจะ index
* Schema (`schema.graphql`): กำหนดข้อมูลที่คุณต้องการดึงจาก subgraph
* AssemblyScript Mappings (`mapping.ts`): แปลงข้อมูลจาก data sources ของคุณเป็น entities ที่กำหนดใน schema
  {% endhint %}

เปิด `subgraph.yaml` และตรวจสอบให้แน่ใจว่า manifest file ของคุณชี้ไปยัง network ที่ถูกต้อง:

```yaml
dataSources:
  - kind: ethereum
    name: FanToken
    network: chiliz  # Use 'chiliz' for Mainnet, chiliz-testnet for Spicy
    source:
      address: "0x..." 
      abi: FanToken
```

### Compile subgraph ของคุณ

สุดท้าย compile subgraph ของคุณเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาด:

```bash
graph codegen && graph build
```

## 2. Deploy และ Publish

เมื่อ subgraph ของคุณถูก build แล้ว ให้เลือกผู้ให้บริการเพื่อ deploy

{% columns %}
{% column %}
**The Graph**

1. เชื่อมต่อกับ [Subgraph Studio](https://thegraph.com/studio/), สร้าง subgraph และคัดลอก deploy key ของคุณ
2. ยืนยันตัวตนผ่าน CLI:\
   `graph auth --studio <DEPLOY_KEY>`
3. Deploy subgraph ของคุณไปยัง Subgraph Studio:\
   `graph deploy --studio <SUBGRAPH_SLUG>`
4. ไปที่ Studio เปิด subgraph ของคุณและคลิก "Publish" เพื่อ mint subgraph ของคุณไปยัง decentralized network\
   การดำเนินการนี้จะเรียกใช้ธุรกรรมผ่านกระเป๋าเงินของคุณเพื่อเผยแพร่ subgraph ของคุณเป็น NFT บน Arbitrum One network
   {% endcolumn %}

{% column %}
**Goldsky**

1. ไปที่ [Goldsky](https://app.goldsky.com/), สร้าง API key ใน "Project Settings" และเข้าสู่ระบบผ่าน CLI
2. ติดตั้งคำสั่ง `goldsky`:\
   `curl https://goldsky.com | sh`\
   จากนั้นยืนยันตัวตนผ่าน CLI:\
   `goldsky login`
3. อัปโหลด subgraph ของคุณไปยัง Goldsky:\
   `goldsky subgraph deploy / --path`

Subgraphs ของ Goldsky จะพร้อมใช้งานทันทีหลังจาก deployment ไม่จำเป็นต้องมีขั้นตอนการ publish เพิ่มเติม
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
คุณจะถูกถามให้ระบุ version label คุณสามารถป้อนอะไรก็ได้เช่น `v0.0.1` แต่คุณมีอิสระที่จะเลือกรูปแบบ เมื่อเสร็จแล้ว คุณจะเห็น subgraph เริ่มต้น sync ในหน้า Studio
{% endhint %}

{% hint style="info" %}
smart contracts ของ The Graph ทั้งหมดอยู่บน [Arbitrum One](https://arbitrum.io/arbitrum-101) แม้ว่า subgraph ของคุณจะ index ข้อมูลจาก Chiliz Chain
{% endhint %}

## 3. Query Subgraph ของคุณ

ยินดีด้วย! ตอนนี้คุณสามารถเริ่มต้น query ได้โดยส่ง GraphQL query ไปยัง query URL ของ subgraph ซึ่งพบได้ใน dashboard ของบริการที่คุณเลือก

ตัวอย่าง:

{% columns %}
{% column %}
**The Graph**

`https://gateway-arbitrum.network.thegraph.com/api/[APIKEY]/subgraphs/id/[ID]`
{% endcolumn %}

{% column %}
**Goldsky**

`https://api.goldsky.com/api/public/project_[KEY]/subgraphs/[SLUG]/1.0.0/gn`
{% endcolumn %}
{% endcolumns %}

ตอนนี้คุณเพียงแค่ต้องกรอกรายละเอียดของคุณเพื่อเริ่มส่ง GraphQL queries ไปยัง endpoint นี้

## ภาคผนวก

### ตัวอย่าง Query

Query นี้แสดงธุรกรรมทั้งหมดของ PSG Fan Token

```typescript
const axios = require('axios');

// The GraphQL query (Identical for both providers)
const graphqlQuery = `{
  transfers {
    from
    to
    value
    transactionHash
  }
}`;

// Choose the right URL format depending on the provider:
// const queryUrl = 'https://gateway-arbitrum.network.thegraph.com/api/[api-key]/subgraphs/id/[id]'
// const queryUrl = 'https://api.goldsky.com/api/public/project_[key]/subgraphs/[slug]/1.0.0/gn';

const graphQLRequest = {
  method: 'post',
  url: queryUrl,
  data: {
    query: graphqlQuery,
  },
};

// Send the GraphQL query
axios(graphQLRequest)
  .then((response) => {
    // Handle the response here
    const data = response.data.data
    console.log(data)

  })
  .catch((error) => {
    // Handle any errors
    console.error(error);
  });
```

### ตัวอย่างโค้ด

```json
{
  "data": {
    "transfers": [
      {
        "from": "0x26a3e78fa4d2cbebf6b59b2f84b8fb7c61b52d28",
        "to": "0xdca23d02923d01779fb22959bd2575d64eab4535",
        "value": "1500",
        "transactionHash": "0x000309e9cd3f550e8965381bbd83a35c5cee18f26c33a357f9dbb57450d594ea"
      },
//      ...
  }
}
```

การส่งสิ่งนี้ไปยัง query URL จะคืนผลลัพธ์นี้:

```json
{
  transfers {
    from
    to
    value
    transactionHash
  }
}
```

## แหล่งข้อมูลเพิ่มเติม

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการ query ข้อมูลจาก subgraph ของคุณด้วย GraphQL:

{% embed url="<https://thegraph.com/docs/en/subgraphs/querying/best-practices/>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.chiliz.com/th/phatthana/sung-khuen/tit-tam-fan-token.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.