Rpc Hooks

IOTA dApp Kit ships with hooks for each of the RPC methods defined in the JSON RPC specification.

useIotaClientQuery

Load data from the IOTA RPC using the useIotaClientQuery hook. This hook is a wrapper around the useQuery 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 for more details on the full set of options available.

import { useIotaClientQuery } from '@iota/dapp-kit';

function MyComponent() {
    const { data, isPending, isError, error, refetch } = useIotaClientQuery(
        '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>;
}

useIotaClientQueries

You can fetch a variable number of IOTA RPC queries using the useIotaClientQueries hook. This hook is a wrapper around the useQueries hook from @tanstack/react-query.

The queries value is an array of query option objects identical to the useIotaClientQuery 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 { useIotaClientQueries } from '@iota/dapp-kit';

function MyComponent() {
    const { data, isPending, isError } = useIotaClientQueries({
        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>;
}

useIotaClientInfiniteQuery

For RPC methods that support pagination, dApp Kit also implements a useIotaClientInfiniteQuery hook. For more details check out the useInfiniteQuery documentation.

import { useIotaClientInfiniteQuery } from '@iota/dapp-kit';

function MyComponent() {
    const { data, isPending, isError, error, isFetching, fetchNextPage, hasNextPage } =
        useIotaClientInfiniteQuery('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>;
}

useIotaClientMutation

For RPC methods that mutate state, dApp Kit implements a useIotaClientMutation hook. Use this hook with any RPC method to imperatively call the RPC method. For more details, check out the useMutation documentation.

import { useIotaClientMutation } from '@iota/dapp-kit';

function MyComponent() {
    const { mutate } = useIotaClientMutation('dryRunTransactionBlock');

    return (
        <Button
            onClick={() => {
                mutate({
                    transaction: tx,
                });
            }}
        >
            Dry run transaction
        </Button>
    );
}