Могу ли я просто позволить функции предварительной загрузки Sapper просто ждать обещания без необходимости возвращать результат этого обещания? - PullRequest
Новая
       159

Могу ли я просто позволить функции предварительной загрузки Sapper просто ждать обещания без необходимости возвращать результат этого обещания?

1 голос
/ 12 июля 2020

Я понимаю, что в теге <script context="module"> есть функция preload(), и все, что возвращает эта функция, передается компоненту как внешнее свойство, если вы написали export let whatever в своем компоненте.

Теперь я использую firestore вместе с rxfire, как на стороне сервера , так и на стороне клиента . Так что я могу просто сделать import { posts } from '../store', и тогда posts будет буквально магазином, который будет постоянно обновлять себя всякий раз, когда он получает новые снимки из firestore firebase.

В учебнике Svelte I мы заметили, что любая переменная, которую вы объявляете в <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, поэтому я знаю данные поступили. Но по какой-то причине я не понимаю, это не работает, потому что шаблон все еще заканчивается хранилищем, в котором еще нет первого снимка данных. Таким образом, SSR html, который сервер отправляет браузеру, заканчивается пустым списком.

Я подумал, возможно, это связано с тем, что это хранилище, а не необработанные данные. Поэтому я упростил свой код, чтобы увидеть, не в этом ли проблема. 

<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>

Тогда SSR html код действительно содержит текст second value. Так что я не знаю, в чем проблема.

Кто-нибудь знает, что дает?

1 Ответ

0 голосов
/ 12 июля 2020

В конце концов, я смог исправить это, заменив rx js и rxfire моим собственным кодом, который обертывает живые снимки firestore в svelte store. Так что должна быть какая-то странная несовместимость rx js, которая все испортила.

...