Spokes

Learn how to discover available spokes in Aave v4.

Spoke Data Structure

Spoke data provide information about individual borrowing modules, including:

Identification: id, name, address, chain
Configuration: active status and module settings

TypeScript
GraphQL
Solidity

The following TypeScript interfaces illustrate the core Spoke type:

interface Spoke {  __typename: "Spoke";  id: SpokeId;  name: string;  address: EvmAddress;  chain: Chain;}

Listing Available Spokes

Discover all available Aave Spokes across supported networks.

React
TypeScript
GraphQL
Solidity

Use the useSpokes hook to fetch a list of available spokes.

import { type SpokesRequest, useSpokes } from "@aave/react";
function SpokesList({ request }: { request: SpokesRequest }) {  const { data, loading, error } = useSpokes(request);
  if (loading) return <div>Loading…</div>;
  if (error) return <div>Error: {error.message}</div>;
  return (    <div>      {data.map((spoke) => (        <div key={spoke.id}>          <h3>{spoke.name}</h3>          <p>Chain: {spoke.chain.name}</p>        </div>      ))}    </div>  );}

See below for some examples of how to use the useSpokes hook.

import { chainId } from "@aave/react";
const { data, error, loading } = useSpokes({  query: {    chainIds: [chainId(1)],  },});

Fetching a Single Spoke

Fetch a specific spoke by its address and chain ID.

React
TypeScript
GraphQL

Use the useSpoke hook to fetch a specific spoke.

import { type SpokeRequest, useSpoke } from "@aave/react";
function SpokeDetails({ request }: { request: SpokeRequest }) {  const { data, loading, error } = useSpoke(request);
  if (loading) return <div>Loading…</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Spoke not found</div>;
  return (    <div>      <h3>{data.name}</h3>      <p>Chain: {data.chain.name}</p>    </div>  );}

See below for examples of how to use the useSpoke hook.

const { data, loading, error } = useSpoke({  query: {    spokeId, // 'SGVsbG8h' as SpokeId  },});