Typechain target react-query-wagmi
TypeChain target react-query-wagmi
Create typesafe react-query queries, reduce boilerplate and bring consistent react-query hook implementations for contract methods to your dApp.
This package requires TypeScript >= 4.0. This package is also dependent on generating typescript bindings for the typechain ethers-v5 target.
TypeChain readme
React Query Hooks + Typings
The main files generated by this target are <contract-nameQueries>.ts
. They declare react-query hooks for your contracts
on top of wagmi's useProvider and useSigner hooks and use the typesafe factory classes generated by the typechain ethers-v5 target.
The results:
- typed react-query hooks, available as
contractQueries.useSomeContractMethod(...)
throughout your dApp.
Peer Dependencies
- React Query
- Wagmi
Important Note about Contract factories
This target DOES NOT generate factory classes for each contract, but it does depend on them and the factories directory being in the parent directory of this targets output.
You must run typechain against the ethers-v5 target in addition to this target.
Basic setup
yarn run typechain --target react-query-wagmi --out-dir /types/react-query-hooks src/abi/*.json
yarn run typechain --target ethers-v5 --out-dir /types
Why use this generator
This generator significantly reduces boilerplate, yields typesafe react-query results and brings a consistent react-query hook implementation for contract methods to your dApp.
It turns this:
import { useQuery } from "@tanstack/react-query";
import { BigNumber } from "ethers";
import { STAKING_ADDRESS } from "src/constants/addresses";
import { OlympusStakingv2__factory } from "src/typechain";
import { useProvider } from "wagmi";
export const useNextRebaseDate = (networkId: number) => {
const network = networkId ? { chainId: networkId } : undefined;
const provider = useProvider(network);
const contract = OlympusStakingv2__factory.connect(STAKING_ADDRESS, provider);
return useQuery<BigNumber, Error>(["useNextRebaseDate"], async () => {
return await contract.secondsToNextEpoch();
});
};
Into this:
import { OlympusStakingv2Queries } from "src/typechain/react-query-hooks";
const contract = new OlympusStakingv2Queries(STAKING_ADDRESS, NetworkId.MAINNET);
const { data: secondsToRebase } = contract.useSecondsToNextEpoch();
IntelliSense
Basic example
Call the constructor method of your contract queries file with the address and an optional networkId. If networkId is not passed, it will default to current network.
const contract = new OlympusStakingv2Queries(STAKING_ADDRESS, NetworkId.MAINNET);
Interact with static methods
const {data: secondsToRebase } = contract.useSecondsToNextEpoch();
Interact with non static methods / mutations
const stake = contract.useStake();
stake.mutate({ _to: address, _amount: 10000000000 });