# Suivre les transferts d’un Fan Token

Suivre les mouvements de Fan Token sur Chiliz Chain est un excellent moyen de surveiller l'activité de vos tokens favoris. En l'utilisant comme bloc de construction pour un éventuel tableau de bord, vous pouvez rationaliser les données pour fournir des informations sur ce qui est populaire et ce qui ne l'est pas.

Lors de la surveillance des mouvements de Fan Token™, vous rencontrez rapidement un défi : lire les données directement depuis la blockchain est efficace pour l'état actuel ("*Quel est le solde du portefeuille X ?*"), mais inefficace pour les données historiques ("*Montrez-moi chaque transfert impliquant le portefeuille X au cours de la dernière année*").

Pour résoudre cela, nous pouvons utiliser des sous-graphes.

## À propos des sous-graphes

Un sous-graphe est une API personnalisée qui extrait des données d'une blockchain, les traite et les stocke pour qu'elles puissent être facilement interrogées. \
Au lieu de demander à la blockchain de parcourir des millions de blocs à chaque fois que vous avez besoin de données, un sous-graphe indexe des événements spécifiques au fur et à mesure qu'ils se produisent et les stocke dans une base de données.

Chiliz Chain prend en charge les protocoles d'indexation standard de l'industrie. Vous pouvez choisir le fournisseur qui correspond le mieux aux besoins de votre projet :

* [The Graph](https://thegraph.com/): La norme de l'industrie pour l'indexation décentralisée. Il vous permet de déployer votre sous-graphe sur un réseau décentralisé d'indexeurs.
* [Goldsky](https://goldsky.com/): Un service d'indexation hébergé et haute performance. Il est entièrement compatible avec le code de The Graph (vous pouvez souvent utiliser exactement le même code) mais offre des vitesses d'indexation plus rapides et des fonctionnalités de streaming de données en temps réel.

Les deux outils utilisent le même framework de développement, ainsi la plupart des étapes de cette page peuvent s'appliquer aux deux.

Voyons par exemple comment nous pourrions suivre les transferts du PSG Fan Token...

## 0. Choisir un outil

Vous pouvez déployer un sous-graphe sur Chiliz Chain en utilisant **The Graph** (réseau décentralisé) ou **Goldsky** (indexeur hébergé). La structure du code est identique ; seules les commandes de déploiement diffèrent.

Bien sûr, vous pouvez vous appuyer sur leur propre documentation :

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

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

## 1. Initialiser un projet de sous-graphe

The Graph et Goldsky proposent des méthodes basées sur une CLI pour créer votre graphe.

{% hint style="info" %}
The Graph dispose de [Subgraph Studio](https://thegraph.com/studio/), que vous pouvez connecter en utilisant votre Web3, puis créer un sous-graphe via l'interface.&#x20;

Goldsky vous propose un [tableau de bord](https://app.goldsky.com/) lorsque vous créez un compte, à partir duquel vous pouvez créer un sous-graphe.
{% endhint %}

### Installez le Graph CLI⁠

Sur votre machine locale, exécutez ce qui suit :

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

{% hint style="info" %}
Vous pouvez créer un sous-graphe en utilisant l'outil CLI de The Graph pour des sous-graphes décentralisés The Graph, ou pour des sous-graphes hébergés Goldsky.

Goldsky dispose de son propre outil CLI, que vous devrez utiliser si vous souhaitez déployer sur Goldsky (voir ci-dessous).
{% endhint %}

### Initialisez votre sous-graphe⁠

Vous pouvez copier ceci directement depuis votre page de sous-graphe pour inclure votre slug de sous-graphe spécifique :

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

Le `--studio` tag est optionnel.&#x20;

Dans notre exemple du PSG Fan Token, nous pouvons utiliser :

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

Il vous sera demandé de fournir quelques informations sur votre sous-graphe, comme ceci :

<figure><img src="https://2383909840-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4L7rBH2rmyoBTn93MSdx%2Fuploads%2FGMGt5GCqFm90iJs9sCSP%2Fimage.png?alt=media&#x26;token=15139a74-acfe-43ab-99f4-a5ed09fb9101" alt=""><figcaption></figcaption></figure>

Vous devez avoir votre contrat vérifié sur l'explorateur de blocs, et la CLI obtiendra automatiquement l'ABI et configurera votre sous-graphe. Les paramètres par défaut généreront une entité pour chaque événement.

{% hint style="warning" %}
Remarque :

* Si le contrat utilise un proxy, comme c'est le cas pour le PSG Fan Token, alors utilisez l'adresse du contrat d'implémentation à la place. Vous la verrez dans l'onglet "Read/write contract" sur la page de l'explorateur de blocs du contrat. Par exemple, [voir ici pour le contrat du PSG Fan token sur Chiliz Block Explorer](https://scan.chiliz.com/token/0xc2661815C69c2B3924D3dd0c2C1358A1E38A3105?tab=read_write_contract).
  * Si vous avez dû entrer l'adresse du contrat d'implémentation d'un proxy, alors une fois le projet configuré, allez dans le fichier manifeste (`subgraph.yaml`) et changez l'adresse du contrat pour celle du proxy.
* Si le bloc de départ (Start Block) n'est pas obtenu automatiquement, vous pouvez saisir manuellement le numéro de bloc où le contrat a été créé. Vous pouvez l'obtenir depuis l'explorateur de blocs.
  {% endhint %}

{% hint style="info" %}
Lorsque vous apportez des modifications à votre sous-graphe, vous travaillerez principalement avec trois fichiers :

* Le Manifeste (`subgraph.yaml`): Définit quelles sources de données votre sous-graphe indexera.
* Le Schéma (`schema.graphql`): Définit quelles données vous souhaitez récupérer à partir du sous-graphe.
* Mappings AssemblyScript (`mapping.ts`): Traduisent les données de vos sources de données vers les entités définies dans le schéma.
  {% endhint %}

Ouvrez `subgraph.yaml` et assurez-vous que votre fichier manifeste pointe vers le réseau correct :

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

### Compilez votre sous-graphe

Enfin, compilez votre sous-graphe pour vous assurer qu'il n'y a pas d'erreurs :

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

## 2. Déployer et Publier

Une fois votre sous-graphe construit, choisissez votre fournisseur pour le déployer.

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

1. Connectez-vous à [Subgraph Studio](https://thegraph.com/studio/), créez un sous-graphe et copiez votre clé de déploiement.
2. Authentifiez-vous via la CLI :\
   `graph auth --studio <DEPLOY_KEY>`&#x20;
3. Déployez votre sous-graphe sur Subgraph Studio :\
   `graph deploy --studio <SUBGRAPH_SLUG>`&#x20;
4. Allez sur Studio, ouvrez votre sous-graphe et cliquez sur "Publish" pour frapper (mint) votre sous-graphe sur le réseau décentralisé. \
   Cela déclenchera une transaction via votre portefeuille pour publier votre sous-graphe en tant que NFT sur le réseau Arbitrum One.
   {% endcolumn %}

{% column %}
**Goldsky**

1. Allez sur [Goldsky](https://app.goldsky.com/), créez une clé API dans "Project Settings", et connectez-vous via la CLI.
2. Installez la `commande goldsky` : \
   `curl https://goldsky.com | sh` \
   Puis authentifiez-vous via la CLI :\
   `goldsky login`
3. Téléversez votre sous-graphe sur Goldsky :\
   `goldsky subgraph deploy / --path`

Les sous-graphes Goldsky sont actifs immédiatement après le déploiement. Aucune étape de publication supplémentaire n'est requise.
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
Il vous sera demandé un libellé de version. Vous pouvez entrer quelque chose comme `v0.0.1`, mais vous êtes libre de choisir le format. Une fois cela fait, vous verrez le sous-graphe commencer à se synchroniser sur la page Studio.
{% endhint %}

{% hint style="info" %}
Les smart contracts de The Graph sont tous sur [Arbitrum One](https://arbitrum.io/arbitrum-101), même si votre sous-graphe indexe des données de Chiliz Chain.
{% endhint %}

## 3. Interroger votre Sous-graphe

Félicitations ! Vous pouvez maintenant commencer à l'interroger en envoyant une requête GraphQL à l'URL de requête du sous-graphe qui se trouve dans le tableau de bord du service que vous avez choisi.

Exemple :

{% 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 %}

Maintenant, vous devez simplement remplir vos informations pour commencer à envoyer des requêtes GraphQL à ce point de terminaison.

## Annexes

### Requête d'exemple

Cette requête affiche toutes les transactions du PSG Fan Token.

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

// La requête GraphQL (Identique pour les deux fournisseurs)
const graphqlQuery = `{
  transfers {
    from
    to
    value
    transactionHash
  }
}`;

// Choisissez le bon format d'URL selon le fournisseur :
// 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,
  },
};

// Envoyer la requête GraphQL
axios(graphQLRequest)
  .then((response) => {
    // Traiter la réponse ici
    const data = response.data.data
    console.log(data)

  })
  .catch((error) => {
    // Gérer les éventuelles erreurs
    console.error(error);
  });
```

### Exemple de code

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

La soumission de ceci à l'URL de requête renvoie ce résultat :

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

## Ressources supplémentaires

Pour plus d'informations sur l'interrogation des données de votre sous-graphe avec GraphQL :

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