🖥 The fetch API and SvelteKit
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.
📹 Using fetch with SvelteKit: Video
🖥 Using fetch with SvelteKit: Code
Frontend: Calling fetch in a SvelteKit Load function
Calling fetch in a SvelteKit Server Endpoint
Frontend: Using a Svelte Store to Update User Interface with fetch Data
Frontend: Using a Svelte await Block to Update User Interface with fetch Data
🔗 Using fetch with SvelteKit: Links
Videos, Tutorials and Sample Code
- Complete tutorial on using fetch in SvelteKit code plus using fetch to query a GraphQL API,
- how to use the fetch PUT method to upload images to cloud storage in SvelteKit and Basic Authorization header construction,
- using a Svelte store to update the user interface after getting fresh data with fetch,
- using a Svelte await block to update the user interface after getting fresh data with fetch .
- MDN fetch API docs ,
- HTTP method docs from MDN ,
- MDN authorisation header docs ,
- official Svelte tutorial on await blocks .
- Twitter handle: @askRodney .
🏁 Using fetch with SvelteKit: Summary
How do you use fetch in SvelteKit client page load functions?
How is the fetch API different to using axios?
- 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.
How do await blocks work in Svelte?
- In Svelte, await blocks are a tidy little way of displaying data recived 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 notmally immediate. The promise is kind of a placeholder returned intially 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.
Just put together something on how you can use fetch (included 'for free') in SvelteKit. Fetch lets us— Rodney (@askRodney) November 22, 2021
- pull data from server endpoints just before we render pages,
- get data from external API in server endpoints,
- update UI with fresh data (from external API or the server). pic.twitter.com/vh2UnixbLv
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.