実践

<script setup lang="ts">import { onMounted, ref } from "vue";import { getApiBinding } from "@genko-me/sdk";import type { GenkoListResult } from "@genko-me/sdk";import type { PageResult } from "@genko-me/vue";import { client } from "../lib/genko";
const PER_PAGE = 6;const binding = getApiBinding(client.blog);
const initial = ref<GenkoListResult<Record<string, unknown>>>();const failed = ref(false);
onMounted(async () => {  try {    initial.value = await client.blog.list({ limit: PER_PAGE, orders: "-publishedAt" });  } catch {    failed.value = true;  }});
async function loadPage(page: number): Promise<PageResult> {  try {    const result = await client.blog.list({ limit: PER_PAGE, offset: (page - 1) * PER_PAGE, orders: "-publishedAt" });    return { ok: true, result };  } catch {    return { ok: false, message: "読み込みに失敗しました。" };  }}</script>
<template>  <Error v-if="failed" template />  <Loading v-else-if="!initial" template />  <ListClient v-else :initial="initial" :initial-page="1" :fields="binding.fields" :schemas="binding.schemas" href="/blog/{id}" :load-page="loadPage">    <article>      <h2><ListItem id="title" /></h2>    </article>    <template #pagination><Pagination /></template>    <template #empty><Null>公開されている記事はありません。</Null></template>  </ListClient></template>

<script setup lang="ts">import { computed, onMounted, ref, watchEffect } from "vue";import { useRoute } from "vue-router";import { getApiBinding } from "@genko-me/sdk";import type { GenkoEntryMeta } from "@genko-me/sdk";import { EntryProvider, PreviewNotice, ShareButtons, ViewItem } from "@genko-me/vue";import { client } from "../lib/genko";import type { Blog } from "../lib/schema";
const route = useRoute();const binding = getApiBinding(client.blog);
const post = ref<(Blog & GenkoEntryMeta) | null>();const draftKey = computed(() => (typeof route.query.draftKey === "string" ? route.query.draftKey : undefined));const draft = ref(false);
onMounted(async () => {  try {    post.value = await client.blog.getOrNull(route.params.id as string, draftKey.value ? { draftKey: draftKey.value } : undefined);    draft.value = Boolean(draftKey.value) && post.value !== null;  } catch {    post.value = null;  }});
// SPAはサーバーからレスポンスヘッダーやHTMLの<meta>を返せないため、// プレビュー中だけdocument.headへ直接足す。watchEffect(() => {  let tag = document.querySelector('meta[name="robots"]');  if (draft.value) {    if (!tag) { tag = document.createElement("meta"); tag.setAttribute("name", "robots"); document.head.appendChild(tag); }    tag.setAttribute("content", "noindex, nofollow");  } else {    tag?.remove();  }});</script>
<template>  <p v-if="post === undefined">読み込み中…</p>  <p v-else-if="post === null">記事が見つかりません。</p>  <EntryProvider v-else :entry="post" :fields="binding.fields" :schemas="binding.schemas">    <PreviewNotice v-if="draft" />    <h1><ViewItem id="title" /></h1>    <ViewItem id="body" />    <ShareButtons v-if="!draft" :url="`https://your-site.example${route.fullPath}`" :title="post.title" />  </EntryProvider></template>

https://your-site.example/blog/{id}?draftKey={key}

import { verifyGenkoSignature } from "@genko-me/sdk";
const rawBody = await request.text();const valid = await verifyGenkoSignature({  secret: process.env.GENKO_WEBHOOK_SECRET!,  rawBody,  signatureHeader: request.headers.get("x-genko-signature"),  timestampHeader: request.headers.get("x-genko-timestamp"),});