Skip to main content

Getting Started

Access powerful onchain data curated by the Zapper Protocol with a GraphQL API.

Quickstart

1) Get an API key

2) Start building

Below are examples for working with the Zapper API across different languages and frameworks. Each example shows how to fetch portfolio data for provided addresses, across the chosen chains. Additionally, our API Sandbox lets you try our endpoints in one click.

If you are working with an AI agent, we also recommend providing our customized prompt to start building efficiently.

note

The API key must be base64 encoded for all requests.

Setup

  1. Create new React project: npm create vite@latest my-app -- --template react-ts
  2. Install dependencies: npm install @apollo/client graphql
  3. Replace src/App.tsx with code below
  4. Replace YOUR_API_KEY with your actual key
  5. Run: npm start

New to React? Get started with Create React App or Next.js.

import { ApolloClient, InMemoryCache, createHttpLink, gql, useQuery, ApolloProvider } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

// Types for the GraphQL response
interface BaseToken {
name: string;
symbol: string;
}

interface Token {
balance: string;
balanceUSD: number;
baseToken: BaseToken;
}

interface TokenBalance {
address: string;
network: string;
token: Token;
}

interface PortfolioData {
portfolio: {
tokenBalances: TokenBalance[];
};
}

// Set up Apollo Client
const httpLink = createHttpLink({
uri: 'https://public.zapper.xyz/graphql',
});

const API_KEY = 'YOUR_API_KEY';
const encodedKey = btoa(API_KEY);

const authLink = setContext((_, { headers }) => {
return {
headers: {
...headers,
authorization: `Basic ${encodedKey}`,
},
};
});

const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});

const PortfolioQuery = gql`
query providerPorfolioQuery($addresses: [Address!]!, $networks: [Network!]!) {
portfolio(addresses: $addresses, networks: $networks) {
tokenBalances {
address
network
token {
balance
balanceUSD
baseToken {
name
symbol
}
}
}
}
}
`;

function Portfolio() {
const { loading, error, data } = useQuery<PortfolioData>(PortfolioQuery, {
variables: {
addresses: ['0x3d280fde2ddb59323c891cf30995e1862510342f'],
networks: ['ETHEREUM_MAINNET'],
},
});

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
if (!data) return <div>No data found</div>;

return (
<div className="p-4">
{data.portfolio.tokenBalances.map((balance, index) => (
<div key={`${balance.address}-${index}`} className="mb-4 p-4 border rounded">
<p>Token: {balance.token.baseToken.name}</p>
<p>Symbol: {balance.token.baseToken.symbol}</p>
<p>Balance: {balance.token.balance}</p>
<p>Value (USD): ${balance.token.balanceUSD.toFixed(2)}</p>
<p>Network: {balance.network}</p>
</div>
))}
</div>
);
}

function App() {
return (
<ApolloProvider client={client}>
<Portfolio />
</ApolloProvider>
);
}

export default App;

3) Buy Credits

Zapper API uses a credit system to manage how many queries an API key can perform. Each query made costs a certain amount of credits which can be found by visiting Pricing.

Track API usage and purchase additional credits via the API Dashboard.

info

If you are a client of the legacy REST API, you have access to the new GraphQL endpoints with your existing API key, after signing in to the new Dashboard with the email associated with your existing account. Please contact us at [email protected] to get your purchased points migrated to the new GraphQL API.