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)

Query hooks

The majority of the rpc methods are implemented using the useQuery (opens in a new tab) hook from @tanstack/react-query.

The hooks take the RPC calls parameters as the first argument, and optionally any useQuery options as the second argument. You can read the useQuery documentation (opens in a new tab) for more details on the full set of options available.

import { useOwnedObject } from '@mysten/dapp-kit';
 
function MyComponent() {
	const { data, isLoading, error, refetch } = useOwnedObjects(
		{ owner: '0x123' },
		{
			cacheTime: 10000,
		},
	);
 
	if (isLoading) {
		return <div>Loading...</div>;
	}
 
	return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Infinite Query hooks

For RPC methods that support pagination dApp Kit also implements a useInfiniteQuery hook. For more details checkout out the useInfiniteQuery documentation (opens in a new tab).

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

Mutation hooks

For RPC methods that mutate state dApp Kit implements a useMutation hook. For more details checkout the useMutation documentation (opens in a new tab).

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

SuiClientProvider WalletProvider