Cara Menggunakan Claude untuk API Request dan Networking (Data Fetching)

Membuat panggilan fetch secara manual, menangani token otentikasi, dan mengurai respons API untuk setiap integrasi baru adalah setara modern dengan menulis kode assembly untuk aplikasi web. Claude Code Skills untuk pengambilan data mengubah permintaan HTTP menjadi alat deklaratif dan dapat digunakan kembali yang memahami pola otentikasi, penomoran halaman, dan validasi respons, menghilangkan kode boilerplate sekaligus menegakkan konsistensi di seluruh basis kode Anda.

Mengapa Keterampilan Jaringan API Penting untuk Alur Kerja Pengembangan

Setiap pengembang menghabiskan waktu berjam-jam untuk pekerjaan API yang berulang: menyiapkan header untuk OAuth 2.0, mengimplementasikan exponential backoff untuk endpoint yang memiliki batasan laju, dan menulis penjaga tipe untuk respons JSON yang tidak terduga. Tugas-tugas ini rawan kesalahan dan sangat terikat pada layanan tertentu, membuatnya sulit untuk diuji dan dipelihara. Claude Code Skills mengabstraksi kompleksitas ini menjadi alat yang dapat di-versi dan diuji yang dapat dipanggil oleh asisten AI Anda dengan bahasa alami.

Pergeseran ini adalah dari panggilan API imperatif ke pengambilan data deklaratif. Alih-alih menulis fetch(url, { headers: {...} }), Anda menjelaskan niat: "Ambil data pengguna dari API GitHub menggunakan token dari ENV dan kembalikan hasil yang diketik." Skill ini menangani manajemen kredensial, logika coba ulang, dan penguraian respons, mengembalikan data dengan tipe kuat yang dapat langsung digunakan oleh aplikasi Anda.

💡

Ingin alat Pengujian API hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform All-in-One yang terintegrasi untuk Tim Pengembang Anda bekerja sama dengan produktivitas maksimal?

Apidog memenuhi semua permintaan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!

button

Menyiapkan Skill Pengambilan Data di Claude Code

Langkah 1: Instal Claude Code dan Konfigurasi MCP

Jika Anda belum menginstal Claude Code CLI:

npm install -g @anthropic-ai/claude-code
claude --version  # Seharusnya menunjukkan >= 2.0.70

Buat direktori dan file konfigurasi MCP:

# macOS/Linux
mkdir -p ~/.config/claude-code
touch ~/.config/claude-code/config.json

# Windows
mkdir %APPDATA%\claude-code
echo {} > %APPDATA%\claude-code\config.json

Langkah 2: Kloning dan Bangun Skill Pengambilan Data

Skill pengambilan data resmi menyediakan pola untuk permintaan REST, GraphQL, dan HTTP generik.

git clone https://github.com/anthropics/skills.git
cd skills/skills/data-fetching
npm install
npm run build

Ini mengkompilasi handler TypeScript ke dist/index.js.

Langkah 3: Konfigurasi MCP untuk Memuat Skill

Edit ~/.config/claude-code/config.json:

{
  "mcpServers": {
    "data-fetching": {
      "command": "node",
      "args": ["/absolute/path/to/skills/data-fetching/dist/index.js"],
      "env": {
        "DEFAULT_TIMEOUT": "30000",
        "MAX_RETRIES": "3",
        "RATE_LIMIT_PER_MINUTE": "60",
        "CREDENTIALS_STORE": "~/.claude-credentials.json"
      }
    }
  }
}

Penting:

Gunakan jalur absolut untuk args
Konfigurasi variabel lingkungan:
DEFAULT_TIMEOUT: Batas waktu permintaan dalam milidetik
MAX_RETRIES: Jumlah upaya coba ulang untuk kesalahan 5xx
RATE_LIMIT_PER_MINUTE: Ambang batas pembatasan
CREDENTIALS_STORE: Jalur ke file kredensial terenkripsi

Langkah 4: Siapkan Penyimpanan Kredensial

Buat file kredensial untuk menghindari pengkodean token secara langsung:

# Buat penyimpanan kredensial terenkripsi
mkdir -p ~/.claude
echo '{}' > ~/.claude/credentials.json
chmod 600 ~/.claude/credentials.json

Tambahkan token API Anda:

{
  "github": {
    "token": "ghp_token_github_anda_di_sini",
    "baseUrl": "https://api.github.com"
  },
  "slack": {
    "token": "xoxb_token_slack_anda",
    "baseUrl": "https://slack.com/api"
  },
  "custom-api": {
    "token": "Bearer token_jwt_anda",
    "baseUrl": "https://api.yourcompany.com",
    "headers": {
      "X-API-Version": "v2"
    }
  }
}

Skill ini membaca file ini saat startup dan menyuntikkan kredensial ke dalam permintaan.

Langkah 5: Verifikasi Instalasi

claude

Setelah dimuat, jalankan:

/list-tools

Anda akan melihat:

Alat yang tersedia:
- data-fetching:rest-get
- data-fetching:rest-post
- data-fetching:rest-put
- data-fetching:rest-delete
- data-fetching:graphql-query
- data-fetching:graphql-mutation
- data-fetching:raw-http

Pola Permintaan API Inti

1. Permintaan GET RESTful

Alat: data-fetching:rest-get
Kasus penggunaan: Mengambil data dari endpoint REST dengan otentikasi, penomoran halaman, dan caching

Parameter:

service: Kunci yang cocok dengan penyimpanan kredensial (github, slack, custom-api)
endpoint: Jalur API (misalnya, /users, /repos/owner/name)
params: Objek parameter kueri
cache: TTL dalam detik (opsional)
transform: Ekspresi JMESPath untuk transformasi respons

Contoh: Mengambil repositori pengguna GitHub

Gunakan rest-get untuk mengambil repositori untuk pengguna "anthropics" dari GitHub API, termasuk penomoran halaman untuk 100 item per halaman, dan kembalikan hanya nama, deskripsi, dan stargazers_count.

Eksekusi yang dihasilkan:

// Handler mengeksekusi:
const response = await fetch('https://api.github.com/users/anthropics/repos', {
  headers: {
    'Authorization': 'token ghp_token_github_anda_di_sini',
    'Accept': 'application/vnd.github.v3+json'
  },
  params: {
    per_page: 100,
    page: 1
  }
});

// Transformasi dengan JMESPath
const transformed = jmespath.search(response, '[*].{name: name, description: description, stars: stargazers_count}');
return transformed;

Penggunaan Claude Code:

claude --skill data-fetching \
  --tool rest-get \
  --params '{"service": "github", "endpoint": "/users/anthropics/repos", "params": {"per_page": 100}, "transform": "[*].{name: name, description: description, stars: stargazers_count}"}'

2. Permintaan POST/PUT/DELETE

Alat: data-fetching:rest-post / rest-put / rest-delete
Kasus penggunaan: Membuat, memperbarui, atau menghapus sumber daya

Parameter:

service: Kunci penyimpanan kredensial
endpoint: Jalur API
body: Payload permintaan (objek atau string JSON)
headers: Header tambahan
idempotencyKey: Untuk keamanan coba ulang

Contoh: Membuat masalah GitHub

Gunakan rest-post untuk membuat masalah di repositori anthorpics/claude dengan judul "Feature Request: MCP Tool Caching", isi yang berisi deskripsi, dan label ["enhancement", "mcp"].

Eksekusi:

await fetch('https://api.github.com/repos/anthropics/claude/issues', {
  method: 'POST',
  headers: {
    'Authorization': 'token ghp_...',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: "Feature Request: MCP Tool Caching",
    body: "Deskripsi fitur...",
    labels: ["enhancement", "mcp"]
  })
});

3. Kueri GraphQL

Alat: data-fetching:graphql-query
Kasus penggunaan: Pengambilan data kompleks dengan hubungan bersarang

Parameter:

service: Kunci penyimpanan kredensial
query: String kueri GraphQL
variables: Objek variabel kueri
operationName: Operasi bernama

Contoh: Mengambil masalah repositori dengan komentar

Gunakan graphql-query untuk mengambil 10 masalah terbuka terbaru dari repositori anthorpics/skills, termasuk judul, penulis, jumlah komentar, dan label.

query RecentIssues($owner: String!, $repo: String!, $limit: Int!) {
  repository(owner: $owner, name: $repo) {
    issues(first: $limit, states: [OPEN], orderBy: {field: CREATED_AT, direction: DESC}) {
      nodes {
        title
        author { login }
        comments { totalCount }
        labels(first: 5) { nodes { name } }
      }
    }
  }
}

Parameter:

{
  "service": "github",
  "query": "query RecentIssues($owner: String!, $repo: String!, $limit: Int!) { ... }",
  "variables": {
    "owner": "anthropics",
    "repo": "skills",
    "limit": 10
  }
}

4. Permintaan HTTP Mentah

Alat: data-fetching:raw-http
Kasus penggunaan: Kasus-kasus khusus yang tidak tercakup oleh alat REST/GraphQL

Parameter:

url: URL lengkap
method: Metode HTTP
headers: Objek header
body: Badan permintaan
timeout: Mengesampingkan batas waktu default

Contoh: Pengiriman webhook dengan header kustom

Gunakan raw-http untuk POST ke https://hooks.slack.com/services/YOUR/WEBHOOK/URL dengan payload JSON berisi {text: "Deployment complete"}, dan header kustom X-Event: deployment-success.

Skenario Jaringan Tingkat Lanjut

Penanganan Penomoran Halaman

Skill secara otomatis mendeteksi pola penomoran halaman:

// Penguraian header Link GitHub
const linkHeader = response.headers.get('Link');
if (linkHeader) {
  const nextUrl = parseLinkHeader(linkHeader).next;
  if (nextUrl && currentPage < maxPages) {
    return { 
      data: currentData, 
      nextPage: currentPage + 1,
      hasMore: true 
    };
  }
}

Minta semua halaman:

Gunakan rest-get untuk mengambil semua repositori untuk pengguna "anthropics", menangani penomoran halaman secara otomatis hingga tidak ada halaman lagi.

Skill mengembalikan array datar dari semua hasil.

Pembatasan Laju dan Logika Coba Ulang

Konfigurasi perilaku coba ulang per permintaan:

{
  "service": "github",
  "endpoint": "/rate_limit",
  "maxRetries": 5,
  "retryDelay": "exponential",
  "retryOn": [429, 500, 502, 503, 504]
}

Skill ini mengimplementasikan exponential backoff dengan jitter:

const delay = Math.min(
  (2 ** attempt) * 1000 + Math.random() * 1000,
  30000
);
await new Promise(resolve => setTimeout(resolve, delay));

Manajemen Permintaan Konkuren

Batch beberapa panggilan API secara efisien:

Gunakan rest-get untuk mengambil detail repositori: ["claude", "skills", "anthropic-sdk"], mengeksekusi permintaan secara bersamaan dengan maksimum 3 koneksi paralel.

Skill ini menggunakan p-limit untuk membatasi konkurensi:

import pLimit from 'p-limit';
const limit = pLimit(3); // Maks 3 konkuren

const results = await Promise.all(
  repos.map(repo => 
    limit(() => fetchRepoDetails(repo))
  )
);

Intercept dan Mocking Permintaan

Untuk pengujian, intercept permintaan tanpa mengenai API sebenarnya:

// Dalam konfigurasi skill
"env": {
  "MOCK_MODE": "true",
  "MOCK_FIXTURES_DIR": "./test/fixtures"
}

Sekarang permintaan mengembalikan data palsu dari file JSON:

// test/fixtures/github/repos/anthropics.json
[
  {"name": "claude", "description": "AI assistant", "stars": 5000}
]

Aplikasi Praktis: Membangun Dasbor GitHub

Langkah 1: Mengambil Data Repositori

Gunakan rest-get untuk mengambil semua repositori dari GitHub untuk organisasi "anthropics", termasuk deskripsi lengkap, jumlah bintang, jumlah fork, dan jumlah masalah terbuka. Cache hasil selama 5 menit.

Langkah 2: Memperkaya dengan Data Kontributor

Untuk setiap repositori, ambil kontributor teratas:

Gunakan rest-get untuk mengambil statistik kontributor untuk repositori "anthropics/claude", batasi hingga 10 kontributor teratas, dan ekstrak login serta jumlah kontribusi.

Langkah 3: Menghasilkan Statistik Ringkasan

Gabungkan data di Claude Code:

const repos = await fetchAllRepos('anthropics');
const enrichedRepos = await Promise.all(
  repos.map(async (repo) => {
    const contributors = await fetchTopContributors('anthropics', repo.name);
    return { ...repo, topContributors: contributors };
  })
);

return {
  totalStars: enrichedRepos.reduce((sum, r) => sum + r.stars, 0),
  totalForks: enrichedRepos.reduce((sum, r) => sum + r.forks, 0),
  repositories: enrichedRepos
};

Langkah 4: Publikasikan Dasbor

Gunakan rest-post untuk membuat situs GitHub Pages dengan data dasbor menggunakan GitHub API untuk melakukan commit ke branch gh-pages.

Penanganan Kesalahan dan Ketahanan

Skill ini mengkategorikan kesalahan untuk penanganan yang tepat:

// Kesalahan 4xx: Kesalahan klien
if (response.status >= 400 && response.status < 500) {
  throw new SkillError('client_error', `Permintaan tidak valid: ${response.status}`, {
    statusCode: response.status,
    details: await response.text()
  });
}

// Kesalahan 5xx: Kesalahan server (dapat dicoba ulang)
if (response.status >= 500) {
  throw new SkillError('server_error', `Kesalahan server: ${response.status}`, {
    retryable: true,
    statusCode: response.status
  });
}

// Kesalahan jaringan: Kegagalan koneksi
if (error.code === 'ECONNREFUSED' || error.code === 'ETIMEDOUT') {
  throw new SkillError('network_error', 'Jaringan tidak dapat dijangkau', {
    retryable: true,
    originalError: error.message
  });
}

Claude Code menerima kesalahan terstruktur dan dapat memutuskan untuk mencoba lagi, membatalkan, atau meminta intervensi pengguna.

Kesimpulan

Claude Code Skills untuk jaringan API mengubah permintaan HTTP ad-hoc menjadi alat pengambilan data yang andal, aman tipe, dan dapat diamati. Dengan memusatkan manajemen kredensial, mengimplementasikan coba ulang cerdas, dan menyediakan penanganan kesalahan terstruktur, Anda menghilangkan sumber bug integrasi API yang paling umum. Mulailah dengan empat alat inti—rest-get, rest-post, graphql-query, dan raw-http—lalu perluas untuk kasus penggunaan spesifik Anda. Investasi dalam konfigurasi skill memberikan keuntungan langsung dalam konsistensi kode dan kecepatan pengembangan.

Ketika skill pengambilan data Anda berinteraksi dengan API internal, validasi endpoint tersebut dengan Apidog untuk memastikan integrasi yang didorong AI Anda mengonsumsi kontrak yang andal.

button