web-dev-qa-db-ja.com

Sapper / Svelte：ローカルjsonファイルをフェッチしてデータを取得する方法

私のsapperアプリでは、src/data/videoslist.jsonのjsonファイル（json形式のオブジェクトの配列）にいくつかのデータを保存しています。

インデックスページのデータを取得してコンポーネントに渡す必要があります。これがsrc/routes/index.svelteの先頭にある私のコードです

<script context="module">
    export async function preload() {
        const response = await this.fetch('../data/videoslist.json');
        const responseJson = await response.json();
        return {
            videos: responseJson
        }
    }
</script>

エラー500が発生する

invalid json response body at http://127.0.0.1:3000/data/videoslist.json reason: Unexpected token < in JSON at position 0

ファイルは純粋なjsonです。予期しないトークン<があると、ファイルの代わりに404が返されると思います。

私が間違っていることを知っていますか？ ../ ./を使用したり、ファイルをルートフォルダに移動したりして、さまざまなパスのバリエーションを試しましたが、何も機能しません。

PS：私はまだjsとフレームワークの初心者です、もっとよく知っている人にとっては非常に基本的な何かを逃したかもしれません:)（フェッチでローカルファイルを取得できないなど）。

jsonfetchlocalsveltesapper
2
Kris

リッチのソリューションは非常にうまく機能します。

Jsonファイルを静的フォルダーに移動したところ、次のコードが機能するようになりました。

<script context="module">
    export async function preload() {
        const response = await this.fetch('videoslist.json');
        const responseJson = await response.json();
        return {
            videos: responseJson
        }
    }
</script>

このソリューションは、サーバーのルーティングとパスを処理せずにファイルに直接アクセスできるようにします。

0
Kris

次のことに気づきました：

<script context="module">
    export async function preload({ params: { id } }) {
       return await (await this.fetch(`/route/${id}/details.json`)).json();
    });
</script>

... SSRコードはロードを試みます https://127.0.0.1/route/id/details.json -これは私のホスティングで失敗します。完全修飾絶対URL（外部からアクセス可能）を指定した場合、たとえば、.

this.fetch(`https://hostname.tld/route/${id}/details.json`)

..それは正常に動作します。 details.json.jsサーバールートを設定しました。これは、URLがhttps://hostname.tld/route/id/details.json経由で直接アクセスされたときに期待どおりに機能します

Sapperは明らかにサーバー500の後にクライアントで同じコードを実行するため、ページは引き続き機能しますが、やや混乱します。

ホスティングプロバイダーがリファラーの欠如（403になる）でブロックされるため、プリロードスクリプトの相対パスに同様の問題がありました。

this.fetch(`/route/${id}/details.json`, { referrerPolicy: "Origin" })

...しかし、これはこの例では役に立たないようです。

もちろん、URLを絶対的なものに変更することもできますが、これをホストに結び付けず、ローカル開発を台無しにし、SSRコードを強制的にローカルネットワークから強制的に離します。サーバー側のフェッチがlocalhostに対してどのように機能するかは不明なので、sapper固有の問題ではない可能性があります。

N.B.したがって、プリロードページの引数から「ホスト」を使用して、絶対URLを構築できます（httpsではなくhttpである必要があります）。

<script context="module"> 
   export async function preload({ Host, params: { id } }) { 
      return await (await this.fetch(`http://{Host}/route/${id}/details.json`)).json(); 
   });
</script>

...そしてそれはホスティングで動作します-しかし、それが直感的ではなく、ドキュメントが示唆しているように恐れていません。

0
Tom Pereira