sapper as stati c генератор сайтов - PullRequest
Новая
       21

sapper as stati c генератор сайтов

0 голосов
/ 27 марта 2020

Я бы хотел использовать sapper в качестве ssg. Когда я получаю данные примерно так: 

<script context="module">
export function preload({ params, query }) {
    return this.fetch(`https://jsonplaceholder.typicode.com/posts`)
        .then(r => r.json())
        .then(posts => {
            return {posts} 
        })
}

, я могу экспортировать сайт в stati c. Но по ссылкам данные по-прежнему извлекаются из jsonplaceholder. Только при перезагрузке данные попадают из папки stati c. Как получить все извлеченные данные? c?

Ответы [ 2 ]

1 голос
/ 28 марта 2020

Так что это может быть немного запутанным в начале. Чтобы это работало, вам нужно проксировать ваши выборки локально. Вот как вы можете это сделать:

В /posts/index.json.js: 

let contents;

export function get(req, res) {
    const posts = fetch('do stuff here to fetch')

    contents = JSON.stringify(posts);

    res.writeHead(200, {
        'Content-Type': 'application/json'
    });

    res.end(contents);
}

И в вашем фактическом компоненте маршрута /posts/index.svelte: 

<script context="module">
    export async function preload({ params, query }) {
        return this.fetch(`index.json`).then(r => r.json()).then(posts => {
            return { posts };
        });
    }
</script>

<script>
export let posts;
</script>

Официальный Сайт Svelte использует этот подход для получения сообщений (из локального файла, а не с помощью fetch). Вы, вероятно, можете извлечь из этого вдохновение.

Стоит отметить, что функция preload() поставляется как на сервер, так и на интерфейс, поэтому не следует помещать туда ключи API.

0 голосов
/ 29 марта 2020

Теперь это похоже на работу. Сейчас попробую. Комментарии приветствуются, поскольку я не чувствую себя комфортно, и это просто попытка и ошибка.

posts / index. json. js

import fetch from 'node-fetch'

export async function get(req, res) {
    const posts = await fetch('https://jsonplaceholder.typicode.com/posts')

    const contents = await posts.text()

    res.writeHead(200, {
        'Content-Type': 'application/json'
    });

    res.end(contents);
}

posts / index.svelte 

<script context="module">
    export async function preload({ params, query }) {
        return this.fetch(`posts.json`).then(r => r.json()).then(posts => {
           return { posts };
        });
    }
</script>
...