Mysten Labs TypeScript SDK Docs

Sui dApp Kit ships with hooks for each of the RPC methods defined in the JSON RPC specification.

useSuiClientQuery

Load data from the Sui RPC using the useSuiClientQuery hook. This hook is a wrapper around the useQuery hook from @tanstack/react-query.

The hook takes the RPC method name as the first argument and any parameters as the second argument. You can pass any additional useQuery options as the third argument. You can read the useQuery documentation for more details on the full set of options available.

import { useSuiClientQuery } from '@mysten/dapp-kit';
 
function MyComponent() {
	const { data, isPending, isError, error, refetch } = useSuiClientQuery(
		'getOwnedObjects',
		{ owner: '0x123' },
		{
			gcTime: 10000,
		},
	);
 
	if (isPending) {
		return <div>Loading...</div>;
	}
 
	if (isError) {
		return <div>Error: {error.message}</div>;
	}
 
	return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

useSuiClientQueries

You can fetch a variable number of Sui RPC queries using the useSuiClientQueries hook. This hook is a wrapper around the useQueries hook from @tanstack/react-query.

The queries value is an array of query option objects identical to the useSuiClientQuery hook.

The combine parameter is optional. Use this parameter to combine the results of the queries into a single value. The result is structurally shared to be as referentially stable as possible.

import { useSuiClientQueries } from '@mysten/dapp-kit';
 
function MyComponent() {
	const { data, isPending, isError } = useSuiClientQueries({
		queries: [
			{
				method: 'getAllBalances',
				params: {
					owner: '0x123',
				},
			},
			{
				method: 'queryTransactionBlocks',
				params: {
					filter: {
						FromAddress: '0x123',
					},
				},
			},
		],
		combine: (result) => {
			return {
				data: result.map((res) => res.data),
				isSuccess: result.every((res) => res.isSuccess),
				isPending: result.some((res) => res.isPending),
				isError: result.some((res) => res.isError),
			};
		},
	});
 
	if (isPending) {
		return <div>Loading...</div>;
	}
 
	if (isError) {
		return <div>Fetching Error</div>;
	}
 
	return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

useSuiClientInfiniteQuery

For RPC methods that support pagination, dApp Kit also implements a useSuiClientInfiniteQuery hook. For more details check out the useInfiniteQuery documentation.

import { useSuiClientInfiniteQuery } from '@mysten/dapp-kit';
 
function MyComponent() {
	const { data, isPending, isError, error, isFetching, fetchNextPage, hasNextPage } =
		useSuiClientInfiniteQuery('getOwnedObjects', {
			owner: '0x123',
		});
 
	if (isPending) {
		return <div>Loading...</div>;
	}
 
	if (isError) {
		return <div>Error: {error.message}</div>;
	}
 
	return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

useSuiClientMutation

For RPC methods that mutate state, dApp Kit implements a useSuiClientMutation hook. Use this hook with any RPC method to imperatively call the RPC method. For more details, check out the useMutation documentation.

import { useSuiClientMutation } from '@mysten/dapp-kit';
 
function MyComponent() {
	const { mutate } = useSuiClientMutation('dryRunTransactionBlock');
 
	return (
		<Button
			onClick={() => {
				mutate({
					transactionBlock: tx,
				});
			}}
		>
			Dry run transaction
		</Button>
	);
}

useResolveSuiNSName

To get the SuiNS name for a given address, use the useResolveSuiNSName hook.

import { useResolveSuiNSName } from '@mysten/dapp-kit';
 
function MyComponent() {
	const { data, isPending } = useResolveSuiNSName('0x123');
 
	if (isPending) {
		return <div>Loading...</div>;
	}
 
	if (data) {
		return <div>Domain name is: {data}</div>;
	}
 
	return <div>Domain name not found</div>;
}

Rpc Hooks

useSuiClientQuery

useSuiClientQueries

useSuiClientInfiniteQuery

useSuiClientMutation

useResolveSuiNSName

On this page