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

Posted 2023-02-21

【中文标题】如何在 Next.js/React 中使用带有 @prismicio/client 库的时间线参考

【英文标题】：How to use a timeline ref with @prismicio/client library in Next.js/React

【发布时间】：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 客户端调用的正确方法是什么？

【参考方案1】：

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

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

谢谢。