Using fetch with SvelteKit, you can pull data from your server endpoints ahead of rendering a page or contact external server endpoints from your own server code. As well as that you can contact external server endpoints from client code, perhaps to submit form data or even to get fresh data for refreshing the user interface. In this video we break down those three main use cases and also look at how fetch HTTP requests differ from axios calls. fetch is baked in to SvelteKit so I like to use it in SvelteKit projects.
Hopefully this video will spark some ideas for a new SvelteKit pet project. If that is what you have in mind, listen out for the more in-depth tutorials mentioned in the video. It is my intention that these give you some inspiration, providing launch sites you might base your new projects off. Anyway, I hope this topic is one you will find interesting and look forward to hearing all the questions it generates.
Apologies for the quality of the audio in the video.
As mentioned in the video, this code is simplified to elaborate the point.
- Svelte eCommerce Site: how to build a fast, SEO friendly, static eCommerce site using Svelte, Snipcart and Directus ,
- Starting out Svelte and SvelteKit tutorial: build a practical design tool app in this tutorial as you start the journey from beginner to pro Svelte ,
- Get Stared with SvelteKit Headless WordPress tutorial: build an SEO optimised static content site with Svelte speed and Yoast SEO expertise .
- MDN fetch API docs ,
- HTTP method docs from MDN ,
- MDN authorisation header docs ,
- official Svelte tutorial on await blocks .
- Twitter handle: @askRodney .
- SvelteKit runs load functions before rendering a client page. That makes them the ideal place to pull in data from your server endpoint in many cases. fetch is available whether your load function is in a +page.js or a +page.server.js (and TypeSciprt equivalents). Take a look at video for a real-life use case.
- It might make sense to use fetch over axios in SvelteKit projects as fetch is already included. That said, there are a few differences, although for the most part, axios and fetch work in the same way. With axios, you can send objects in the data field and they are converted to a string automatically by the package, ready for including in the request. With fetch you just wrap your object in a JSON.stringify() call and it goes in the body field, rather than data. A second difference is in accessing JSON received in a response. With axios the object is accessible via the data field on the resolved promised that is returned by the initial axios call. With fetch you access the data by calling a json() method on the resolved promise. That method call itself returns a new promise, so be sure to let it resolve before attempting to read the embedded JSON.
- In Svelte, await blocks are a tidy little way of displaying data received in a promise. Promises are used when a result cannot be returned immediately. A classic example is fetching data from an external API which is not normally immediate. The promise is kind of a placeholder returned initially while the requested data is still on its way. The await block in Svelte has three arms. The first it for what you display while you wait for the promise to resolve. You might show a loading indicator or alternatively any available, albeit, stale data. The second arm is used for the content which you want to show once the promise resolves. As you would expect, you can access the promise result here and use it in whatever you render. Finally, we have an optional catch arm. We use this when the promise fails to resolve. You might show a “try again later” message or just the previously available data.
If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.