TIUS APIへようこそ

TIUS APIを使うと簡単にNFTを使ったサイトをオープンできます。

はじめに

試しにシンプルなAPIを呼び出すアプリケーションを作ってみましょう。

環境

• Node.js version 16かそれ以上

新しいプロジェクトを作成する

mkdir graphql-api-client
cd graphql-api-client
yarn init -y
yarn add -D typescript ts-node @graphql-codegen/typescript-operations @graphql-codegen/cli @graphql-codegen/typescript-urql @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript @graphql-codegen/typescript-resolvers
yarn add @urql/core graphql cross-fetch dotenv
mkdir -p src/graphql
touch codegen.yml src/schema.graphql

型ファイルの自動生成

graphqlのschemaからtypescriptの型を自動生成するための設定をします。

codegen.yml に以下のコードを貼り付けます。

codegen.yml

overwrite: true
schema: "./src/schema.graphql"
documents: 'src/graphql/**.graphql'
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-resolvers"
      - "typescript-operations"
      - "typescript-urql"
    config:
      withHooks: false
  ./graphql.schema.json:
    plugins:
      - "introspection"

src/schema.graphql に以下のコードを貼り付けます。

src/schema.graphql

# ------------------------------------------------------
# THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
# ------------------------------------------------------

type ERC20 {
  id: ID!
  address: String!
  name: String!
  decimals: Int!
  chain: BlockChain!
  chainId: Int!
}

type BlockChainCount {
  erc20s: Int!
}

type BlockChain {
  id: ID!
  name: String!
  symbol: String!
  erc20s: [ERC20!]
  _count: BlockChainCount!
}

type ERC721Token {
  id: BigInt!
  tokenId: String!
  tokenUri: String!
  metadata: String!
  ownerAddress: String!
  erc721: ERC721!
  erc721Id: Int!
}

scalar BigInt

type ERC721Count {
  tokens: Int!
}

type ERC721 {
  id: ID!
  address: String!
  name: String!
  chain: BlockChain!
  chainId: Int!
  tokens: [ERC721Token!]!
  lastBlockNumber: Int!
  _count: ERC721Count!
}

type ERC1155Count {
  tokens: Int!
}

type ERC1155 {
  id: ID!
  address: String!
  name: String!
  chain: BlockChain!
  chainId: Int!
  tokens: [ERC1155Token!]!
  lastBlockNumber: Int!
  _count: ERC1155Count!
}

type ERC1155Token {
  id: BigInt!
  tokenId: String!
  tokenUri: String!
  metadata: String!
  ownerAddress: String!
  balance: String!
  erc1155: ERC1155!
  erc1155Id: Int!
}

type Query {
  erc1155SpecifiedTokens(contractAddress: String!, tokenIds: [String!]!, skip: Int, take: Int): [ERC1155Token!]!
  erc1155AllToken(contractAddress: String!, skip: Int, take: Int): [ERC1155Token!]!
  blockchains: [BlockChain!]!
  blockchain(id: Int!): BlockChain
  erc721(id: Int!): ERC721!
  erc721s(skip: Int, take: Int): [ERC721!]!
  erc721sByOwner(ownerAddress: String!, skip: Int, take: Int): [ERC721!]!
  erc721ByContractAddress(contractAddress: String!): ERC721!
  erc1155(id: Int!): ERC1155!
  erc1155s(skip: Int, take: Int): [ERC1155!]!
  erc1155sByOwner(ownerAddress: String!, skip: Int, take: Int): [ERC1155!]!
  erc1155ByContractAddress(contractAddress: String!): ERC1155!
  erc721SpecifiedTokens(contractAddress: String!, tokenIds: [String!]!, skip: Int, take: Int): [ERC721Token!]!
  erc721AllToken(contractAddress: String!, skip: Int, take: Int): [ERC721Token!]!
}

type Mutation {
  createErc721(contractAddress: String!, chainId: Int!): ERC721!
  updateEventErc721(id: Int!): String!
  updateMetadataErc721(id: Int!): String!
  createErc1155(contractAddress: String!, chainId: Int!): ERC1155!
  updateEventErc1155(id: Int!): String!
  updateMetadataErc1155(id: Int!): String!
}

src/graphql/query.graphql に 取得したい情報のクエリを書きます。 今回は例としてERC721とERC1155のクエリを載せています。他の情報を取得したい場合、schemaを見て自分で追記しましょう。

src/graphql/query.graphql

query erc721s($take: Int, $skip: Int) {
    erc721s(take: $take, skip: $skip) {
        id
        chainId
        address
        name
        lastBlockNumber
        tokens {
            tokenId
            ownerAddress
            metadata
            tokenUri
        }
    }
}

query erc1155s($take: Int, $skip: Int) {
    erc1155s(take: $take, skip: $skip) {
        id
        chainId
        address
        name
        lastBlockNumber
        tokens {
            tokenId
            ownerAddress
            metadata
            tokenUri
        }
    }
}

package.json に generate コマンドを追加します。

package.json

{
...
  "scripts": {
    ...
    "generate": "graphql-codegen --config codegen.yml"
    ...
  }
}

tsファイルを生成してみましょう。

yarn generate

src/generated/graphql.ts が生成されていたら成功です！