SvelteKit Stores

[00:00:00]
>> Stores are a way of storing data that doesn't belong to an individual component. And SvelteKit makes a few read only stores available to your application via the app/stores module. We have the page store, the navigating store, and the updating store. And the one that you'll use most of the time is the page store.

[00:00:20]
Provides information about the current page such as the URL, the params object that we've already seen in our load functions and our API route handlers. A route object with an ID property that represents the current route. So for example, inside about /page.svelte, the root ID is /about. The HTTP status code of the current page, the error object of the current page if there is one, we'll learn about that later.

[00:00:48]
The data prop and the form prop that combines all of the data from all of the layout functions and the page data. And so just like with any other store in Svelte, you can reference its value inside a component by prefixing its name with the dollar symbol. So for example, we can access the current path name as dollar page dot URL dot path name.

[00:01:11]
So in our layout.svelte component here, let's add a script block. And we're gonna import the page store, From $app/stores. And now, inside our nav element, we're going to add an aria current attribute to indicate which of these pages is currently active. I'm just gonna copy that for the about page, then update this bit.

[00:01:57]
If we reload the page and navigate between these two links, we'll see that the aria-current attribute is updating when we navigate, and we have some CSS that is targeting that attribute. The navigating store represents the current navigation. And so when a navigation starts, whether that's because of a link click, or a back forward navigation, or a programmatic go to.

[00:02:28]
The value of navigation will become an object with some properties. We have from and to, these are things with a params object, the route object, and the url. We'll also have a navigation type, which can be link, or pop state or go to. And if you wanna see the complete type information for the navigation object, you can look that up on the SvelteKit documentation site.

[00:02:55]
We can use this store to show a loading navigation, a loading indicator for long-running navigations. So in this exercise in our page server.js, and in our about page server.js, we have these artificial delays, it's gonna take a full second to navigate between these pages. We can see that if we click, it's gonna take a whole second before that updates.

[00:03:26]
So inside our layout Svelte where the navigation is defined, I'm gonna bring in the navigating store. And then we're gonna add some UI indicating what's going on. By the way, this URL object here, this is the web standard URL constructor. It's a super useful object that you'll interact with a lot when you're building SvelteKit apps.

[00:04:11]
So I recommend getting comfortable with this page of MDN. Okay, so now when we navigate between these pages. We see that we get a little indication on the right-hand side telling us what's happening. So more typically, you would use this to have some kind of a progress indicator and so on.

[00:04:33]
This is actually one of the issues that you get with a single-page app. There is no direct feedback when you navigate between pages, you're kind of relying on the navigation to be fast enough that it doesn't matter. But there is gonna be a brand-new navigation API landing in browsers fairly soon, which will allow us to control the refresh icon that starts spinning, when you have a traditional navigation between pages.

[00:05:00]
We'll be able to use that in single page apps too. But for now, it's a good practice to have some kind of loading indicator in your single page app UI. Okay, and finally, the updated store contains a value of true or false depending on whether a new version of the app has been deployed since the page was first opened.

[00:05:25]
And for this to work, you need to add some configuration to your SvelteConfig.js file. Specifically, you need to add this version object with a name, which changes when your application is redeployed. Right now, we're just using date.now toString, which is the default value, but ideally, you should use something like the current commit hash, so that your deploys are consistent.

[00:05:48]
And you also need to add a poll interval, I've got five seconds here. This is what SvelteKit is gonna use to check whether the version has changed while the page is open. Now, version changes only happen in production, they don't happen during development. For that reason, updated is always gonna be false in this tutorial.

[00:06:13]
But we can imagine, for example, that you would have something like a toast that appears when the updated store changes from false to true. You can use this in other ways. For example, if you have a very long-running session, and the application is redeployed while the user has the app open, then that can break navigations.

[00:06:36]
Because you might try to fetch the code for a new page, and discover that all of the hashes have changed, and so we're unable to import the relevant modules. And in that case, SvelteKit will fall back to a full page navigation, so usually we're able to recover without the user noticing that anything went wrong.

[00:06:56]
But it can be nice to proactively tell the user that the application has updated or even to disable the router altogether, so that we don't need to have that error handling logic.