如何在 Next.js/React 中使用带有 @prismicio/client 库的时间线参考答案

【问题标题】：How to use a timeline ref with @prismicio/client library in Next.js/React如何在 Next.js/React 中使用带有 @prismicio/client 库的时间线参考
【发布时间】：2021-10-12 09:48:33
【问题描述】：

我正在使用 @prismicio/client 库从 Next.js 应用程序中的 Prismic 获取数据，但我不知道如何将预览模式和它提供的预览引用连接到 client.query 调用为了获取该特定时间线参考的数据。

我尝试在library itself 的技术参考和how to use Preview mode 的指南中查找此内容。他们都提到我可以使用 refs，但没有显示一个实际的例子。这是我当前的设置，它不起作用：

在我的preview.ts 页面中，我有这个自定义的getServerSideProps 函数，它使用对我的 CMS 处理程序的自定义调用，我在其中传递了 ref 令牌：

export const getServerSideProps = async (context: NextPageContext): Promise<unknown> => {
    const lang = getLangFromContext(context);
    const { slug } = context.query as { slug: string[] };
    const { token, documentId } = context.query;

    if (!token) {
        return console.warn(`No token available, check your configuration`);
    }

    const { pageComponents, meta } = await getCmsPage(slug ? slug.join("/") : "", lang, token);
    return { props: { pageComponents, meta } };
};

调用 Prismic API 时：

    const client = Prismic.client(refApiUrl, {
        accessToken: apiToken,
    });

    const res: any = await client.query(predicates, {
        key: refToken,
    });

这会导致服务器端错误：

Error: Unknown field key
    at SearchForm.set (C:\main\Sprybase\projects\prismic-integration\dist\node_modules\@prismicio\client\cjs\@prismicio\client.js:200:19)
    at ResolvedApi.query (C:\main\Sprybase\projects\prismic-integration\dist\node_modules\@prismicio\client\cjs\@prismicio\client.js:606:25)
    at C:\main\Sprybase\projects\prismic-integration\dist\node_modules\@prismicio\client\cjs\@prismicio\client.js:1164:63
    at processTicksAndRejections (internal/process/task_queues.js:88:5)

我做错了什么？将时间线引用传递给 Prismic 客户端调用的正确方法是什么？

【问题讨论】：

标签： reactjs next.js prismic.io

【解决方案1】：

您的应用程序中似乎没有使用getPreviewResolver 函数或linkresolver，工具栏使用它来获取正确的页面并在浏览器顶部加载预览cookie。

您以这种方式进行预览有什么原因吗？

谢谢。

【讨论】：