Fetch content

To display lists or details with SDK components, use List and View. This page covers working with fetched data directly, such as passing data to your own carousel or generating metadata and sitemaps.

The examples use the blog list API with title and body fields from Quickstart. genko is an initialized client.

Choose a method

All methods are asynchronous; use await to receive their results.

Display a list

import Link from "next/link";import { genko } from "@/lib/client";
export default async function BlogPage() {  const { contents, totalCount } = await genko.apis.blog.list({    limit: 10,    offset: 0,    orders: "-publishedAt",  });
  return (    <main>      <h1>Blog ({totalCount})</h1>      <ul>        {contents.map((post) => (          <li key={post.id}>            <Link href={`/blog/${post.id}`}>{post.title}</Link>          </li>        ))}      </ul>      {contents.length === 0 && <p>No published posts yet.</p>}    </main>  );}

totalCount is the total number of items that meet the conditions, and contents.length is the number of items retrieved this time. If you want to get the second page, specify offset: 10 with the same conditions.

Show details page

When fetching an entry by its URL ID, handle entries that have been deleted or unpublished.

import { notFound } from "next/navigation";import { genko } from "@/lib/client";
export default async function BlogPostPage({  params,}: {  params: Promise<{ id: string }>;}) {  const { id } = await params;  const post = await genko.apis.blog.getOrNull(id);  if (!post) notFound();
  return <main><h1>{post.title}</h1></main>;}

To render body HTML, use the React components. If you put an HTML string in regular JSX curly braces, the tags will also appear as characters.

get versus getOrNull

get() throws an exception when it cannot be retrieved. getOrNull() changes 404 only to null. Authentication, rate limit, and server errors are not hidden as missing entries.

const post = await genko.apis.blog.getOrNull("abcDEF123456");if (post === null) {  // The entry does not exist or is not available for delivery.}

404 includes cases where the workspace or API does not exist, or when the API is not covered by the key. These will also be null, so check the connection settings and the target of the key first.

For detailed exception handling, please refer to Errors and Limitations.

Get object format

This example assumes you created an object API named profile in the dashboard and synchronized its schema with pull.

const profile = await genko.apis.profile.getOrNull();if (profile) {  console.log(profile.name);}

No ID is needed. An entry that has not been created or published returns null. You can use get() for processing that requires a profile to exist.

Get all items

If you need all items, such as when generating a sitemap, use getAll().

const posts = await genko.apis.blog.getAll({ orders: "-publishedAt" });const paths = posts.map((post) => `/blog/${post.id}`);

It fetches 100 items per request. limit and offset cannot be specified. It fetches only published entries. It does not back up drafts or version history.

For large datasets, account for memory use and entries moving between pages during retrieval. Use list() with pagination for regular views.

Fetch entry view counts

Call views({ ids, days }) on an API binding to fetch all-time and recent entry counts. This operation uses an API key, so call it on the server.

import { genko } from "@/lib/client";
const result = await genko.apis.blog.views({  ids: ["abcDEF123456"],  days: 30,});console.log(result.days, result.views.abcDEF123456?.total, result.views.abcDEF123456?.recent);

Pass 1–100 ids, each matching ^[A-Za-z0-9_-]{1,64}$. days is an integer from 1 to 365, defaulting to 30, measured as JST calendar days including today. total is the all-time count and recent is the sum over that range. IDs that aren't entries of the selected API return zero for both.

The low-level createClient exposes getViews. The HTTP endpoint is GET /v1/{workspace}/_views/{endpoint}. See Page views for setup and display components, or the delivery API reference for the HTTP request and response.

Fetch options

Lists support searching, filtering, and sorting. Single entries and objects support depth, fields, and draftKey.

Implementations that handle preview keys are summarized in Draft Preview.