Within my SvelteKit application, I am utilizing AJAX calls to interact with my API endpoints. An example of this can be seen in the following code snippet:
+page.svelte
<script>
async function get_card() {
const url = '/api/card/?category=' + $page.params.slug;
const response = await fetch(url, {
method: 'GET',
})
const card = await response.json();
return card;
}
</script>
Upon examining the browser's JavaScript console, a warning is displayed:
Loading /api/card/?category=Neurology using `window.fetch`.
For optimal results, it is recommended to use the `fetch` provided within your `load`
function: https://kit.svelte.dev/docs/load#making-fetch-requests
Despite this, it seems that the `fetch` function mentioned is only accessible on the server side, making it challenging to utilize in scripts that may run on the client side (such as +page.svelte). One attempt was made to pass the function as part of the data object from the load function:
+layout.server.js
export const load = async ({ fetch, locals }) => {
return {
email: locals.user.email,
group: locals.user.group,
fetch: fetch
}
}
Unfortunately, this approach proved unsuccessful as the function is not serializable.
Is there a better way to approach this issue, or should I simply disregard the warning message?