Как предварительно загрузить данные в приложение Sapper из Prismic API

Question

В моем Sapper App я хочу предварительно загрузить Prismic API, используя их SDK ('prismic-javascript)

Я следовал за документами для предварительной загрузки контента. Тем не менее, документы обеспечивают предварительную загрузку только через функцию this.fetch. Я хочу подключиться к своему хранилищу Prismic с помощью Prismic SDK. Но это не дает мне никаких данных вообще.

Я также попробовал метод this.fetch с JSONplaceholder. Это просто отлично работает. Даже требующий 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. Но это не так. Есть ли кто-нибудь, кто мог бы помочь мне здесь? Спасибо!

Answer 1

Это работает, если вам не нужен объект req из Prismic:

  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>

Answer 2

Я проверил призматическую документацию, и, как оказалось, getApi метод требует от вас дать req во втором аргументе.

Req это request аргумент в вызовах сервера nodejs. Вы не можете получить к нему доступ из 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();
    }
}