Hola, estoy haciendo un portafolio de fotografía con strapi como mi CMS y graphql para obtener datos en mi interfaz React

el problema es que cada vez que agrego una nueva foto usando strapi, todo el sitio falla y regresa

TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'engranajes')

pero cuando edito la variable Gearfetch eliminándola y reescribiéndola todo nuevamente, comienza a funcionar hasta que agrego otra imagen a través de strapi y luego vuelve a dar el mismo error

¿Hay una solución permanente a esto?

mi gearfetch.js:

 import React from "react"; import { gql, useQuery } from "@apollo/client"; import MyGear from "../pages/MyGear"; function Gearfetch() { const Geardata = gql` query Getgears { gears { data { id attributes { Name description image { data { attributes { formats } } } } } } } `; const data = useQuery(Geardata); const GearFetch = data.data.gears.data //<-- to fix i have to remove and rewrite this again console.log(GearFetch) return ( <div className=""> <div > <div className="flex justify-center font-mono font-extrabold text-lg mt-6 "> MyGear </div> <div className="flex justify-center"> <div className=" p-4 xl:mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 md:gap-2 md:p-4 "> {GearFetch.map((Gears) => ( <div className="p-4"> <MyGear key={Gears.attributes.Name} name={Gears.attributes.Name} description={Gears.attributes.description} image = {Gears.attributes.image.data[0].attributes?.formats?.medium.url} /> </div> ))} </div> </div> </div> </div> ); } export default Gearfetch;