如何从 Prismic API 在 Sapper 应用程序中预加载数据

Question

在我的 Sapper 应用程序中，我想使用他们的 SDK ('prismic-javascript)

从 Prismic API 预加载

我按照文档预加载内容。然而，文档仅通过 this.fetch 函数提供预加载。我想使用 Prismic SDK 连接到我的 Prismic 存储库。但它根本不给我任何数据。

我还尝试了使用 JSONplaceholder 的 this.fetch 方法。那很好用。即使需要 Prismic-SDK，"old way" 也不起作用：

var Prismic = require("prismic-javascript")

我的代码是这样的：

<script context="module">
  import Prismic from "prismic-javascript";
  const apiEndpoint = "https://my-repository.cdn.prismic.io/api/v2";

  export async function preload(page, session) {
    const api = await Prismic.getApi(apiEndpoint, { req });
    const data = await api.getSingle("portfolio");
    return { data };
  }
</script>

此代码应使用 API 数据填充数据变量。但事实并非如此。这里有没有人可以帮助我？谢谢！

Answer 1

我查看了 prismic 文档，结果发现 getApi 方法要求您在第二个参数中给它 req。

Req 是 nodejs 服务器调用中的 request 参数。您无法通过 preload 方法访问它。

您需要做的是创建一个 server route，您可以从中使用 Prismic API。

<script context="module">
  export async function preload(page, session) {
    const data = await this.fetch('/prismic/portfolio');
    return { data };
  }
</script>

使用 prismic/[slug].js 服务器路由

import Prismic from "prismic-javascript";
const apiEndpoint = "https://my-repository.cdn.prismic.io/api/v2";

export async function get(req, res, next) {
    const { slug } = req.params;

    const api = await Prismic.getApi(apiEndpoint, { req });
    const data = await api.getSingle(slug);

    if (article !== null) {
        res.setHeader('Content-Type', 'application/json');
        res.end(JSON.stringify(data));
    } else {
        next();
    }
}

Answer 2

如果您不需要来自 Prismic 的 req 对象，则此方法有效：

  import Prismic from "prismic-javascript";
  const apiEndpoint = "https://my-repository.cdn.prismic.io/api/v2";

  export async function preload({ params, query }) {
    const api = await Prismic.getApi(apiEndpoint);
    const data = await api.getSingle("portfolio");

    return { data };
  }
</script>

如何从 Prismic API 在 Sapper 应用程序中预加载数据

How to preload data in Sapper app from Prismic API

svelte

sapper