0

在我的 Sapper 应用程序中，我想使用他们的 SDK（'prismic-javascript）从 Prismic API 预加载

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

我还尝试了使用 JSONplaceholder 的 this.fetch 方法。这很好用。即使需要 Prismic-SDK 的“旧方式”也行不通：

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 数据填充数据变量。但事实并非如此。有没有人可以在这里帮助我？谢谢！

4

2 回答 2

2

我检查了棱镜文档，结果发现该getApi方法要求您req在第二个参数中给出它。

Req是requestnodejs 服务器调用中的参数。您无法从该preload方法访问它。

您需要做的是创建一个服务器路由，您可以从中使用 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();
    }
}
于 2019-08-11T09:38:55.027 回答
0

如果您不需要 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>
于 2019-08-12T15:36:24.977 回答