Invalidation and reloading in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Svelte store is invalidated?

Consider a Svelte component that subscribes to a writable store. What is the immediate effect on the component when the store's value is invalidated using invalidate()?

Svelte

import { writable } from 'svelte/store';
const count = writable(0);

// Somewhere in the component
count.set(1);
// invalidate('count'); // <-- invalidate() is not a method on writable stores

A The store throws an error because invalidate() is not a valid method on writable stores.

B The store value resets to its initial value automatically without any update in the component.

C The component stops subscribing to the store and no longer updates on changes.

D The component re-runs its reactive statements and updates the DOM with the latest store value.

💡 Hint

Think about what invalidate() triggers in Svelte's reactive system.

Calling invalidate() marks the store as needing update, causing components that depend on it to re-run reactive code and update the DOM accordingly.

❓ state_output

intermediate

What is the output after invalidation and reload in a SvelteKit page?

Given a SvelteKit page with a load function that fetches data, what will be the displayed value after calling invalidate('path')?

Svelte

export async function load({ fetch }) {
  const res = await fetch('/api/data');
  const data = await res.json();
  return { props: { data } };
}

// In the component
<script>
  import { invalidate } from '$app/navigation';
  let count = 0;
  function refresh() {
    invalidate('/api/data');
    count += 1;
  }
</script>
<button on:click={refresh}>Refresh {count}</button>
<p>{JSON.stringify(data)}</p>

A The page does not fetch new data; the displayed JSON remains the same after clicking refresh.

B The page fetches fresh data from '/api/data' and updates the displayed JSON accordingly.

C The page reloads completely, losing the current state including the count variable.

D An error occurs because invalidate cannot be called with an API path.

💡 Hint

Invalidate triggers a reload of the data for the specified path.

Calling invalidate('/api/data') tells SvelteKit to re-run the load function for that path, fetching fresh data and updating the component.

📝 Syntax

advanced

Which code snippet correctly invalidates a SvelteKit page data?

Choose the correct way to invalidate the data of the current page in SvelteKit.

A

import { invalidate } from '$app/navigation';

await invalidate();

B

import { invalidate } from '$app/navigation';

await invalidate(window.location.pathname);

C

import { invalidate } from '$app/navigation';

await invalidate('/current-page');

D

import { invalidate } from '$app/navigation';

await invalidate('/api/data');

💡 Hint

Think about how to specify the current page path dynamically.

To invalidate the current page data, you must pass the current path as a string. Using window.location.pathname dynamically gets the current path.

🔧 Debug

advanced

Why does this SvelteKit invalidate call not reload data?

Given this code snippet, why does calling invalidate('/api/data') not cause the page to reload fresh data?

Svelte

import { invalidate } from '$app/navigation';

async function refresh() {
  await invalidate('/api/data');
}

// load function
export async function load({ fetch }) {
  const res = await fetch('/api/data');
  const data = await res.json();
  return { props: { data } };
}

A Because the load function does not return data in the correct format for invalidation.

B Because invalidate requires a full URL including protocol and domain to work correctly.

C Because '/api/data' is an API endpoint, not a page route, invalidate does not trigger load to run again.

D Because invalidate only works on client-side stores, not on load functions.

💡 Hint

Consider what paths invalidate expects to reload.

Invalidate triggers reloading of page routes, not API endpoints. Since '/api/data' is an API route, invalidating it does not cause the page's load function to run again.

🧠 Conceptual

expert

How does SvelteKit handle invalidation and reloading for nested layouts?

In a SvelteKit app with nested layouts, what happens when you call invalidate() on a parent layout's path?

A The entire app reloads from scratch, losing all client-side state.

B Only the parent layout reloads; child layouts and pages keep their current data without reloading.

C No layouts reload; invalidate only works on leaf page routes, not layouts.

D All child layouts and pages under that parent path reload their data by re-running their load functions.

💡 Hint

Think about how SvelteKit cascades data loading in nested routes.

Invalidating a parent layout path causes SvelteKit to re-run load functions for that layout and all nested child layouts and pages, updating their data accordingly.