@ actionful/ experiences- live- preview

内容体验的可选直播预览 .

运行时间参数和会话更新

直接代号 fetchExperience 接受每次呼叫 parameters; 见 运行时间参数指南。 。 。 . 预览会话保留其现有的无前缀 context.parameters 地图 (例如 { productId: 'foo123' }),有会话支持的值 合同。 内容编辑器拥有会话上下文变化 . fetchPreviewSession 装入当前水合快照; createLivePreviewClient 消费后续 WebSocket快照. 按惯例替换每次更新后的计划. 这些 API 不改变会话参数或编码 parameter.* 查询密钥.

API 密码

type PreviewSessionOptions = {
  spaceId: string;
  environmentId: string;
  previewToken?: string;
  sessionId?: string;
  resourceResolution?: string;
  sessionHost?: string;
  debug?: boolean;
};

type PreviewSessionExperienceOptions = {
  spaceId: string;
  environmentId: string;
  sessionId: string;
  resourceResolution?: string;
};

type PreviewSessionClientOptions = {
  previewToken: string;
  host?: string;
};

type PreviewSessionResolveOptions = {
  config: ResolverConfig;
  metadata?: Record<string, unknown>;
  debug?: boolean;
};

fetchPreviewSession(
  previewSessionOptions: PreviewSessionExperienceOptions,
  clientOptions: PreviewSessionClientOptions,
  resolveOptions: PreviewSessionResolveOptions,
): Promise<PortableRenderPlan>;

PreviewSessionFetchError;
LivePreviewConnectionError;
NotFoundError;
PREVIEW_WEBSOCKET_HOST;

type LivePreviewResult = {
  data: ExperiencePayload | undefined;
  error: Error | undefined;
};

type LivePreviewClient = {
  getResult(): LivePreviewResult;
  subscribe(listener: () => void): () => void;
  subscribeStatus(listener: (status: LivePreviewStatus) => void): () => void;
};

createLivePreviewClient(
  previewSessionOptions: PreviewSessionOptions,
  initialPayload?: ExperiencePayload,
): LivePreviewClient;

sendPreviewStatus(status: LivePreviewStatus): void;

使用 fetchPreviewSession 内容应用程序时的初始渲染 页:1 preview_session_id预览会话 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}快照并解析成 PortableRenderPlan启用 createLivePreviewClient 以接收随后的 WebSocket 更新.

import { fetchPreviewSession } from '@contentful/experiences-live-preview';

const plan = await fetchPreviewSession(
  { spaceId, environmentId, sessionId },
  { previewToken },
  { config: experienceConfig }
);

请求发送 previewToken 以示纪念 Authorization 头曰. host 选择兼容的预览会话 API 主机并默认为 生产主机。 通过相同的编码 resourceResolution 数值 previewSessionOptions 转至 fetchPreviewSession 财务报告和审定财务报表 createLivePreviewClient 当会话引用来自其它资源时 空间。 缺少的会话抛出 NotFoundError其他请求和答复 抛出失败 PreviewSessionFetchError。 。 。 .

使用量

createLivePreviewClient 返回预览会话的数据源。 打开了 当第一个收听者订阅并发布每个有效文件时,该套接字 next 实收有效载荷。 如果你通过了 initialPayload, (中文(简体) ), getResult().data 返回时 它直到一个有效的更新到达。 无 initialPayload,数据开始于 undefined。 。 。 .

getResult().error 被设定为直播预览连接失败时。 最后一个 现有有效数据 getResult().data。 。 。 .

sessionId 财务报告和审定财务报表 previewToken 是可选的。 软件包仅在 提供了两种数值。 呼叫者通过 PreviewSessionOptions。 。 。 .

sessionHost 是预览会话服务的可选 WebSocket URL 。 这个 默认为生产内容会话服务。 SDK 将 URL 作为 并发送 previewToken 作为 编码 access_token 查询参数。 提供时, resourceResolution 实值 作为编码发送 resource_resolution 查询参数.

当您直接在内容预览中使用软件包时, 请连接客户端的 订阅状态 sendPreviewStatus数字 :

import { createLivePreviewClient, sendPreviewStatus } from '@contentful/experiences-live-preview';

const client = createLivePreviewClient(previewSessionOptions);
const unsubscribeStatus = client.subscribeStatus(sendPreviewStatus);
const unsubscribe = client.subscribe(() => {
  const experience = client.getResult().data;
  if (experience) updatePreview(experience);
});

这告诉了Contentful应用程序如何与SDK协调更新. 这个 这种整合需要订阅。 框架适配器设置 你吗? 保留未订阅的函数, 并在预览不再时调用 使用客户端.

一个有效的 next 消息在原子上取代当前数据。 客户保留 接收错误的邮件、 服务器错误, 或者 运输中断。 未知信件类型被忽略 。 这个 next 有效载数 包含一个 Experience。适配器可以在此源的基础上再利用它的套接字 和消息处理。 其他框架可以使用相同的框架中立 客户端.