Getting Started with Svelte
This integration guide follows the Quick Start Guide and assumes you have you have fully completed the "Hands-on" path. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.
If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Svelte remains the same except that you will not fetch the same content.
Create a Svelte app
First, install Degit by running npm install -g degit
in your command-line interface (CLI).
“Degit makes copies of Git repositories and fetches the latest commit in the repository. This is a more efficient approach than using git clone, because we’re not downloading the entire Git history.”
Create a basic Svelte application using webpack:
npx degit sveltejs/template svelte-app
Use an HTTP client
Many HTTP clients are available but in this documentation we'll use Axios and Fetch.
- axios
- fetch
yarn add axios
No installation needed
GET Request your collection type
Execute a GET
request on the restaurant
collection type in order to fetch all your restaurants.
Be sure that you activated the find
permission for the restaurant
collection type.
- axios
- fetch
import axios from 'axios';
axios.get('http://localhost:1337/api/restaurants').then(response => {
console.log(response);
});
fetch('http://localhost:1337/api/restaurants', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data));
[
{
"id": 1,
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"created_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"updated_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"created_at": "2020-07-31T11:37:16.964Z",
"updated_at": "2020-07-31T11:37:16.975Z",
"categories": [
{
"id": 1,
"name": "French Food",
"created_by": 1,
"updated_by": 1,
"created_at": "2020-07-31T11:36:23.164Z",
"updated_at": "2020-07-31T11:36:23.172Z"
}
]
}
]
Example
- axios
- fetch
./src/App.svelte
<script>
import { onMount } from 'svelte';
import axios from 'axios'
let restaurants = [];
let error = null
onMount(async () => {
try {
const res = await axios.get('http://localhost:1337/api/restaurants');
restaurants = res.data.data
} catch (e) {
error = e
}
});
</script>
{#if error !== null}
{error}
{:else}
<ul>
{#each restaurants as restaurant}
<li>
{restaurant.attributes.name}
</li>
{/each}
</ul>
{/if}
./src/App.svelte
<script>
import { onMount } from 'svelte';
let restaurants = [];
let error = null
onMount(async () => {
const parseJSON = (resp) => (resp.json ? resp.json() : resp);
const checkStatus = (resp) => {
if (resp.status >= 200 && resp.status < 300) {
return resp;
}
return parseJSON(resp).then((resp) => {
throw resp;
});
};
const headers = {
'Content-Type': 'application/json',
};
try {
const res = await fetch("http://localhost:1337/api/restaurants", {
method: "GET",
headers: {
'Content-Type': 'application/json'
},
}).then(checkStatus)
.then(parseJSON);
restaurants = res.data.data
} catch (e) {
error = e
}
});
</script>
{#if error !== null}
{error}
{:else}
<ul>
{#each restaurants as restaurant}
<li>
{restaurant.attributes.name}
</li>
{/each}
</ul>
{/if}
POST Request your collection type
Execute a POST
request on the restaurant
collection type in order to create a restaurant.
Be sure that you activated the create
permission for the restaurant
collection type and the find
permission for the category
Collection type.
In this example a japanese
category has been created which has the id: 3.
- axios
- fetch
import axios from 'axios';
axios
.post('http://localhost:1337/api/restaurants', {
name: 'Dolemon Sushi',
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
categories: [3],
})
.then(response => {
console.log(response);
});
fetch('http://localhost:1337/api/restaurants', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Dolemon Sushi',
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
categories: [3],
}),
})
.then(response => response.json())
.then(data => console.log(data));
{
"id": 2,
"name": "Dolemon Sushi",
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
"created_by": null,
"updated_by": null,
"created_at": "2020-08-04T09:57:11.669Z",
"updated_at": "2020-08-04T09:57:11.669Z",
"categories": [
{
"id": 3,
"name": "Japanese",
"created_by": 1,
"updated_by": 1,
"created_at": "2020-07-31T11:36:23.164Z",
"updated_at": "2020-07-31T11:36:23.172Z"
}
]
}
Example
- axios
- fetch
./src/App.svelte
<script>
import { onMount } from 'svelte';
import axios from 'axios'
let allCategories = [];
let restaurantName = "";
let restaurantDescription = "";
let restaurantCategories = [];
let error = null;
async function handleSubmit() {
try {
const response = await axios.post('http://localhost:1337/api/restaurants', {
name: restaurantName,
description: restaurantDescription,
categories: restaurantCategories
});
console.log(response);
} catch(e) {
error = e
}
}
onMount(async () => {
try {
const response = await axios.get('http://localhost:1337/api/categories');
allCategories = response.data
} catch(e) {
error = e
}
});
</script>
{#if error !== null}
{error}
{:else}
<label for="name">Name</label>
<input id="name" bind:value={restaurantName} type="text" name="name">
<label for="description">Description</label>
<input id="description" bind:value={restaurantDescription} type="text" name="description">
<div>
<br />
Select categories
<br />
{#each allCategories as category}
<label>{ category.name }</label>
<input type="checkbox" bind:group={restaurantCategories} value={category} />
{/each}
</div>
<input type="submit" value="Submit" on:click={handleSubmit} />
{/if}
./src/App.svelte
<script>
import { onMount } from 'svelte';
import axios from 'axios'
let allCategories = [];
let restaurantName = "";
let restaurantDescription = "";
let restaurantCategories = [];
let error = null;
const parseJSON = (resp) => (resp.json ? resp.json() : resp);
const checkStatus = (resp) => {
if (resp.status >= 200 && resp.status < 300) {
return resp;
}
return parseJSON(resp).then((resp) => {
throw resp;
});
};
const headers = {
'Content-Type': 'application/json',
};
async function handleSubmit() {
try {
await fetch('http://localhost:1337/api/restaurants', {
method: "POST",
headers: headers,
body: JSON.stringify({
name: restaurantName,
description: restaurantDescription,
categories: restaurantCategories
})
})
.then(checkStatus)
.then(parseJSON);
} catch (e) {
error = e
}
}
onMount(async () => {
try {
const res = await fetch("http://localhost:1337/api/categories", {
method: "GET",
headers: headers,
}).then(checkStatus)
.then(parseJSON);
allCategories = res
} catch (e) {
error = e
}
});
</script>
{#if error !== null}
{error}
{:else}
<label for="name">Name</label>
<input id="name" bind:value={restaurantName} type="text" name="name">
<label for="description">Description</label>
<input id="description" bind:value={restaurantDescription} type="text" name="description">
<div>
<br />
Select categories
<br />
{#each allCategories as category}
<label>{ category.name }</label>
<input type="checkbox" bind:group={restaurantCategories} value={category} />
{/each}
</div>
<input type="submit" value="Submit" on:click={handleSubmit} />
{/if}
PUT Request your collection type
Execute a PUT
request on the restaurant
collection type in order to update the category of a restaurant.
Be sure that you activated the put
permission for the restaurant
collection type.
We consider that the id of your restaurant is 2
.
and the id of your category is 2
.
- axios
- fetch
import axios from 'axios';
axios
.put('http://localhost:1337/api/restaurants/2', {
categories: [2],
})
.then(response => {
console.log(response);
});
fetch('http://localhost:1337/api/restaurants/2', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
categories: [2],
}),
})
.then(response => response.json())
.then(data => {
console.log(data);
});
{
"id": 2,
"name": "Dolemon Sushi",
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
"created_by": null,
"updated_by": null,
"created_at": "2020-08-04T10:21:30.219Z",
"updated_at": "2020-08-04T10:21:30.219Z",
"categories": [
{
"id": 2,
"name": "Brunch",
"created_by": 1,
"updated_by": 1,
"created_at": "2020-08-04T10:24:26.901Z",
"updated_at": "2020-08-04T10:24:26.911Z"
}
]
}