Я понимаю, что функция preload()
в теге <script context="module">
и что все, что возвращает эта функция, передается компоненту как внешнее свойство, при условии, что вы написали export let whatever
в своем компоненте.
Теперь я использую firestore вместе с rxfire как на стороне сервера , так и на стороне клиента. Так что я могу просто сделать import { posts } from '../store'
, и тогда posts
будет буквально хранилищем, которое будет постоянно обновлять себя всякий раз, когда получает новые снимки из хранилища firebase.
В руководстве по Svelte я заметил, что любая переменная, которую вы объявляете в <script context="module">
, также будет доступна в ваш html-шаблон, как если бы вы объявили его в обычном теге <script>
.
Итак, моя мысль заключалась в том, что на самом деле мне не нужна функция preload()
, чтобы возвращать какие-либо свойства для внедрения в мой компонент. Поскольку переменная posts
уже доступна для html-шаблона. Единственное, что мне действительно нужно сделать в preload()
, - это дождаться получения первого снимка данных из firestore. Это выглядело бы примерно так:
<script context="module">
import { posts } from '../store'
import { first } from 'rxjs/operators'
export async function preload() {
const result = await posts.pipe(first()).toPromise()
console.log(result) // this is just here to check if the results did indeed arrive
}
</script>
<h1>Recent posts</h1>
<ul>
{#each $posts as post}
<li>
<a href="/blog/{post.slug}" rel="prefetch">
{post.title}
</a>
</li>
{/each}
</ul>
Когда я запускаю этот код, я вижу в своем терминале, что данные сообщений действительно правильно распечатаны из console.log
, поэтому я знаю, что данные прибыли. Но по какой-то причине я не понимаю, это не работает, потому что шаблон все еще заканчивается хранилищем, в котором еще нет первого снимка данных. Таким образом, HTML-код SSR, который сервер отправляет браузеру, заканчивается пустым списком.
Я подумал, может быть, дело в том, что это хранилище, а не необработанные данные. Поэтому я упростил свой код, чтобы понять, не в этом ли проблема.
<script context="module">
import { wait } from '../utils'
import { writable } from 'svelte/store'
const blabla = writable('first value')
export async function preload() {
await wait(1000) // simulate a delay, like we would have when retrieving data from firestore
blabla.set('second value')
}
</script>
<h1>{$blabla}</h1>
Тогда html-код SSR действительно содержит текст second value
. Так что я не знаю, в чем проблема.
Кто-нибудь знает, что дает?