SUI GraphQL 使用指北！

前言

SUI 推出了基于 GraphQL(下称gql) 的查询技术，试图取代传统的 FullNode-RPC, 以给 DAPP 带来更好的数据流体验：使用传统 RPC 查询链上数据需要发送多个请求才可以获取到相应的数据，gqp 可以一次性获取到 DAPP 所需的所有数据，而且可以根据需要自定义数据出现的字段，优化了开发者的查询体验，同时大幅减少节点的网络开销。

具体的说明 SUI 官方文档中已经给到，但是没有详细的使用例子，这里我们以官方的 ts-sdk 为例子，在享有 ts 自动补全的情况下，做一个简略的使用说明。

本文着重讲解使用 ts-sdk 查询的流程，如果你还不了解 gql，关于 gql 查询的写法，可以看这些参考的资料

【推荐】视频讲解半小时上手 gql：www.bilibili.com/video/BV1hJ...
GraphQL 官方文档：graphql.org/learn/
官方的上手文档： docs.sui.io/guides/deve...
API Reference：docs.sui.io/references/...
【推荐】主网的在线编辑器：sui-mainnet.mystenlabs.com/graphql
测试网的在线编辑器：sui-testnet.mystenlabs.com/graphql
【推荐】官方的查询例子：github.com/MystenLabs/...

GQL 服务器

在官方文档中并没有给出公共的 GQL 服务器链接，其实就是鼓励我们自己跑一个全节点做查询端口，但是其实上面的在线编辑器也是可以公共使用的，但是如果你是自己做项目，推荐自己跑一个节点，延迟更低性能更好，可以突破公共服务器的限制。

主网：sui-mainnet.mystenlabs.com/
测试网：sui-testnet.mystenlabs.com/

使用 ts-sdk 查询

其实在 ts 中编写 gql 是可以享有代码补全的，包括 gql 查询文档，以及返回的数据类型，我们首先讲解在没有自动补全下的用法，这个方式最简单，但是可能需要你对返回的数据做一下解析，或者自己手动去定义一下返回数据的 interface

首先确保你已经安装了 ts-sdk

bash 复制代码

pnpm add @mysten/sui.js

随后我们在 query 中直接传入查询的模板字符串即可

typescript 复制代码

import { SuiGraphQLClient } from "@mysten/sui.js/graphql";
const client = new SuiGraphQLClient({
    url: "https://sui-mainnet.mystenlabs.com/",
})

async function queryBalances(addr: string) {
    return (await client.query({
        query: `
            query($addr: SuiAddress!){
                address(address: $addr){
                balance(type: "0x2::sui::SUI"){
                    coinType{
                    repr
                    }
                    coinObjectCount,
                    totalBalance
                }
                },
            }
        `,
        variables: {
            addr
        }
    })).data
}

这个就是最简单的使用方法，但是你会发现编写模板时没有补全提示，返回的数据也没有补全提示

所以接下来我们讲解如何让 ts 的补全功能可以生效

完美使用方法

首先我们扒开这个 ts-sdk 的源码，发现他用了三个库

但是经过我的研究，我们在这里只需要用到 gql.tada 就可以享受 ts 自动补全的功能

首先安装 gql.tada，还有一个用于给 gql 做补全的 ts 插件 @0no-co/graphqlsp

bash 复制代码

pnpm add gql.tada
pnpm add -D @0no-co/graphqlsp

然后需要到我们的 tsconfig.json 中对 plugins 字段做配置

json 复制代码

{
    ...,
    "compilerOptions": {
        ...,
        "plugins": [
            {
                "name": "@0no-co/graphqlsp",
                "schema": "./src/graphql/schema.graphql",
                "tadaOutputLocation": "./src/graphql/tada-env.d.ts",
                "trackFieldUsage": false,
                "shouldCheckForColocatedFragments": false
            }
        ]
    },
}

这一段配置来自于 ts-sdk 的源码，我们在这里需要注意两个地方，一个是 "schema"，还有 "tadaOutputLocation"。

schema 文件用于对我们的 gql 文档做补全，tadaOutputLocation 指定了 tada 导出的 ts 声明文件的存放路径，更多的内容可以去看 tada 的官方文档, 你也可以按照你的需要修改这里的路径

配置完成之后我们需要去 sui 的 repo 下载这个 schema 文件，地址在这里：

github.com/MystenLabs/...

我们需要下载其中 current_progress_schema.graphql 这个文件，然后命名为 schema.graphql 放到上面配置所指的目录中

接下来我们创建 graphql/index.ts 文件

现在你的目录结构应该看起来像这样

bash 复制代码

src/
    graphql/
        index.ts
        schema.graphql
        tada-env.d.ts  # 这个文件在你启动 vscode 之后会自动生成

按照 gql.tada 的文档，我们只需要在 index.ts 中做一点配置，就可以享受自动补全的快乐啦～

typescript 复制代码

// index.ts

import { initGraphQLTada } from 'gql.tada';
import type { introspection } from './graphql-env.d.ts';
export const graphql = initGraphQLTada<{
    introspection: introspection;
}>();

export type { FragmentOf, ResultOf, VariablesOf } from 'gql.tada';
export { readFragment } from 'gql.tada';

然后我们将一开始直接传入模板字符串的方法改成使用 graphql 来进行调用，就可以享受爽快的类型补全了！

gql 文档内的补全：

返回数据的补全：

至此，开启你的愉悦 SUI-GQL 之旅！