How do you use fetch in SvelteKit client page load functions?

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 TypeScript equivalents). Have a look at the video for a real-life use case.

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 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.

Using fetch with SvelteKit: Get Data from an API # Using fetch with SvelteKit: Get Data from an API #

Using fetch with SvelteKit: Get Data from an API #

Published: 2 years ago

5 minute read Gunning Fog Index: 6.1 2 comments

Content by Rodney

🖥 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 #

Apologies for the quality of the audio in the video.

Please enable JavaScript to watch the video 📼

Using fetch with SvelteKit: Call APIs and Server Endpoints

🗳 Poll #

Are you most familiar with using axios, fetch or jQuery.ajax?

🖥 Using fetch with SvelteKit: Code #

Server: Calling fetch in a SvelteKit Load function #

src/routes/+page.server.ts

typescript

    1 export const load: PageServerLoad = async () => {
2 	try {
3 		const variables: QueryLatestArgs = {
4 			baseCurrency: 'EUR',
5 			quoteCurrencies: ['CAD', 'GBP', 'IDR', 'INR', 'USD']
6 		};
7 
8 		const response = await fetch('https://swop.cx/graphql', {
9 			method: 'POST',
10 			headers: {
11 				'Content-Type': 'application/json',
12 				Authorization: `ApiKey ${SWOP_API_KEY}`
13 			},
14 			body: JSON.stringify({
15 				query,
16 				variables
17 			})
18 		});
19 
20 		const { data: responseData }: { data: Query } = await response.json();
21 
22 		return { ...responseData };
23 	} catch (error) {
24 		console.error(`Error in load function for /: ${error}`);
25 	}
26 };

Server: Calling fetch in a SvelteKit Action function #

src/routes/+page.server.ts

typescript

    1 export const actions: Actions = {
2 	default: async ({ request }) => {
3 		try {
4 			const form = await request.formData();
5 			const currency = form.get('currency');
6 
7 			if (typeof currency === 'string') {
8 				const variables: QueryLatestArgs = {
9 					baseCurrency: 'EUR',
10 					quoteCurrencies: [currency]
11 				};
12 
13 				const response = await fetch('https://swop.cx/graphql', {
14 					method: 'POST',
15 					headers: {
16 						'Content-Type': 'application/json',
17 						Authorization: `ApiKey ${SWOP_API_KEY}`
18 					},
19 					body: JSON.stringify({
20 						query,
21 						variables
22 					})
23 				});
24 
25 				const responseData: { data: Query } = await response.json();
26 				const rate = responseData.data.latest[0];
27 
28 				return { rate };
29 			}
30 			return undefined;
31 		} catch (err: unknown) {
32 			const message = `Error in /login form: ${err as string}`;
33 			console.error(message);
34 			return error(500, message);
35 		}
36 	}
37 };

Calling fetch from Svelte Client Code #

As mentioned in the video, this code is simplified to elaborate the point.

src/routes/+page.svelte

svelte

    1 <script lang="ts">
2 	async function colourName(colourHex: string): Promise<string> {
3 		const response = await fetch(`https://www.thecolorapi.com/id?hex=${colourHex.slice(1)}`);
4 		const {
5 			name: { value: name }
6 		} = await response.json();
7 		return name;
8 	}
9 </script>
10 
11 <div class="colour-code">
12 	{#await colourName(hex)}
13 		...
14 	{:then name}
15 		{`${name}: `}
16 	{/await}
17 </div>

🔗 Using fetch with SvelteKit: Links #

Plus Tutorials #

Free Tutorials and Full Code #

Complete tutorial on using fetch in SvelteKit code, plus using fetch to query a GraphQL API.

Docs #

Reaching Out #

Twitter handle: @askRodney .

🏁 Using fetch with SvelteKit: Summary #

How do you use fetch in SvelteKit client page load functions? #: 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 TypeScript equivalents). Have a look at the video for a real-life use case.
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 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.

🙏🏽 Feedback #

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 updated the video on using fetch with ♥️ Svelte to include the new routing API and also a Form Action example.

We cover both SSR and static apps.

Hope you find it useful!

#askRodney #sveltejs #sveltekit https://t.co/RZrOi1zxEX
— Rodney (@askRodney) October 10, 2022

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 Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.