Я получаю данные из приложения Strapi в свое приложение Next.js. Я фильтрую и заполняю данные, чтобы получить их по бренду и заполнить данные изображения.
Вот моя функция getStrapiData():
async function getStrapiData(path: string): Promise<StrapiData> {
const baseUrl = "http://127.0.0.1:1337"
const productQuery = qs.stringify({
populate: {
images: {
fields: ["url", "alternativeText"],
},
},
product_tags: {
fields: ["name"],
},
filters: {
brand: {
name: "bonux",
},
},
})
const url = new URL(path, baseUrl)
url.search = productQuery
console.info(url.href)
try {
const response = await fetch(url.href)
const data = (await response.json()) as StrapiData
console.info(data)
return data
} catch (error) {
console.error(error)
throw error
}
}
export default async function Web() {
const strapiData = await getStrapiData("/api/products")
У меня есть два console.info:
console.info(url.href) вернуть URL-адрес в API, где я могу увидеть полученные продуктыconsole.info(data) возвращение ответа данныхЧего я не понимаю, так это того, что данные между ними не похожи. В цифре 2 у меня остались предыдущие данные, а в цифре 1 — новые данные после модификации.
Я не знаю, как это объяснить лучше, потому что я действительно не понимаю и как это отладить.
Что я вижу в ссылке на console.info 1:
{
"data": [
{
"id": 40,
"attributes": {
"name": "L’original",
"hook": "L’iconique lessive en poudre Bonux revient, accompagné aujourd’hui de ses versions concentrées et en capsules",
"precautions": "",
"description": "",
"createdAt": "2024-04-22T09:41:45.248Z",
"updatedAt": "2024-04-22T16:17:10.701Z",
"publishedAt": "2024-04-22T09:44:29.748Z",
"strapiName": "L’original",
"code_ean": null,
"info": "",
"images": {
"data": [
{
"id": 625,
"attributes": {
"url": "/uploads/Type_Group_423_67d79b78eb.png",
"alternativeText": "image product"
}
}
]
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}
Что я вижу в console.info 2 (я поставил только короткую версию):
{
data: [
[
{
id: 8,
attributes: {
name: "Bonux Lessive concentrée L'Original (1,9L)",
hook: 'Une valeur sûre pour la propreté de votre linge.',
precautions: `<p><span style = "font-size:12px;"><strong>MODE D'EMPLOI :</strong> 1 bouchon = 50 mL. À la main : doser 20 mL pour 5L d’eau, laver le linge et bien le rincer. Machine de 6-8Kg : Ajouter 25 à 30 mL au dosage prévu dans le tableau ci-contre. </span><br><br><img class = "image_resized" style = "width:66.74%;" src = "/uploads/TABLEAU_DOSAGE_BONUX_3978673e18.png" alt = "TABLEAU DOSAGE BONUX.png" srcset = "/uploads/thumbnail_TABLEAU_DOSAGE_BONUX_3978673e18.png 245w, /uploads/small_TABLEAU_DOSAGE_BONUX_3978673e18.png 500w" sizes = "100vw" width = "500"><br><br><span style = "font-size:12px;"><strong>PRÉCAUTIONS D’EMPLOI </strong>: Provoque une sévère irritation des yeux. Tenir hors de portée des enfants. Se laver soigneusement les mains après manipulation. Porter un équipement de protection des yeux. EN CAS DE CONTACT AVEC LES YEUX : Rincer avec précaution à l’eau pendant plusieurs minutes. Enlever les lentilles de contact si la victime en porte et si elles peuvent être facilement enlevées. Continuer à rincer. Si l’irritation oculaire persiste : consulter un médecin. EN CAS D'INGESTION : rincer la bouche. NE PAS faire vomir. Appeler immédiatement un CENTRE ANTIPOISON ou un médecin. En cas de consultation d’un médecin, garder à disposition le récipient ou l’étiquette. UFI : AX9N-FPD7-031Q-VKXD</span></p>`,
description: `<p>Bonux revient en force avec sa lessive liquide L'Original fabriquée en France. Idéale pour le linge de toute la famille, elle offre une action nettoyante ultra- efficace, adaptée aux peaux les plus sensibles. Parfum longue durée aux notes subtilement fraîches ! </p><p>Surprise ! Votre cadeau au dos de la bouteille !<br><br> </p><p><img class = "image_resized" style = "width:35.75%;" src = "/uploads/VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png" alt = "VISUEL AIRLABEL SCORE A+ (pour facing et dos de pack).png" srcset = "/uploads/thumbnail_VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png 245w, /uploads/small_VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png 500w, /uploads/medium_VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png 750w, /uploads/large_VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png 1000w" sizes = "100vw" width = "1000"> <img class = "image_resized" style = "width:42.77%;" src = "/uploads/ac_label_complet_horizontal_2_etoiles_db8bea14a5.png" alt = "ac-label-complet horizontal 2 étoiles.png" srcset = "/uploads/thumbnail_ac_label_complet_horizontal_2_etoiles_db8bea14a5.png 245w, /uploads/small_ac_label_complet_horizontal_2_etoiles_db8bea14a5.png 500w, /uploads/medium_ac_label_complet_horizontal_2_etoiles_db8bea14a5.png 750w, /uploads/large_ac_label_complet_horizontal_2_etoiles_db8bea14a5.png 1000w" sizes = "100vw" width = "1000"></p><p><br><span style = "font-size:12px;"><span style = "mso-ansi-language:FR;mso-bidi-language:AR-SA;mso-fareast-font-family:Calibri;mso-fareast-language:EN-US;mso-fareast-theme-font:minor-latin;">Dangereux - Respecter les précautions d’emploi.</span></span></p><p> </p>`,
createdAt: '2023-02-22T04:52:22.660Z',
updatedAt: '2023-12-01T09:35:54.214Z',
publishedAt: '2023-02-22T04:52:57.554Z',
strapiName: "Bonux - Bonux L'Original liquide",
code_ean: '3760360760392',
info: `<p><strong><u>Qualités et caractéristiques environnementales de l'emballage :</u></strong></p><figure class = "table" style = "width:994pt;"><table class = "ck-table-resized" style = "border-collapse:collapse;" border = "0" cellpadding = "0" cellspacing = "0" width = "1320"><colgroup><col style = "width:11.11%;"><col style = "width:11.11%;"><col style = "width:11.11%;"><col style = "width:11.11%;"><col style = "width:11.11%;"><col style = "width:11.11%;"><col style = "width:11.11%;"><col style = "width:11.11%;"><col style = "width:11.12%;"></colgroup><thead><tr style = "height:29.0pt;" height = "39"><th class = "xl73" style = "height:29.0pt;width:124pt;" height = "39" width = "165">Possibilité de réemploi</th><th class = "xl73" style = "border-left-style:none;width:121pt;" width = "161">Rechargeabilité</th><th class = "xl73" style = "border-left-style:none;width:132pt;" width = "175">Possibilité de compostage</th><th class = "xl74" style = "border-left-style:none;width:105pt;" width = "139">Taux de recyclabilité</th><th class = "xl77" style = "width:101pt;" width = "134">Mention recyclabilité</th><th class = "xl76" style = "border-left-style:none;width:103pt;" width = "137">% de matières recyclées<span style = "mso-spacerun:yes;"> </span></th><th class = "xl75" style = "width:115pt;" width = "153">% de Substances dangereuses<span style = "mso-spacerun:yes;"> </span></th><th class = "xl73" style = "border-left-style:none;width:101pt;" width = "134">% de Perturbateurs endocriniens</th><th class = "xl73" style = "border-left-style:none;width:92pt;" width = "122">Primes et pénalités</th></tr></thead><tbody><tr style = "height:43.5pt;" height = "58"><td class = "xl78" style = "border-top-style:none;height:43.5pt;width:124pt;" height = "58" width = "165">Emballage non réemployable</td><td class = "xl78" style = "border-left-style:none;border-top-style:none;width:121pt;" width = "161">Emballage non rechargeable</td><td class = "xl78" style = "border-left-style:none;border-top-style:none;width:132pt;" width = "175">Emballage non compostable</td><td class = "xl79" style = "border-left-style:none;border-top-style:none;width:105pt;" width = "139">98,60%</td><td class = "xl80" style = "border-left-style:none;border-top-style:none;width:101pt;" width = "134">Emballage entièrement recyclable</td><td class = "xl78" style = "border-left-style:none;border-top-style:none;width:103pt;" width = "137">0</td><td class = "xl78" style = "border-left-style:none;border-top-style:none;width:115pt;" width = "153">0</td><td class = "xl78" style = "border-left-style:none;border-top-style:none;width:101pt;" width = "134">0</td><td class = "xl78" style = "border-left-style:none;border-top-style:none;width:92pt;" width = "122"> </td></tr></tbody></table></figure><p><strong><u>Qualités et caractéristiques environnementales du produit :</u></strong></p><figure class = "table" style = "width:468pt;"><table class = "ck-table-resized" style = "border-collapse:collapse;" border = "0" cellpadding = "0" cellspacing = "0" width = "623"><colgroup><col style = "width:50%;"><col style = "width:50%;"></colgroup><thead><tr style = "height:29.0pt;" height = "39"><th class = "xl73" style = "height:29.0pt;width:162pt;" height = "39" width = "215">% de Substances dangereuses<span style = "mso-spacerun:yes;"> </span></th><th class = "xl74" style = "border-left-style:none;width:306pt;" width = "408">% de Perturbateurs endocriniens</th></tr></thead><tbody><tr style = "height:43.5pt;" height = "58"><td class = "xl75" style = "border-top-style:none;height:43.5pt;width:162pt;" height = "58" width = "215">0</td><td class = "xl76" style = "border-left-style:none;border-top-style:none;width:306pt;" width = "408">Ne contient pas de substances PBT/vPvB ≥ 0,1 % évaluées conformément à l'annexe XIII du règlement REACH<span style = "mso-spacerun:yes;"> </span></td></tr></tbody></table></figure>`,
images: {
data: [
{
id: 615,
attributes: {
url: '/uploads/BONUX_LIQUIDE_L_ORIGINAL_3760360760392_49e4f45232.png',
alternativeText: null
}
}
]
}
}
},
{
id: 9,
attributes: {
name: "Bonux L'Original ",
hook: "Le retour de l'iconique poudre Bonux.",
precautions: "Mode d'emploi : \n" +
"Verser la quantité (indiquée sur l'emballage du produit) dans le compartiment lessive de votre machine à laver (indiqué par le chiffre II).\n" +
"Machine de 6-8kg : rajouter 30g au dosage prévu (se référer aux indications données sur l'emballage du produit).\n" +
'Pour doser, utiliser une cuillère à soupe dédiée ou un gobelet gradué. \n' +
"A la main : 2 cuillères à soupe = 30g + 5L d'eau tiède. \n" +
"Recommandations d'usage : Ne pas utiliser sur la laine, le cachemire et la soie. Bien respecter les consignes de lavage des articles. Ne pas surdoser la machine. A utiliser à partir de 30°C.\n" +
'\n' +
'\n' +
'Contient : Disilicate de sodium, Acide benzènesulfonique, dérivés alkyles en C10-13, sels de sodium ; Alcools C12-15 ramifiés et linéaires, éthoxylés.\n' +
'\n' +
"Précautions d'emploi : Provoque des graves lésions des yeux. Provoque une irritation cutanée. Tenir hors de portée des enfants. Se laver soigneusement les mains après manipulation. Porter un équipement de protection des yeux/du visage. Porter des gants de protection. EN CAS DE CONTACT AVEC LES YEUX : Rincer avec précaution à l'eau pendant plusieurs minutes. Enlever les lentilles de contact si la victime en porte et si elles peuvent être facilement enlevées. Continuer à rincer. Si l'irritation oculaire persiste, consulter un médecin. EN CAS D'INGESTION : rincer la bouche. NE PAS faire vomir. Appeler immédiatement un CENTRE ANTI-POISON ou un médecin. En cas de consultation d'un médecin, garder à disposition le récipient ou l'étiquette. Éliminer le récipient conformément à la réglementation locale.\n" +
'UFI : 9DVE-N03H-R00M-VHEG',
description: `<p>Bonux revient dans son format iconique : la lessive en poudre ! Bonux poudre L'Original est idéale pour un linge éclatant de blancheur. Son action détachante et sa formule active au bicarbonate vous garantit un lavage impeccable ! Sans conservateurs, elle est parfaitement adaptée aux peaux même les plus sensibles.<br>Surprise ! Votre cadeau dans la boîte !<br><br> </p><p><img class = "image_resized" style = "width:35.75%;" src = "/uploads/VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png" alt = "VISUEL AIRLABEL SCORE A+ (pour facing et dos de pack).png" srcset = "/uploads/thumbnail_VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png 245w, /uploads/small_VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png 500w, /uploads/medium_VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png 750w, /uploads/large_VISUEL_AIRLABEL_SCORE_A_pour_facing_et_dos_de_pack_42c299dbc6.png 1000w" sizes = "100vw" width = "1000"> <img class = "image_resized" style = "width:42.77%;" src = "/uploads/ac_label_complet_horizontal_2_etoiles_db8bea14a5.png" alt = "ac-label-complet horizontal 2 étoiles.png" srcset = "/uploads/thumbnail_ac_label_complet_horizontal_2_etoiles_db8bea14a5.png 245w, /uploads/small_ac_label_complet_horizontal_2_etoiles_db8bea14a5.png 500w, /uploads/medium_ac_label_complet_horizontal_2_etoiles_db8bea14a5.png 750w, /uploads/large_ac_label_complet_horizontal_2_etoiles_db8bea14a5.png 1000w" sizes = "100vw" width = "1000"></p><p><br><span style = "font-size:12px;"><span style = "mso-ansi-language:FR;mso-bidi-language:AR-SA;mso-fareast-font-family:Calibri;mso-fareast-language:EN-US;mso-fareast-theme-font:minor-latin;">Dangereux - Respecter les précautions d’emploi.</span></span></p><p> </p>`,
createdAt: '2023-02-22T04:58:09.956Z',
updatedAt: '2023-04-21T08:06:20.585Z',
publishedAt: '2023-02-22T04:58:12.092Z',
strapiName: "Bonux - Bonux L'Original poudre",
code_ean: null,
info: null,
images: {
data: [
{
id: 544,
attributes: {
url: '/uploads/BONUX_Lessive_Poudre_L_Original_2kg_409fa3101a.png',
alternativeText: null
}
}
]
}
}
},
...
],
meta: { pagination: { page: 1, pageSize: 25, pageCount: 1, total: 4 } }
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


По умолчанию Next.js автоматически кэширует значения, возвращаемые API fetch.
Если вы хотите, чтобы ваши данные всегда были актуальными, вы можете отключить кеширование, добавив опцию «без кэширования», например:
fetch('https://...', { cache: 'no-store' })
Более подробную информацию можно найти в документации.