Fetched content disappears when I refresh the page-CodePudding

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://imgur.com/a/Ew4bwgB)

This is my standings.svelte component

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

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

</script>

<div >
    

    {#each tablePositions as tablePosition}
            <div >
                <div  id="td">
                    <p >{tablePosition.position}</p>
                    <img src="{tablePosition.team.data.logo_path}" alt="" >
                    <p >{tablePosition.team_name}</p>
                </div>

                <div >
                    <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 >{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 :)

CodePudding user response：

It looks like you are using the writable store from Svelte, which means that the data in the store will be reset whenever the component is re-rendered. This is why the data disappears when you refresh the page.

One way to fix this is to use the derived store from Svelte, which allows you to create a store that is derived from other stores. This way, you can ensure that the data in the store is not reset when the component is re-rendered.

Here is how you can modify your code to use a derived store:

import { writable } from "svelte/store";
import { derived } from "svelte/store";

// Create a writable store to store the league standings data
const leagueStandingsData = writable([]);

// Create a derived store to flatten the data from the leagueStandingsData store
export const leagueStandings = derived(leagueStandingsData, $leagueStandingsData => {
    return $leagueStandingsData.flatMap(({ standings: { data } }) => data);
});

// Function to fetch the league standings data and update the leagueStandingsData store
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();
    leagueStandingsData.set(data.data);
}

// Fetch the data when the component is mounted
fetchStandings();

Now, in your component, you can use the leagueStandings store to access the flattened data, like this:

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

// Access the flattened data from the leagueStandings store
const tablePositions = $leagueStandings;
</script>

<!-- Use the tablePositions variable to render the standings table -->
<div >
    {#each tablePositions as tablePosition}
        <div >
            <div  id="td">
                <p >{tablePosition.position}</p>
                <img src="{tablePosition.team.data.logo_path}" alt="" >
                <p >{tablePosition.team_name}</p>
            </div>

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

CodePudding user response：

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