Rpc Hooks

Sui dApp Kit ships with hooks for each of the RPC methods defined in the JSON RPC specification (opens in a new tab).

useSuiClientQuery

Load data from the Sui RPC using the useSuiClientQuery hook. This hook is a wrapper around the useQuery (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) 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 out the useInfiniteQuery documentation (opens in a new tab).

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 (opens in a new tab).

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>;
}

SuiClientProvider WalletProvider