# typechain-target-react-query-wagmi

> 🔌 TypeChain target for React-Query + wagmi

Latest version **0.1.0** (published 2022-09-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install typechain-target-react-query-wagmi
pnpm add typechain-target-react-query-wagmi
yarn add typechain-target-react-query-wagmi
bun add typechain-target-react-query-wagmi
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-09-05 |
| First published | 2022-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 64.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | brightiron |
| Keywords | ethers, ethersjs, ethereum, TypeChain, TypeScript |

## Links

- npm: https://www.npmjs.com/package/typechain-target-react-query-wagmi
- Repository: https://github.com/olympusDAO/typechain-react-query-wagmi
- Homepage: https://github.com/olympusDAO/typechain-react-query-wagmi#readme
- Issues: https://github.com/olympusDAO/typechain-react-query-wagmi/issues
- npm.io page: https://npm.io/package/typechain-target-react-query-wagmi

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [ts-essentials](https://npm.io/package/ts-essentials.md) ^7.0.1

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-09-05

## README

# Typechain target react-query-wagmi

<p align="center">
  <img src="https://github.com/Neufund/TypeChain/blob/d82f3cc644a11e22ca8e42505c16f035e2f2555d/docs/images/typechain-logo.png?raw=true" width="300" alt="TypeChain"/>
  <p align="center">
  <img src="https://react-query-v3.tanstack.com/_next/static/images/logo-7a7896631260eebffcb031765854375b.svg" width="300"/>
  </p>
  <p align="center">
  <img src="https://user-images.githubusercontent.com/95196612/188202141-c0b5160c-f3c3-4c6b-90d7-c10c495e1133.svg" width="300" />
  </p>

  <h3 align="center">TypeChain target react-query-wagmi</h3>

  <p align="center">🔌 React Query + wagmi bindings for Ethers 5.x.x smartcontracts</p>
</p>

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](https://github.com/ethereum-ts/TypeChain)

## 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

```cli 
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:

```typescript
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:

```typescript
  import { OlympusStakingv2Queries } from "src/typechain/react-query-hooks";

  const contract = new OlympusStakingv2Queries(STAKING_ADDRESS, NetworkId.MAINNET);
  const { data: secondsToRebase } = contract.useSecondsToNextEpoch();
```

## IntelliSense
![](https://user-images.githubusercontent.com/95196612/188197821-5e298f9b-4b50-4c4a-8093-08170d57cb72.png)
![](https://user-images.githubusercontent.com/95196612/188198810-6d9799af-e66a-4133-a2e6-dbfe47268470.png)



## 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.

```typescript
const contract = new OlympusStakingv2Queries(STAKING_ADDRESS, NetworkId.MAINNET);
```

Interact with static methods
```typescript
const {data: secondsToRebase } = contract.useSecondsToNextEpoch();
```

Interact with non static methods / mutations

```typescript
const stake = contract.useStake();
stake.mutate({ _to: address, _amount: 10000000000 });
```

---
_Source: https://npm.io/package/typechain-target-react-query-wagmi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._