dApp Kit
RPC Hooks

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

You can 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. Any additional useQuery options can be passed 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 numer 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.

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

combine is an optional parameter. You can use this to combine the results of the queries into a single value. The result will be 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 checkout 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. This hook can be used with any RPC method to imperatively call the RPC method. For more details checkout 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: txb,
				});
			}}
		>
			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>;
}
SuiClientProviderWalletProvider