TypeScript
Requirements
@wagmi/solid is designed to be as type-safe as possible! Things to keep in mind:
- Types currently require using TypeScript >=5.7.3.
- TypeScript doesn't follow semver and often introduces breaking changes in minor releases.
- Changes to types in this repository are considered non-breaking and are usually released as patch changes (otherwise every type enhancement would be a major version!).
- It is highly recommended that you lock your
@wagmi/solidandtypescriptversions to specific patch releases and upgrade with the expectation that types may be fixed or upgraded between any release. - The non-type-related public API of Wagmi still follows semver very strictly.
To ensure everything works correctly, make sure your tsconfig.json has strict mode set to true.
{
"compilerOptions": {
"strict": true
}
}Config Types
By default Solid Context does not work well with type inference. To support strong type-safety across the Solid Context boundary, there are two options available:
- Declaration merging to "register" your
configglobally with TypeScript. configproperty to pass yourconfigdirectly to primitives.
Declaration Merging
Declaration merging allows you to "register" your config globally with TypeScript. The Register type enables Wagmi to infer types in places that wouldn't normally have access to type info via Solid Context alone.
To set this up, add the following declaration to your project. Below, we co-locate the declaration merging and the config set up.
import { http, createConfig } from '@wagmi/solid'
import { mainnet, sepolia } from '@wagmi/solid/chains'
declare module '@wagmi/solid' {
interface Register {
config: typeof config
}
}
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})Since the Register type is global, you only need to add it once in your project. Once set up, you will get strong type-safety across your entire project. For example, query primitives will type chainId based on your config's chains.
import { } from '@wagmi/solid'
(() => ({ chainId: 123 }))Primitive config Property
For cases where you have more than one Wagmi config or don't want to use the declaration merging approach, you can pass a specific config directly to primitives via the config property.
import { http, createConfig } from '@wagmi/solid'
import { mainnet, optimism } from '@wagmi/solid/chains'
export const configA = createConfig({
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
})
export const configB = createConfig({
chains: [optimism],
transports: {
[optimism.id]: http(),
},
})As you expect, chainId is inferred correctly for each config.
import { } from '@wagmi/solid'
(() => ({ chainId: 123, config: configA }))(() => ({ chainId: 123, config: configB }))This approach is more explicit, but works well for advanced use-cases, if you don't want to use Solid Context or declaration merging, etc.
Reactive Parameters
In Solid, primitive parameters are passed as getter functions (accessors) to maintain reactivity. This is different from React where parameters are passed directly as objects.
// React style (NOT used in @wagmi/solid)
useBlockNumber({ chainId: 1 })
// Solid style (used in @wagmi/solid)
useBlockNumber(() => ({ chainId: 1 }))This allows Wagmi to react to changes in your parameters automatically when using Solid's reactive primitives like createSignal.
import { createSignal } from 'solid-js'
import { useBlockNumber } from '@wagmi/solid'
const [chainId, setChainId] = createSignal(1)
// Block number will automatically update when chainId changes
useBlockNumber(() => ({ chainId: chainId() }))Configure Internal Types
For advanced use-cases, you may want to configure Wagmi's internal types. Most of Wagmi's types relating to ABIs and EIP-712 Typed Data are powered by ABIType. See the ABIType docs for more info on how to configure types.