@ cmsy/ 反应

反应构件 学问 无头站点:定义 块、 渲染已发布的内容、 从公开发送的 API 获取数据,以及 开活编辑桥. 框架不可知反应; 对于 Next.js App 路由器 线路使用 @cmssy/next。 。 。 .

pnpm add @cmssy/react

定义块

块是普通反应组件,加上编辑器读取的场图.

import { defineBlock, fields } from "@cmssy/react";
import Hero from "./Hero";

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Hero,
  props: {
    heading: fields.singleLine({ label: "Heading", required: true }),
    subheading: fields.multiLine({ label: "Subheading" }),
    cta: fields.link({ label: "CTA" }),
    image: fields.media({ label: "Image" }),
  },
});

fields 覆盖 singleLine, (中文(简体) ), multiLine, (中文(简体) ), link, (中文(简体) ), media, (中文(简体) ), boolean, (中文(简体) ), repeater还有更多 块组件收到 { content } 从 cMS在运行时间.

已发布的内容

import { fetchPage, CmssyServerPage } from "@cmssy/react";

const page = await fetchPage(
  { org: "acme-org", workspaceSlug: "acme" },
  pathSegments,
);

return <CmssyServerPage page={page} blocks={blocks} locale="en" />;

CmssyServerLayout 使页眉/页脚布局组相同。 两者都是 服务器组件 — 除非块需要, 没有块 JavaScript 船到客户端 这个.

获取数据

一个通用的 GraphQL 客户端在公共 API 上—— 写你自己的查询( 或使用) 出口文件:

import { createCmssyClient, MODEL_RECORDS_QUERY } from "@cmssy/react";

const cmssy = createCmssyClient({ org: "acme-org", workspaceSlug: "acme" });

// raw query (you own scoping)
await cmssy.query(MY_QUERY, vars);

// workspace-scoped (auto x-workspace-id header + $workspaceId var)
const {
  public: {
    model: { records },
  },
} = await cmssy.queryScoped(MODEL_RECORDS_QUERY, {
  modelSlug: "posts",
});

已准备好的文件+结果类型: SITE_CONFIG_QUERY, (中文(简体) ), MODEL_DEFINITIONS_QUERY, (中文(简体) ), MODEL_RECORDS_QUERY, (中文(简体) ), FORM_QUERY, (中文(简体) ), SUBMIT_FORM_MUTATION。 。 。 .

现场编辑器( 客户端)

@cmssy/react/client 曝光懒惰编辑器 + 保持屏蔽的布局包 孤立块 :

"use client";
import { CmssyLazyEditor } from "@cmssy/react/client";

export const CmssyEditor = (props) => (
  <CmssyLazyEditor {...props} load={() => import("./blocks")} />
);

编辑们和Cmssy管理员谈了一下 cmssy:* 实时桥接协议 预览.

版本: 此软件包, 不是 API

固定此套件不会将它所讲的API 绑起 . 软件包版本 包括这个客户 - 其出口及其行为,正常的铸币. 阴道 aPI是一个主机服务,其GraphQL计划可以在任何部署上改变, 在这儿没有释放权.

API 版本没有日期标注; 发送端没有版本 部分。 今天保护你的是 断裂的策略改变不能合并 沉默地 - 它被一个能验证SDK自身操作的门抓住 无论如何,运输一个需要记录 批准 - 而我们打算 删除已标记 @deprecated 先说 没有保证的折旧窗口 并且没有最低的通知期。 详细情况 @cmssy/core。 。 。 .

许可证

麻省理工学院