Invalidation and reloading in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to invalidate the data store in SvelteKit.

Svelte

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

async function refresh() {
  await [1]('/api/data');
}

Drag options to blanks, or click blank then click option'

Areload

Binvalidate

Cfetch

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reload' instead of 'invalidate' causes errors.

Trying to call 'fetch' directly without invalidation.

The invalidate function tells SvelteKit to reload data from the given URL.

2fill in blank

medium

Complete the code to reload the current page programmatically in SvelteKit.

Svelte

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

function reloadPage() {
  goto(window.location.href, { [1]: true });
}

Drag options to blanks, or click blank then click option'

Areload

BinvalidateAll

CreplaceState

DreloadAll

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'replaceState' which is not a valid option here.

Trying to use 'invalidateAll' which does not exist.

The goto function with reload: true reloads the current page fully.

3fill in blank

hard

Fix the error in the code to invalidate multiple URLs in SvelteKit.

Svelte

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

async function refreshAll() {
  await Promise.all([
    invalidate('/api/data1'),
    [1]('/api/data2')
  ]);
}

Drag options to blanks, or click blank then click option'

Ainvalidate

Breload

Cfetch

Drefresh

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reload' or 'refresh' which are not valid functions here.

Using 'fetch' which does not trigger SvelteKit invalidation.

To invalidate multiple URLs, call invalidate for each URL inside Promise.all.

4fill in blank

hard

Fill both blanks to create a reactive statement that invalidates data when the variable changes.

Svelte

<script>
  import { invalidate } from '$app/navigation';
  let count = 0;

  $: if (count > 0) {
    [2] [1]('/api/count');
  }
</script>

Drag options to blanks, or click blank then click option'

Ainvalidate

Bawait

Cinvalidate('/api/count')

Dinvalidate('/api/data')

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the full call in the first blank instead of just the function name.

Not using 'await' causing the invalidation to run without waiting.

The reactive statement calls invalidate with the URL and uses await to wait for it.

5fill in blank

hard

Fill all three blanks to create a function that invalidates data and then navigates to a new page.

Svelte

<script>
  import { invalidate, goto } from '$app/navigation';

  async function updateAndGo() {
    await [1]('/api/update');
    [2]('/new-page', { [3]: true });
  }
</script>

Drag options to blanks, or click blank then click option'

Ainvalidate

Bgoto

Creload

Drefresh

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'refresh' instead of 'invalidate' or 'reload'.

Omitting 'await' before invalidate causing race conditions.

First, invalidate reloads the data, then goto navigates with reload: true to force a full page reload.