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

В моем приложении Sapper я хочу предварительно загрузить из 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. Но это не так. Есть ли здесь кто-нибудь, кто мог бы мне помочь? Спасибо!


svelte sapper
person Moritz Laube    schedule 08.08.2019    source источник
comment
вы передаете req переменную вашему Prismic.getApi методу, однако req, похоже, не определен. Ошибка копирования / вставки кода вопроса?   -  person Morphyish    schedule 08.08.2019
comment
Привет! Спасибо за ваш комментарий! Вы правы, переменная req не используется. Но и без этой переменной он не работает ...   -  person Moritz Laube    schedule 10.08.2019

Ответы (2)


arrow_upward
2
arrow_downward

Я проверил документацию по призме, и, как оказалось, метод 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();
    }
}
person Morphyish    schedule 11.08.2019

arrow_upward
0
arrow_downward

Это работает, если вам не нужен объект 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>
person Moritz Laube    schedule 12.08.2019