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, isLoading, error, refetch } = useSuiClientQuery(
		'getOwnedObjects',
		{ owner: '0x123' },
		{
			cacheTime: 10000,
		},
	);
 
	if (isLoading) {
		return <div>Loading...</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, isLoading, isFetching, fetchNextPage, hasNextPage } = useSuiClientInfiniteQuery(
		'getOwnedObjects',
		{
			owner: '0x123',
		},
	);
 
	if (isLoading) {
		return <div>Loading...</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>
	);
}

SuiClientProvider WalletProvider