From 24f3486e4b6c6e0a6f4f04410a36cd13e1a6418f Mon Sep 17 00:00:00 2001 From: Guillaume Girou Date: Mon, 23 May 2022 17:23:47 +0200 Subject: [PATCH] Update 11ty.md with Strapi v4 --- .../content-api/integrations/11ty.md | 186 +++++++++--------- 1 file changed, 97 insertions(+), 89 deletions(-) diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/11ty.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/11ty.md index 62261db05a..b47115f60c 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/11ty.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/11ty.md @@ -6,8 +6,6 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/developer-resources/c # Getting Started with 11ty -!!!include(developer-docs/latest/developer-resources/content-api/snippets/integration-guide-not-updated.md)!!! - This integration guide is following the [Quick Start Guide](/developer-docs/latest/getting-started/quick-start.md). We assume that you have fully completed its "Hands-on" path, and therefore can consume the API by browsing this [url](http://localhost:1337/api/restaurants). If you haven't gone through the Quick Start Guide, the way you request a Strapi API with [11ty](https://www.11ty.dev/) remains the same except that you will not fetch the same content. @@ -70,7 +68,7 @@ npx @11ty/eleventy ``` -- Create a `./src/index.md`, `./src/restaurant.md` and a `./src/categorie.md` file. They will define how you'll present the data. +- Create a `./src/index.md`, `./src/restaurant.md` and a `./src/category.md` file. They will define how you'll present the data. - Create a `.eleventy.js` file containing the following (make sure to prefix the file's name with the dot): ```js @@ -139,7 +137,7 @@ const { default: axios } = require('axios'); module.exports = async () => { try { - const res = await axios.get('http://localhost:1337/api/restaurants'); + const res = await axios.get('http://localhost:1337/api/restaurants?populate=*'); return res.data; } catch (error) { console.error(error); @@ -151,37 +149,41 @@ module.exports = async () => { :::response Example 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" - } - ] - } -] +{ + "data": [ + { + "id": 1, + "attributes": { + "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.", + "createdAt": "2022-05-23T09:41:46.762Z", + "updatedAt": "2022-05-23T09:44:32.424Z", + "publishedAt": "2022-05-23T09:44:32.423Z", + "categories": { + "data": [ + { + "id": 2, + "attributes": { + "name": "Brunch", + "createdAt": "2022-05-23T09:42:16.764Z", + "updatedAt": "2022-05-23T09:44:21.534Z", + "publishedAt": "2022-05-23T09:44:21.532Z" + } + } + ] + } + } + } + ], + "meta": { + "pagination": { + "page": 1, + "pageSize": 25, + "pageCount": 1, + "total": 1 + } + } +} ``` ::: :::: @@ -195,7 +197,7 @@ const { default: axios } = require('axios'); module.exports = async () => { try { - const res = await axios.get('http://localhost:1337/api/restaurants'); + const res = await axios.get('http://localhost:1337/api/restaurants?populate=*'); return res.data; } catch (error) { console.error(error); @@ -210,7 +212,7 @@ module.exports = async () => { title: Restaurants layout: default.liquid pagination: - data: restaurants + data: restaurants.data size: 100 alias: restaurants --- @@ -219,7 +221,7 @@ pagination: ``` @@ -231,21 +233,21 @@ pagination: title: Restaurant layout: default.liquid pagination: - data: restaurants + data: restaurants.data size: 1 alias: restaurant - permalink: 'restaurants/{{ restaurant.id }}/' +permalink: 'restaurants/{{ restaurant.id }}/' --- -# {{ restaurant.name }} +# {{ restaurant.attributes.name }} -{{ restaurant.description }} +{{ restaurant.attributes.description }} ## Categories -{% for category in restaurant.categories %} +{% for category in restaurant.attributes.categories.data %} -
  • {{ category.name }}
    • +
  • {{ category.attributes.name }}
    • {% endfor %} ``` @@ -261,7 +263,7 @@ const { default: axios } = require('axios'); module.exports = async () => { try { - const res = await axios.get('http://localhost:1337/api/categories'); + const res = await axios.get('http://localhost:1337/api/categories?populate=*'); return res.data; } catch (error) { console.error(error); @@ -273,47 +275,53 @@ module.exports = async () => { ::: response Example response ```json -[ - { - "id": 1, - "name": "French Food", - "created_by": { - "id": 1, - "firstname": "Paul", - "lastname": "Bocuse", - "username": null - }, - "updated_by": { - "id": 1, - "firstname": "Paul", - "lastname": "Bocuse", - "username": null - }, - "created_at": "2020-08-28T11:43:23.578Z", - "updated_at": "2020-08-28T11:43:23.589Z", - "restaurants": [ - { - "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 +{ + "data": [ + { + "id": 1, + "attributes": { + "name": "French Food", + "createdAt": "2022-05-23T09:42:04.679Z", + "updatedAt": "2022-05-23T09:44:25.309Z", + "publishedAt": "2022-05-23T09:44:25.308Z", + "restaurants": { + "data": [] + } + } }, - "created_at": "2020-08-28T13:43:21.786Z", - "updated_at": "2020-08-28T13:43:21.786Z" - } - ] - } -] + { + "id": 2, + "attributes": { + "name": "Brunch", + "createdAt": "2022-05-23T09:42:16.764Z", + "updatedAt": "2022-05-23T09:44:21.534Z", + "publishedAt": "2022-05-23T09:44:21.532Z", + "restaurants": { + "data": [ + { + "id": 1, + "attributes": { + "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.", + "createdAt": "2022-05-23T09:41:46.762Z", + "updatedAt": "2022-05-23T09:44:32.424Z", + "publishedAt": "2022-05-23T09:44:32.423Z" + } + } + ] + } + } + } + ], + "meta": { + "pagination": { + "page": 1, + "pageSize": 25, + "pageCount": 1, + "total": 2 + } + } +} ``` ::: @@ -328,7 +336,7 @@ const { default: axios } = require('axios'); module.exports = async () => { try { - const res = await axios.get('http://localhost:1337/api/categories'); + const res = await axios.get('http://localhost:1337/api/categories?populate=*'); return res.data; } catch (error) { console.error(error); @@ -343,7 +351,7 @@ module.exports = async () => { title: Category layout: default.liquid pagination: - data: categories + data: categories.data size: 1 alias: category permalink: 'categories/{{ category.id }}/' @@ -353,9 +361,9 @@ permalink: 'categories/{{ category.id }}/' ## Restaurants -{% for restaurant in category.restaurants %} +{% for restaurant in category.attributes.restaurants.data %} -
  • {{ restaurant.name }}
    • +
  • {{ restaurant.attributes.name }}
    • {% endfor %} ```