34f143827c
* 5 new integrations * More integrations Signed-off-by: Maxime Castres <mcastres@student.42.fr> * AUpdate Nuxt.js --amend --signoff * Add 11ty Signed-off-by: Maxime Castres <mcastres@student.42.fr> * Correction after soupette's review * Correct python file * Alex review * Alex review 2: replace console.error to log
10 KiB
Getting Started with Svelte
This integration guide is following the Getting started guide. We assume that you have completed Step 8 and therefore can consume the API by browsing this url.
If you haven't gone through the getting started 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.
:::: tabs
::: tab axios
yarn add axios
:::
::: tab fetch
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.
:::: tabs
::: tab axios
Request
import axios from 'axios';
axios.get('http://localhost:1337/restaurants').then(response => {
console.log(response);
});
:::
::: tab fetch
Request
fetch('http://localhost:1337/restaurants', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data));
:::
Response
[
{
"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
:::: tabs
::: tab axios
./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/restaurants');
restaurants = res.data
} catch (e) {
error = e
}
});
</script>
{#if error !== null}
{error}
{:else}
<ul>
{#each restaurants as restaurant}
<li>
{restaurant.name}
</li>
{/each}
</ul>
{/if}
:::
::: tab fetch
./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/restaurants", {
method: "GET",
headers: {
'Content-Type': 'application/json'
},
}).then(checkStatus)
.then(parseJSON);
restaurants = res
} catch (e) {
error = e
}
});
</script>
{#if error !== null}
{error}
{:else}
<ul>
{#each restaurants as restaurant}
<li>
{restaurant.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 fot the category Collection type.
In this example a japanese category has been created which has the id: 3.
:::: tabs
::: tab axios
Request
import axios from 'axios';
axios
.post('http://localhost:1337/restaurants', {
name: 'Dolemon Sushi',
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
categories: [3],
})
.then(response => {
console.log(response);
});
:::
::: tab fetch
Request
fetch('http://localhost:1337/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));
:::
Response
{
"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
:::: tabs
::: tab axios
./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/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/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}
:::
::: tab fetch
./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/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/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.
:::: tabs
We consider that the id of your restaurant is 2.
and the id of your category is 2.
::: tab axios
Request
import axios from 'axios';
axios
.put('http://localhost:1337/restaurants/2', {
categories: [2],
})
.then(response => {
console.log(response);
});
:::
::: tab fetch
Request
fetch('http://localhost:1337/restaurants/2', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
categories: [2],
}),
})
.then(response => response.json())
.then(data => {
console.log(data);
});
:::
Response
{
"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"
}
]
}
::::
Conclusion
Here is how to request your Collection Types in Strapi using Svelte. Learn more about Svelte with their official tutorial.