Exemplos

TypeScript / JavaScript

Integre a API brapi.dev em suas aplicações TypeScript e JavaScript usando nossa SDK oficial ou fetch/Axios.

🎉 SDK Oficial Disponível!

A brapi.dev agora oferece uma SDK oficial TypeScript/JavaScript que facilita muito a integração:

npm install brapi

Vantagens da SDK:

  • ✅ Tipos TypeScript completos com IntelliSense
  • ✅ Tratamento de erros automático
  • ✅ Retry inteligente em falhas
  • ✅ Suporte a Node.js e navegador

Exemplo rápido:

import Brapi from 'brapi';

const client = new Brapi({
  apiKey: process.env.BRAPI_API_KEY,
});

const quote = await client.quote.retrieve('PETR4');
console.log(quote.results[0].regularMarketPrice);

📚 Ver documentação completa da SDK


Integração Manual (Sem SDK)

Se preferir fazer requisições HTTP diretamente, veja os exemplos abaixo.

Usando Fetch (Nativo)

O fetch é nativo em navegadores modernos e Node.js 18+, sem necessidade de bibliotecas externas.

Exemplo Básico

const fetchQuote = async () => {
  const token = 'SEU_TOKEN';
  const ticker = 'PETR4';
  
  const response = await fetch(
    `https://brapi.dev/api/quote/${ticker}?token=${token}`
  );
  
  const data = await response.json();
  console.log(data);
};

fetchQuote();

Com Tratamento de Erros

interface QuoteResult {
  results: Array<{
    symbol: string;
    shortName: string;
    regularMarketPrice: number;
    regularMarketChange: number;
    regularMarketChangePercent: number;
    currency: string;
  }>;
}

const fetchQuote = async (ticker: string): Promise<QuoteResult | null> => {
  const token = process.env.BRAPI_TOKEN || 'SEU_TOKEN';
  
  try {
    const response = await fetch(
      `https://brapi.dev/api/quote/${ticker}?token=${token}`
    );
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data: QuoteResult = await response.json();
    return data;
  } catch (error) {
    console.error('Erro ao buscar cotação:', error);
    return null;
  }
};

// Uso
fetchQuote('PETR4').then(data => {
  if (data && data.results[0]) {
    const quote = data.results[0];
    console.log(`${quote.symbol}: R$ ${quote.regularMarketPrice}`);
  }
});

Múltiplos Tickers

const fetchMultipleQuotes = async (tickers: string[]) => {
  const token = 'SEU_TOKEN';
  const tickersParam = tickers.join(',');
  
  const response = await fetch(
    `https://brapi.dev/api/quote/${tickersParam}?token=${token}`
  );
  
  const data = await response.json();
  return data.results;
};

// Uso
fetchMultipleQuotes(['PETR4', 'VALE3', 'ITUB4']).then(quotes => {
  quotes.forEach(quote => {
    console.log(`${quote.symbol}: R$ ${quote.regularMarketPrice}`);
  });
});

Usando Axios

Axios é uma biblioteca popular para fazer requisições HTTP, com sintaxe mais simples e recursos adicionais.

Instalação

npm install axios
# ou
yarn add axios
# ou
bun add axios

Exemplo Básico

import axios from 'axios';

const token = 'SEU_TOKEN';
const ticker = 'PETR4';
const url = `https://brapi.dev/api/quote/${ticker}?token=${token}`;

async function fetchQuote() {
  try {
    const response = await axios.get(url);
    console.log(response.data);
  } catch (error) {
    console.error('Erro ao buscar cotação:', error);
  }
}

fetchQuote();

Com TypeScript e Interface

import axios, { AxiosError } from 'axios';

interface BrapiQuoteResponse {
  results: Array<{
    symbol: string;
    shortName: string;
    longName: string;
    currency: string;
    regularMarketPrice: number;
    regularMarketDayHigh: number;
    regularMarketDayLow: number;
    regularMarketVolume: number;
    regularMarketChange: number;
    regularMarketChangePercent: number;
    regularMarketTime: string;
    marketCap: number;
    fiftyTwoWeekLow: number;
    fiftyTwoWeekHigh: number;
  }>;
  requestedAt: string;
  took: string;
}

class BrapiClient {
  private baseUrl = 'https://brapi.dev/api';
  private token: string;

  constructor(token: string) {
    this.token = token;
  }

  async getQuote(ticker: string): Promise<BrapiQuoteResponse> {
    try {
      const response = await axios.get<BrapiQuoteResponse>(
        `${this.baseUrl}/quote/${ticker}`,
        {
          params: { token: this.token }
        }
      );
      return response.data;
    } catch (error) {
      if (axios.isAxiosError(error)) {
        const axiosError = error as AxiosError;
        throw new Error(
          `Erro na API: ${axiosError.response?.status} - ${axiosError.message}`
        );
      }
      throw error;
    }
  }

  async getMultipleQuotes(tickers: string[]): Promise<BrapiQuoteResponse> {
    const tickersParam = tickers.join(',');
    return this.getQuote(tickersParam);
  }
}

// Uso
const client = new BrapiClient(process.env.BRAPI_TOKEN!);

client.getQuote('PETR4').then(data => {
  const quote = data.results[0];
  console.log(`${quote.symbol}: R$ ${quote.regularMarketPrice}`);
  console.log(`Variação: ${quote.regularMarketChangePercent.toFixed(2)}%`);
});

Exemplo Next.js (App Router)

Server Component

// app/stock/[ticker]/page.tsx
import { Suspense } from 'react';

interface QuoteData {
  results: Array<{
    symbol: string;
    shortName: string;
    regularMarketPrice: number;
    regularMarketChangePercent: number;
  }>;
}

async function getQuote(ticker: string): Promise<QuoteData> {
  const token = process.env.BRAPI_TOKEN;
  const res = await fetch(
    `https://brapi.dev/api/quote/${ticker}?token=${token}`,
    { next: { revalidate: 60 } } // Cache por 60 segundos
  );
  
  if (!res.ok) {
    throw new Error('Failed to fetch quote');
  }
  
  return res.json();
}

export default async function StockPage({
  params,
}: {
  params: { ticker: string };
}) {
  const data = await getQuote(params.ticker);
  const quote = data.results[0];
  
  return (
    <div>
      <h1>{quote.shortName}</h1>
      <p className="text-2xl font-bold">
        R$ {quote.regularMarketPrice.toFixed(2)}
      </p>
      <p className={quote.regularMarketChangePercent > 0 ? 'text-green-600' : 'text-red-600'}>
        {quote.regularMarketChangePercent.toFixed(2)}%
      </p>
    </div>
  );
}

Client Component com SWR

'use client';

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(r => r.json());

export function StockQuote({ ticker }: { ticker: string }) {
  const { data, error, isLoading } = useSWR(
    `/api/quote/${ticker}`,
    fetcher,
    { refreshInterval: 60000 } // Atualiza a cada 60 segundos
  );
  
  if (error) return <div>Erro ao carregar cotação</div>;
  if (isLoading) return <div>Carregando...</div>;
  
  const quote = data.results[0];
  
  return (
    <div>
      <h2>{quote.symbol}</h2>
      <p>R$ {quote.regularMarketPrice.toFixed(2)}</p>
    </div>
  );
}

API Route

// app/api/quote/[ticker]/route.ts
import { NextResponse } from 'next/server';

export async function GET(
  request: Request,
  { params }: { params: { ticker: string } }
) {
  const token = process.env.BRAPI_TOKEN;
  
  try {
    const response = await fetch(
      `https://brapi.dev/api/quote/${params.ticker}?token=${token}`
    );
    
    if (!response.ok) {
      return NextResponse.json(
        { error: 'Failed to fetch quote' },
        { status: response.status }
      );
    }
    
    const data = await response.json();
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  }
}

Node.js com Cache

import axios from 'axios';

class BrapiService {
  private cache = new Map<string, { data: any; timestamp: number }>();
  private cacheDuration = 60000; // 60 segundos
  
  constructor(private token: string) {}
  
  async getQuote(ticker: string) {
    const cached = this.cache.get(ticker);
    const now = Date.now();
    
    if (cached && now - cached.timestamp < this.cacheDuration) {
      return cached.data;
    }
    
    const response = await axios.get(
      `https://brapi.dev/api/quote/${ticker}?token=${this.token}`
    );
    
    this.cache.set(ticker, {
      data: response.data,
      timestamp: now
    });
    
    return response.data;
  }
}

// Uso
const service = new BrapiService(process.env.BRAPI_TOKEN!);
const data = await service.getQuote('PETR4');

Boas Práticas

  1. Armazene o token em variáveis de ambiente: Nunca exponha o token no código
  2. Implemente cache: Evite requisições desnecessárias
  3. Trate erros adequadamente: Sempre use try/catch ou .catch()
  4. Use tipos TypeScript: Aproveite a tipagem para melhor DX
  5. Respeite os limites: Monitore o uso de requisições

Próximos Passos