System Information
- Strapi Version: v4 (4.0.2)
- Operating System: iOS
- Database:
- Node Version: v16.13.1
- NPM Version: 8.1.2
- Gatsby version : ^2.21.0
Hej everyone!
I am sitting fast trying to figure out how to access data since the v4 Strapi data structure is so different and it makes it really hard to understand for a newbie.
I am using Gatsby and was trying to get data by using graphQL and it partially works, but the “media” is not showing up at all in the GraphQL panel and therefore I just tried it with axis, which seems to work and fetch data. I cannot map over it in my elements unfortunately. I get different fail as soon as I am trying ot map it over and it just seems to be undefined…
See my code:
import React from "react"
import Title from "./Title"
import Project from "./Project"
import { Link } from "gatsby"
import { useState, useEffect } from "react"
import axios from "axios"
const Projects = () => {
const [projectData, setProjectData] = useState();
useEffect(() => {
axios(`http://localhost:1337/api/projects?populate=*`)
.then((response) => {
setProjectData(response.data)
console.log(response.data)
})
}, [])
return (
<>
<div>
{projectData?.map((project) =>
<div key={project.id}>
{project.id}
{project.title}
</div>
)}
</div>
</>
)
}
export default Projects;
The data response:
{“data”:[{“id”:1,“attributes”:{“title”:“project 1”,“description”:“Direct trade art party pop-up ethical pug. Actually helvetica blog food truck seitan tbh williamsburg waistcoat organic fixie pinterest kitsch lomo fanny pack. Irony literally you probably haven’t heard of them cliche bicycle rights bushwick sriracha taxidermy salvia, selfies chicharrones selvage YOLO glossier heirloom. Green juice knausgaard health goth next level, hexagon yr viral literally chartreuse vape twee. Hot chicken kombucha post-ironic authentic kitsch chia. Fixie vegan street art seitan.”,“github”:“ggghhgghghhg”,“url”:“ghghghhggh”,“featured”:true,“stack”:“HTML CSS JS”,“createdAt”:“2021-12-30T13:59:06.550Z”,“updatedAt”:“2021-12-30T13:59:25.681Z”,“publishedAt”:“2021-12-30T13:59:25.680Z”,“image”:{“data”:{“id”:1,“attributes”:{“name”:“mae-mu-s6S8IgEN6-4-unsplash.jpg”,“alternativeText”:“mae-mu-s6S8IgEN6-4-unsplash.jpg”,“caption”:“mae-mu-s6S8IgEN6-4-unsplash.jpg”,“width”:5472,“height”:3648,“formats”:{“thumbnail”:{“name”:“thumbnail_mae-mu-s6S8IgEN6-4-unsplash.jpg”,“hash”:“thumbnail_mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a”,“ext”:".jpg",“mime”:“image/jpeg”,“width”:234,“height”:156,“size”:2.97,“path”:null,“url”:"/uploads/thumbnail_mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a.jpg"},“large”:{“name”:“large_mae-mu-s6S8IgEN6-4-unsplash.jpg”,“hash”:“large_mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a”,“ext”:".jpg",“mime”:“image/jpeg”,“width”:1000,“height”:667,“size”:29.59,“path”:null,“url”:"/uploads/large_mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a.jpg"},“medium”:{“name”:“medium_mae-mu-s6S8IgEN6-4-unsplash.jpg”,“hash”:“medium_mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a”,“ext”:".jpg",“mime”:“image/jpeg”,“width”:750,“height”:500,“size”:16.77,“path”:null,“url”:"/uploads/medium_mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a.jpg"},“small”:{“name”:“small_mae-mu-s6S8IgEN6-4-unsplash.jpg”,“hash”:“small_mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a”,“ext”:".jpg",“mime”:“image/jpeg”,“width”:500,“height”:333,“size”:8.18,“path”:null,“url”:"/uploads/small_mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a.jpg"}},“hash”:“mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a”,“ext”:".jpg",“mime”:“image/jpeg”,“size”:1221.02,“url”:"/uploads/mae_mu_s6_S8_Ig_EN_6_4_unsplash_1ecc38408a.jpg",“previewUrl”:null,“provider”:“local”,“provider_metadata”:null,“createdAt”:“2021-12-30T13:58:25.210Z”,“updatedAt”:“2021-12-30T13:58:25.210Z”}}}}},{“id”:2,“attributes”:{“title”:“project 2”,“description”:“Vexillologist chillwave vegan, skateboard gochujang whatever live-edge knausgaard chicharrones schlitz. Knausgaard master cleanse mustache enamel pin 90’s. Street art vegan poke single-origin coffee gastropub. Tacos roof party DIY four loko. Humblebrag woke stumptown, taiyaki meh blog squid cold-pressed chicharrones. Wayfarers shoreditch taiyaki roof party, mumblecore venmo mustache typewriter stumptown asymmetrical paleo taxidermy. Intelligentsia occupy chillwave franzen poke disrupt semiotics portland brooklyn, copper mug etsy literally helvetica.”,“github”:“ujhfgdsa”,“url”:“jghfds”,“featured”:false,“stack”:“REACT”,“createdAt”:“2021-12-30T14:01:18.164Z”,“updatedAt”:“2021-12-30T14:01:20.235Z”,“publishedAt”:“2021-12-30T14:01:20.233Z”,“image”:{“data”:{“id”:2,“attributes”:{“name”:“louis-hansel-MardkT836BU-unsplash.jpg”,“alternativeText”:“louis-hansel-MardkT836BU-unsplash.jpg”,“caption”:“louis-hansel-MardkT836BU-unsplash.jpg”,“width”:5472,“height”:3648,“formats”:{“thumbnail”:{“name”:“thumbnail_louis-hansel-MardkT836BU-unsplash.jpg”,“hash”:“thumbnail_louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc”,“ext”:".jpg",“mime”:“image/jpeg”,“width”:234,“height”:156,“size”:2.61,“path”:null,“url”:"/uploads/thumbnail_louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc.jpg"},“large”:{“name”:“large_louis-hansel-MardkT836BU-unsplash.jpg”,“hash”:“large_louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc”,“ext”:".jpg",“mime”:“image/jpeg”,“width”:1000,“height”:667,“size”:101.08,“path”:null,“url”:"/uploads/large_louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc.jpg"},“medium”:{“name”:“medium_louis-hansel-MardkT836BU-unsplash.jpg”,“hash”:“medium_louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc”,“ext”:".jpg",“mime”:“image/jpeg”,“width”:750,“height”:500,“size”:53.5,“path”:null,“url”:"/uploads/medium_louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc.jpg"},“small”:{“name”:“small_louis-hansel-MardkT836BU-unsplash.jpg”,“hash”:“small_louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc”,“ext”:".jpg",“mime”:“image/jpeg”,“width”:500,“height”:333,“size”:13.99,“path”:null,“url”:"/uploads/small_louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc.jpg"}},“hash”:“louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc”,“ext”:".jpg",“mime”:“image/jpeg”,“size”:1874.75,“url”:"/uploads/louis_hansel_Mardk_T836_BU_unsplash_ac046ffefc.jpg",“previewUrl”:null,“provider”:“local”,“provider_metadata”:null,“createdAt”:“2021-12-30T14:00:35.940Z”,“updatedAt”:“2021-12-30T14:00:35.940Z”}}}}}],“meta”:{“pagination”:{“page”:1,“pageSize”:25,“pageCount”:1,“total”:2}}}
How do I get into the data attributes by mapping over data?
Thanks so much for help!