Sapper is not reloading data when hitting link

Question

I’m building a site using sapper and requesting data from an API. It has been working smooth until now.

When I’m going from site.com/title/id1 to site.com/title/id2 the new information is not loaded until I hit a manual refresh. Any ideas?

import { stores, goto } from "@sapper/app";
import Card from "../_titlecard.svelte";

const { page } = stores();
const { slug } = $page.params;

import { onMount } from "svelte";
let looper = [];
let artistName = "";
let titleName = "";
let dvdCover = "";
let titleCover = "";
let genre = "";
let tracks = [];
onMount(async () => {
  const res = await fetch(`https://.com/api/title/${slug}`);

  const data = await res.json();

  artistName = data.artistName;
  titleName = data.name;
  dvdCover = data.graphics.dvd;
  titleCover = data.graphics.landscape;
  genre = data.genre;
  tracks = data.tracks.length;

  const res2 = await fetch(`https://.com/api/artists/all`);
  const data2 = await res2.json();

  let moreTitles = [];
  const more = data2.map((x) => {
    if (x.titles.length > 0 && x.genre === genre) {
      looper.push(x.titles[0]);

      looper = moreTitles;
    }
  });
});

And then I have this in the html

{#each looper.slice(0, 4) as item, i} 
  <Card imgurl={item.graphics.dvd} concert={item.name} id={item.id} />
{/each}

Answer 1

A page component is not unmounted and mounted again if the navigation results in the same page component being used, so your onMount will only be run once with the first id.

You could use a reactive statement to make sure you run the desired code every time $page.params.slug changes.

Example

import { stores, goto } from "@sapper/app";
import Card from "../_titlecard.svelte";
const { page } = stores();

let looper = [];
let artistName = "";
let titleName = "";
let dvdCover = "";
let titleCover = "";
let genre = "";
let tracks = [];

$: (async () => {
  const { slug } = $page.params;

  const res = await fetch(`https://.com/api/title/${slug}`);
  const data = await res.json();

  artistName = data.artistName;
  titleName = data.name;
  dvdCover = data.graphics.dvd;
  titleCover = data.graphics.landscape;
  genre = data.genre;
  tracks = data.tracks.length;

  const res2 = await fetch(`https://.com/api/artists/all`);
  const data2 = await res2.json();

  let moreTitles = [];
  data2.forEach((x) => {
    if (x.titles.length > 0 && x.genre === genre) {
      moreTitles.push(x.titles[0]);
    }
  });

  looper = moreTitles;
})();