グラフのサブグラフからデータへのアクセス方法

このグラフでは、グラフ上に作成されたサブグラフやAPIからデータをアクセスする方法と、反応フックを使用して部分グラフの結果を結合する方法について概説します.

グラフは何ですか。

The Graphはネットワークを問い合わせるためのインデックスプロトコルです.その中心的な特徴の一つは、誰もがスマート契約データのAPIを構築するためにグラフを使用できることです.

ユースケース

MintGateは、創造者とコミュニティがゲートウェイビデオとウェブコンテンツをNFFTまたは社会的トークンを使ってセットアップするのを許すプラットホームです.Unlock Protocolは、誰でもメンバーシップ、時間ベースのNFFTをつくるのを許すオープンソース、ブロックチェーンベースのプロトコルです.
mintgateおよびロックを解除するプロトコルの統合は、クリエータとコミュニティがエンドファンに一定時間の間、コンテンツにアクセスするためにNFTを購入することを要求する.私たちのUIでは、ユーザーがゲートウェイのコンテンツをnftスマート契約を使用してロックを解除するプロトコルを作成設定を検出する必要があります.

開発

グラフ上のロック解除プロトコルの部分グラフの使用

我々は、すべての“ロック”またはプロトコルを使用して作成されたNFTコレクションの契約アドレスを取得するグラフ上のロック解除プロトコルのサブグラフを利用しました.あなたは、彼らのdocsでプロトコルのサブグラフ情報の錠を開けるすべてを見ることができます.

ステップワン

私たちは新しいJavaScriptファイルを作成し、constで242479142フックを反応させました.

import { useAsync } from 'react-use';

const useUnlock = () => {
    const unlock = useAsync(async () => {
    }
}

export { useUnlock };

ステップ2

サブグラフを解析し,フェッチコールの構造を概説した.
以下はグラフのロック解除プロトコルmainnetサブグラフへのリンクです.
部分グラフの注意

フェッチAPI URLは「クエリー(HTTP)」の下のAPIリンクです.

https://thegraph.com/legacy-explorer/subgraph/unlock-protocol/unlock

サブグラフはポストAPIです.

グラフの遊び場では、例のクエリボックスの下に

、リクエスト本文の例があります.

グラフの遊び場では、スキーマ内で

で、APIでインデックスを作成することができます.

ステップ3

サブグラフを解析したので、我々はフェッチコールを構築した.
私たちのために、我々はロックまたはNFT収集名を得たかったので、我々はこの要求体を使用しました:

query {
        locks {
          address
          name
        }
    }

以下のようになります.

const result = await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/unlock`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
      query {
        locks {
          address
          name
        }
    }`
      }),
    }),

ステップフォー

paramsを設定した後、APIの結果を返します.
私たちは、これをparstを含むconstの最後に加えました.

then((res) => res.json());
    return result; 

ラッピング

あなたは、constがフェッチコールを含んだことを返しました.

}, []);
  return [unlock];
}

そして、constは全体の反応フックのまわりでラップを輸出しました.

export { useUnlock };

私たちの最終的な結果は、このようなものに見えました.

import { useAsync } from 'react-use';

const useUnlockMainnet = () => {
  const unlockMainnet = useAsync(async () => {
    const result = await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/unlock`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
      query {
        locks {
          address
        }
    }
  }`
      }),
    }).then((res) => res.json());
    return result;
  }, []);
  return [unlockMainnet];
}

export { useUnlockMainnet };

ボーナスポイント：複数のサブグラフ結果を呼ぶ方法

さらに、ユーザーがEthereum mainnet以外の他のチェーンのロックを解除しているプロトコルロックまたはスマート契約を使用している内容をゲートにしたかどうかチェックする方法を必要としました.
私たちは とxDaiでサブグラフを利用する必要がありました.
約束の使用すべての応答を取得し、配列で返されます.最終結果はこちら

import { useAsync } from 'react-use';

const useUnlock = () => {
  const unlock = useAsync(async () => {
    const result = await Promise.all([await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/unlock`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
      query {
        locks {
          address
          name
        }
    }`
      }),
    }),
    await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/xdai
      `, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
        query {
          locks {
            address
            name
          }
      }`
      }),
    }),
    await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/polygon
      `, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
        query {
          locks {
            address
            name
          }
      }`
      }),
    })]);
    const data = await Promise.all(result.map(res => res.json()))
    return data;
  }, []);
  return [unlock];
}

export { useUnlock };

あなたはロックを解除するロックを作成し、トークンゲートのコンテンツをmintgateの今日を設定しようとすることができます!