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