Deleting document from Firestore based on array key

Question

I'm making a web app to help people create graphs. When a user creates two graphs and deletes the first one, the index in the array changes to 0 and so the second graph (graph1) doesn't get deleted from Firestore. Any ideas on how to approach this? Thanks

Adds Graph

onClick={ () => {
    
        const clientDb = firebaseClient.firestore();  
            
            // Adding Graph Options NOTICE HERE SITTING DOCUMENT NAME TO graph${i}
             for(var i = 0 ; i < numberofGraphs.length ; i++ ){
        
              clientDb.collection("Users").doc(props.uid).collection("Dashboard").doc(`graph${i}`).set({ 
                  type:numberofGraphs[i].type,
                  title:numberofGraphs[i].type,
                   seriestitle:numberofGraphs[i].seriestitle,
                  legend:numberofGraphs[i].legend,
                   xAxis:numberofGraphs[i].xAxis,
              yAxis:numberofGraphs[i].yAxis,
              color:numberofGraphs[i].color,
              tooltipcolor:numberofGraphs[i].tooltipcolor,
              tooltiptextcolor:numberofGraphs[i].tooltiptextcolor,
              axisColor:numberofGraphs[i].axisColor,
            })  
        
          }
    
    }}

Deletes Graph

numberofGraphs.map( (si, k) => (
   <>
   <CloseIcon  

   onClick={ () => {

    if(window !== "undefined") {

      console.log("lets see it")

      const clientDb = firebaseClient.firestore();  

              //NOTICE HERE DELETING Graph with index from map 
    clientDb.collection("Users").doc(props.uid).collection("Dashboard").doc(`graph${k}`).delete();
    
              }

          
         const newgraphs = numberofGraphs.filter( (object, kk) =>  k!== kk ) 
         setnumberofGraphs(newgraphs);
       
       }}

         />  
<CreateGraph2 type={si.type} title={si.title} seriestitle={si.seriestitle}/>
         
           </>

     ))

Answer 1

I solved my issue doing the following:

Adds Graph

//   Took @samthecodingman's advice by moving all graphs to their own /Graphs collection. 
//   Which also resonated with @Brian's answer to use 
//   collection().add() to add documents with Auto-generated ID's instead of adding graphs based
//     on index no. of array.

    onClick={ () => {

          if(window !== "undefined") {

    const clientDb = firebaseClient.firestore();  
  
      clientDb.collection("Users").doc(props.uid)
      .collection("Dashboard")
      .doc("First").collection("Graphs").add({ 
        type:type, title:title, seriestitle:seriestitle,
        legend:legend,
         xAxis:xAxis, 
        yAxis:yAxis,  
        color:color,
        tooltipcolor:tooltipcolor,
        tooltiptextcolor:tooltiptextcolor,
        axisColor:axisColor,
//passed an id filed to the object I'm saving
        id:type+title
    })  

  
      }
        
        }}

Deletes Graph

//mapping through an array of objects (si) and then using the get() method with 

a query to check for matching ID. Then used the id in the delete method

  if(window !== "undefined") {

    const clientDb = firebaseClient.firestore();  

   const docref = clientDb.collection("Users").doc(props.uid)
     .collection("Dashboard").doc("First").collection("Graphs"); 
     docref.where("id" , "==", `${si.type}${si.title}`)
     .get()
     .then((querySnapshot) => {
         querySnapshot.forEach((doc) => {
              docref.doc(doc.id).delete()
             console.log(doc.id, " => ", doc.data() );
         });
     })
 
      }

Answer 2

If you absolutely have to do it this way you could "mark doc as deleted" by doing collection('Dashboard').doc('<doc-to-delete>').set({ deleted: true }) and then just filter it out in the client by this property and don't display it.

More generally - use collection().add() to create new documents and let firestore auto-generate IDs for you. Then access your documents by ID, instead of trying to keep track of indices on the front end.