React Hooks

The SDK provides React hooks built on TanStack Query for seamless data fetching with caching, background updates, and error handling.

Setup

Wrap your app with QueryClientProvider:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  );
}

DAO Hooks

useDAOs

Fetch all DAOs with pagination and ordering.

import { useDAOs } from 'daocafe-sdk';

function DAOList() {
  const { data, isLoading, error } = useDAOs({
    limit: 10,
    orderBy: 'proposalCount',
    orderDirection: 'desc'
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data?.items.map(dao => (
        <li key={dao.id}>
          {dao.name} ({dao.proposalCount} proposals)
        </li>
      ))}
    </ul>
  );
}

Parameters

Parameter	Type	Description
`limit`	`number`	Max items to return
`after`	`string`	Cursor for forward pagination
`before`	`string`	Cursor for backward pagination
`orderBy`	`'createdAt' \| 'proposalCount' \| 'name'`	Sort field
`orderDirection`	`'asc' \| 'desc'`	Sort direction

Response Schema

{
  items: DAO[];
  pageInfo: {
    hasNextPage: boolean;
    hasPreviousPage: boolean;
    startCursor: string | null;
    endCursor: string | null;
  }
}

useDAO

Fetch a single DAO by ID.

import { useDAO } from 'daocafe-sdk';

function DAODetail({ daoId }: { daoId: string }) {
  const { data: dao, isLoading } = useDAO(daoId);

  if (isLoading) return <div>Loading...</div>;
  if (!dao) return <div>DAO not found</div>;

  return (
    <div>
      <h1>{dao.name}</h1>
      <p>Token: {dao.tokenSymbol}</p>
      <p>Proposals: {dao.proposalCount}</p>
      <p>Voting Period: {dao.votingPeriod} seconds</p>
    </div>
  );
}

Response Schema

DAO | null

See Types Reference for full DAO type.

useDAOsByManager

Fetch DAOs managed by a specific address.

import { useDAOsByManager } from 'daocafe-sdk';

function ManagedDAOs({ manager }: { manager: string }) {
  const { data } = useDAOsByManager({ manager, limit: 10 });

  return (
    <div>
      <h2>DAOs Managed by {manager.slice(0, 8)}...</h2>
      {data?.items.map(dao => (
        <div key={dao.id}>{dao.name}</div>
      ))}
    </div>
  );
}

Proposal Hooks

useProposals

Fetch proposals with optional filters.

import { useProposals } from 'daocafe-sdk';

function ProposalList() {
  const { data } = useProposals({
    limit: 20,
    state: 'ACTIVE',
    orderBy: 'voteEnd',
    orderDirection: 'asc'
  });

  return (
    <ul>
      {data?.items.map(proposal => (
        <li key={proposal.id}>
          {proposal.description.slice(0, 100)}...
          <span>State: {proposal.state}</span>
        </li>
      ))}
    </ul>
  );
}

Parameters

Parameter	Type	Description
`limit`	`number`	Max items to return
`daoId`	`string`	Filter by DAO ID
`state`	`ProposalState`	Filter by proposal state
`proposer`	`string`	Filter by proposer address
`orderBy`	`'createdAt' \| 'voteEnd' \| 'voteStart'`	Sort field
`orderDirection`	`'asc' \| 'desc'`	Sort direction

useProposal

Fetch a single proposal by ID.

import { useProposal } from 'daocafe-sdk';

function ProposalDetail({ proposalId }: { proposalId: string }) {
  const { data: proposal } = useProposal(proposalId);

  if (!proposal) return null;

  return (
    <div>
      <h2>{proposal.description}</h2>
      <div>
        <span>For: {proposal.forVotes}</span>
        <span>Against: {proposal.againstVotes}</span>
        <span>Abstain: {proposal.abstainVotes}</span>
      </div>
      <p>State: {proposal.state}</p>
    </div>
  );
}

useProposalsByDAO

Fetch proposals for a specific DAO.

import { useProposalsByDAO } from 'daocafe-sdk';

function DAOProposals({ daoId }: { daoId: string }) {
  const { data } = useProposalsByDAO(daoId, { limit: 10 });

  return (
    <ul>
      {data?.items.map(p => (
        <li key={p.id}>{p.description}</li>
      ))}
    </ul>
  );
}

useActiveProposals

Fetch all currently active proposals across all DAOs.

import { useActiveProposals } from 'daocafe-sdk';

function ActiveVotes() {
  const { data, isLoading } = useActiveProposals({ limit: 10 });

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h2>🗳️ Active Proposals ({data?.items.length})</h2>
      {data?.items.map(proposal => (
        <div key={proposal.id}>
          <p>{proposal.description}</p>
          <small>Ends: {new Date(Number(proposal.voteEnd) * 1000).toLocaleString()}</small>
        </div>
      ))}
    </div>
  );
}

Vote Hooks

useVotes

Fetch votes with optional filters.

import { useVotes } from 'daocafe-sdk';

function VoteList() {
  const { data } = useVotes({
    limit: 50,
    support: 'FOR',
    orderBy: 'weight',
    orderDirection: 'desc'
  });

  return (
    <ul>
      {data?.items.map(vote => (
        <li key={vote.id}>
          {vote.voter.slice(0, 8)}... voted {vote.support} with {vote.weight} votes
          {vote.reason && <p>Reason: {vote.reason}</p>}
        </li>
      ))}
    </ul>
  );
}

Parameters

Parameter	Type	Description
`proposalId`	`string`	Filter by proposal ID
`daoId`	`string`	Filter by DAO ID
`voter`	`string`	Filter by voter address
`support`	`'FOR' \| 'AGAINST' \| 'ABSTAIN'`	Filter by vote type
`orderBy`	`'createdAt' \| 'weight'`	Sort field

useVotesByProposal

Fetch all votes for a specific proposal.

import { useVotesByProposal } from 'daocafe-sdk';

function ProposalVotes({ proposalId }: { proposalId: string }) {
  const { data } = useVotesByProposal(proposalId);

  return (
    <div>
      <h3>Votes</h3>
      {data?.items.map(vote => (
        <div key={vote.id}>
          <span>{vote.voter}</span>
          <span>{vote.support}</span>
          <span>{vote.weight}</span>
        </div>
      ))}
    </div>
  );
}

useVotesByVoter

Fetch all votes cast by a specific address.

import { useVotesByVoter } from 'daocafe-sdk';

function VoterHistory({ voter }: { voter: string }) {
  const { data } = useVotesByVoter(voter, { limit: 20 });

  return (
    <div>
      <h3>Voting History for {voter.slice(0, 8)}...</h3>
      {data?.items.map(vote => (
        <div key={vote.id}>
          Proposal: {vote.proposalId} - {vote.support}
        </div>
      ))}
    </div>
  );
}

Delegate Hooks

useDelegates

Fetch delegation records with optional filters.

import { useDelegates } from 'daocafe-sdk';

function DelegateList() {
  const { data } = useDelegates({ limit: 50 });

  return (
    <ul>
      {data?.items.map(d => (
        <li key={d.id}>
          {d.delegator} → {d.toDelegate}
        </li>
      ))}
    </ul>
  );
}

useDelegatesByDAO

Fetch delegates for a specific DAO.

import { useDelegatesByDAO } from 'daocafe-sdk';

function DAODelegates({ daoId }: { daoId: string }) {
  const { data } = useDelegatesByDAO(daoId);

  return (
    <div>
      <h3>Delegations</h3>
      {data?.items.map(d => (
        <div key={d.id}>
          {d.delegator.slice(0, 8)}... delegates to {d.toDelegate.slice(0, 8)}...
        </div>
      ))}
    </div>
  );
}

useDelegationsFrom / useDelegationsTo

Fetch delegations from or to a specific address.

import { useDelegationsFrom, useDelegationsTo } from 'daocafe-sdk';

function DelegationInfo({ address }: { address: string }) {
  const { data: delegatedTo } = useDelegationsFrom(address);
  const { data: receivedFrom } = useDelegationsTo(address);

  return (
    <div>
      <p>Delegating to: {delegatedTo?.items.length} addresses</p>
      <p>Receiving from: {receivedFrom?.items.length} addresses</p>
    </div>
  );
}

Token Holder Hooks

useTokenHolders

Fetch token holders with optional filters.

import { useTokenHolders } from 'daocafe-sdk';

function TopHolders() {
  const { data } = useTokenHolders({
    limit: 10,
    orderBy: 'votes',
    orderDirection: 'desc'
  });

  return (
    <ol>
      {data?.items.map(h => (
        <li key={h.id}>
          {h.holder.slice(0, 8)}... - {h.votes} votes
        </li>
      ))}
    </ol>
  );
}

useTokenHoldersByDAO

Fetch token holders for a specific DAO.

import { useTokenHoldersByDAO } from 'daocafe-sdk';

function DAOHolders({ daoId }: { daoId: string }) {
  const { data } = useTokenHoldersByDAO(daoId, {
    orderBy: 'balance',
    orderDirection: 'desc',
    limit: 20
  });

  return (
    <div>
      <h3>Token Holders</h3>
      {data?.items.map(h => (
        <div key={h.id}>
          {h.holder}: {h.balance} tokens, {h.votes} votes
        </div>
      ))}
    </div>
  );
}

useTokenHoldingsByAddress

Fetch all token holdings for a specific address across all DAOs.

import { useTokenHoldingsByAddress } from 'daocafe-sdk';

function MyVotingPower({ address }: { address: string }) {
  const { data } = useTokenHoldingsByAddress(address);

  return (
    <div>
      <h3>Your Voting Power</h3>
      {data?.items.map(h => (
        <div key={h.id}>
          <p>DAO: {h.daoId}</p>
          <p>Balance: {h.balance}</p>
          <p>Votes: {h.votes}</p>
        </div>
      ))}
    </div>
  );
}

Query Keys

Each hook exports query keys for cache invalidation with TanStack Query:

import { useQueryClient } from '@tanstack/react-query';
import { daoKeys, proposalKeys, voteKeys, delegateKeys, tokenHolderKeys } from 'daocafe-sdk';

function RefreshButton({ daoId }: { daoId: string }) {
  const queryClient = useQueryClient();

  const refreshDAO = () => {
    // Invalidate all DAO queries
    queryClient.invalidateQueries({ queryKey: daoKeys.all });
  };

  const refreshProposals = () => {
    // Invalidate proposals for a specific DAO
    queryClient.invalidateQueries({ 
      queryKey: proposalKeys.byDAO(daoId) 
    });
  };

  return (
    <div>
      <button onClick={refreshDAO}>Refresh All DAOs</button>
      <button onClick={refreshProposals}>Refresh Proposals</button>
    </div>
  );
}

Available Query Keys

Export	Keys
`daoKeys`	`.all`, `.lists()`, `.list(params)`, `.byManager(params)`, `.details()`, `.detail(id)`
`proposalKeys`	`.all`, `.lists()`, `.list(params)`, `.byDAO(daoId)`, `.active(params)`, `.details()`, `.detail(id)`
`voteKeys`	`.all`, `.lists()`, `.list(params)`, `.byProposal(id)`, `.byVoter(voter)`, `.details()`, `.detail(id)`
`delegateKeys`	`.all`, `.lists()`, `.byDAO(daoId)`, `.delegationsFrom(addr)`, `.delegationsTo(addr)`, `.details()`, `.detail(id)`
`tokenHolderKeys`	`.all`, `.lists()`, `.byDAO(daoId)`, `.byAddress(addr)`, `.details()`, `.detail(id)`

​React Hooks

​Setup

​DAO Hooks

​useDAOs

​useDAO

​useDAOsByManager

​Proposal Hooks

​useProposals

​useProposal

​useProposalsByDAO

​useActiveProposals

​Vote Hooks

​useVotes

​useVotesByProposal

​useVotesByVoter

​Delegate Hooks

​useDelegates

​useDelegatesByDAO

​useDelegationsFrom / useDelegationsTo

​Token Holder Hooks

​useTokenHolders

​useTokenHoldersByDAO

​useTokenHoldingsByAddress

​Query Keys

​Available Query Keys

React Hooks

Setup

DAO Hooks

useDAOs

useDAO

useDAOsByManager

Proposal Hooks

useProposals

useProposal

useProposalsByDAO

useActiveProposals

Vote Hooks

useVotes

useVotesByProposal

useVotesByVoter

Delegate Hooks

useDelegates

useDelegatesByDAO

useDelegationsFrom / useDelegationsTo

Token Holder Hooks

useTokenHolders

useTokenHoldersByDAO

useTokenHoldingsByAddress

Query Keys

Available Query Keys