mirror of
https://github.com/strapi/strapi.git
synced 2025-07-22 00:17:15 +00:00
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
534 lines
10 KiB
Markdown
534 lines
10 KiB
Markdown
# Getting Started with Svelte
|
||
|
||
This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants).
|
||
|
||
If you haven't gone through the getting started guide, the way you request a Strapi API with [Svelte](https://svelte.dev) 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:
|
||
|
||
```bash
|
||
npx degit sveltejs/template svelte-app
|
||
```
|
||
|
||
### Use an HTTP client
|
||
|
||
Many HTTP clients are available but in this documentation we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
|
||
|
||
:::: tabs
|
||
|
||
::: tab axios
|
||
|
||
```bash
|
||
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_
|
||
|
||
```js
|
||
import axios from 'axios';
|
||
|
||
axios.get('http://localhost:1337/restaurants').then(response => {
|
||
console.log(response);
|
||
});
|
||
```
|
||
|
||
:::
|
||
|
||
::: tab fetch
|
||
|
||
_Request_
|
||
|
||
```js
|
||
fetch('http://localhost:1337/restaurants', {
|
||
method: 'GET',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => console.log(data));
|
||
```
|
||
|
||
:::
|
||
|
||
_Response_
|
||
|
||
```json
|
||
[
|
||
{
|
||
"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`
|
||
|
||
```js
|
||
<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`
|
||
|
||
```js
|
||
<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_
|
||
|
||
```js
|
||
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_
|
||
|
||
```js
|
||
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_
|
||
|
||
```json
|
||
{
|
||
"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`
|
||
|
||
```js
|
||
<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`
|
||
|
||
```js
|
||
<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_
|
||
|
||
```js
|
||
import axios from 'axios';
|
||
|
||
axios
|
||
.put('http://localhost:1337/restaurants/2', {
|
||
categories: [2],
|
||
})
|
||
.then(response => {
|
||
console.log(response);
|
||
});
|
||
```
|
||
|
||
:::
|
||
|
||
::: tab fetch
|
||
|
||
_Request_
|
||
|
||
```js
|
||
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_
|
||
|
||
```json
|
||
{
|
||
"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](https://svelte.dev/tutorial/basics).
|