React Integration

Recommended patterns for consuming the Drock API from React and Next.js applications.

Server Component Pattern

tsx

const response = await fetch("https://api.getdrock.com/api/v1/blogs", {
  headers: {
    Authorization: `Bearer ${process.env.DROCK_API_KEY}`,
  },
  cache: "no-store",
})

if (!response.ok) {
  throw new Error(`Drock API error: ${response.status}`)
}

const data = await response.json()

Client Component Pattern

tsx

"use client"

import { useEffect, useState } from "react"

export function PublicBlogList() {
  const [blogs, setBlogs] = useState<Array<{ id: string; name: string }>>([])

  useEffect(() => {
    fetch("/api/proxy/drock/blogs")
      .then((response) => response.json())
      .then((data) => setBlogs(data.blogs ?? []))
  }, [])

  return <ul>{blogs.map((blog) => <li key={blog.id}>{blog.name}</li>)}</ul>
}

Prefer a local proxy route when the key must remain private. Only use a browser-direct token when it was intentionally created for public use.

Handling Errors

Treat 401 as a missing or malformed Bearer token.
Treat 403 as a scope problem on a valid key.
Use cache: "no-store" for admin dashboards and live previews.