Fetched content disappears when I refresh the page

Question

whenever I refresh my page the fetched content I've loaded decides to disappear, it will load the first time but every time after that it will go. I have another component that has almost the same code and that one works fine so I'm not entirely sure why it doesn't with this component.

the feeling I have is in my standings.svelte component I have a flatMap function which is the main difference compared to my other components.

here is a video showing what happens when I refresh the page. This won't happen to any other component but this one. (https://i.stack.imgur.com/lI2dG.jpg)

This is my standings.svelte component

<script>
import {leagueStandings} from "../../stores/league-standings-stores"

const tablePositions = $leagueStandings.flatMap(({ standings: { data } }) => data);

</script>

<div class="bg-[#1C1C25] p-8 rounded-lg box-border w-fit">
    

    {#each tablePositions as tablePosition}
            <div class="standings-table flex gap-9 mb-2 pb-4 pt-3 border-b border-[#303041]">
                <div class="team-details flex gap-4 w-full" id="td">
                    <p class="w-[18px]">{tablePosition.position}</p>
                    <img src="{tablePosition.team.data.logo_path}" alt="" class="w-[1.5em] object-scale-down">
                    <p class="">{tablePosition.team_name}</p>
                </div>

                <div class="team-stats flex gap-5 text-left child:w-5 child:text-center w-full">
                    <p>{tablePosition.overall.games_played}</p>
                    <p>{tablePosition.overall.won}</p>
                    <p>{tablePosition.overall.draw}</p>
                    <p>{tablePosition.overall.lost}</p>
                    <p>{tablePosition.overall.goals_scored}</p>
                    <p>{tablePosition.overall.goals_against}</p>
                    <p>{tablePosition.total.goal_difference}</p>
                    <p>{tablePosition.overall.points}</p>
                    <p class="!w-[78px] !text-left">{tablePosition.recent_form}</p>
                </div>
            </div>
    {/each}
</div>

Here is my svelte store

import { writable } from "svelte/store";

export const leagueStandings = writable([]);

const fetchStandings = async () => {
    const url = `https://soccer.sportmonks.com/api/v2.0/standings/season/19734?api_token=API_KEY`;
    const res = await fetch(url);
    const data = await res.json();
    leagueStandings.set(data.data);

}
fetchStandings();

id love some advice on what im doing wrong :)

score 0 · Answer 1 · answered Dec 04 '22 at 16:44

Data by default doesn't persist in svelte/store. When you transition from one component to another the data get passed on to the child or linked component. But on refreshing the page that data is not accessible since you are directly accessing the child/linked component. To be able to access the data after refresh you need to store them in Browser's localStorage. You can try this solution https://stackoverflow.com/a/56489832/14018280

Fetched content disappears when I refresh the page

1 Answers1