React returns Typerror whenever i add api content

Question

Hi i am making a photography portfolio with strapi as my CMS and graphql to fetch data in my React frontend

the problem is whenever i add a new pic using strapi the entire site crashes and returns

Uncaught TypeError: Cannot read properties of undefined (reading 'gears')

but when i edit Gearfetch variable by removing it and rewriting it all again it starts working untill i add another pic via strapi and then it gives same error again

is there a permanent solution to this ?

my 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;