node.js – Fetching the mongodb document taking too long

I have a project based on MERN stack, in which after giving the quiz based on the score 10 different documents are fetched from mongodb collection. There are total 2000 documents in mongodb collection. While fetching its taking too long rather documents are not loading a loader rotates. How to resolve this? The indexing I am doing on _id as this is only unique.

{"code": "80",
        "number": "3",
        "intro": "intro of",
        "education": "education details",
        "training": "training of exam",
        "scope": "scope of exam",
        "career_name":"XII Exam",
        "career_img" :"images/marine.jpg",
        "abilities": "Loreupm ipsun",
        "salary_global":"$90000",
        "work_styles":"Loerum ipsum "}


const { repo } = useSelector((state) => state.rep);
useEffect(() => {
    if (!repo) {
      dispatch(fetchRepo(history));
    }  
  }); 

 return (
        
            <>
             <Container maxwidth="sm" component="main" sx={{ mt: 4, mb: 2, flexGrow: 1 }}> 
  
              <Grid container spacing={3} direction="row" justifyContent="center" alignItems="center" display="flex">
              <Fragment>
                <Grid item xs={12} md={6} sm={6}  alignItems="center" justifyContent="center">
          <Card  sx={{ bgcolor: "#f7f7f7"}} elevation={4} alignItems="center">
          <CardMedia
        component="img"
        height="194"
        image={repo[2].career_img}
        alt="Home Page"
        />
        <CardContent><div dangerouslySetInnerHTML={{ __html: repo[2].career_name }}></div></CardContent>
           </Card>
  </Grid>
  
  
  <Grid item xs={12} sm={12} md={12} sx={{flexGrow:1}}>
  <Card  sx={{ bgcolor: "#f7f7f7"}} elevation={4}>
           <CardContent> <><Typography sx={{textAlign:'center'}}>Introduction </Typography><div dangerouslySetInnerHTML={{ __html: repo[2].intro }}></div></>
           </CardContent>
            </Card>
  </Grid>
  
  <Grid item xs={12} sm={6} md={6} sx={{flexGrow:1}}>
           <Card  sx={{  display:'flex', bgcolor: "#f7f7f7"}} elevation={4} >
           <Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}>
        <CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}>
          <Typography component="div" sx={{fontWeight:'bold', textAlign:'center'}}>
          Education, Training & Experience
          </Typography>
        
          </CardContent>
         
          </Box>
          <CardHeader 
          subheaderTypographyProps={{fontSize: 14}}
          subheader= {<div dangerouslySetInnerHTML={{ __html: repo[2].education }}></div>} 
          />        
  </Card>
  </Grid>
  
  <Grid item xs={12} sm={6} md={6} sx={{flexGrow:1}}>
  <Card  sx={{  display:'flex', bgcolor: "#f7f7f7"}} elevation={4} >
           <Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}>
        <CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}>
          <Typography component="div" sx={{fontWeight:'bold', textAlign:'center'}}>
          Scope, Knowledge & Skills
          </Typography>
        
          </CardContent>
         
          </Box>
          <CardHeader 
         title= "Growth rate is 5% higher"
         subheaderTypographyProps={{fontSize: 15}}
          subheader= {<div dangerouslySetInnerHTML={{ __html: repo[2].scope }}></div>} 
          />
           </Card>
  </Grid>
  
          <Grid item xs={12} sm={6} md={6} sx={{flexGrow:1}} >
           <Card  sx={{  display:'flex', bgcolor: "#f7f7f7"}} elevation={4} >
           <Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}>
        <CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}>
          <Typography component="div" sx={{fontWeight:'bold', textAlign:'center'}}>
          Job Growth
          </Typography>
        
          </CardContent>
         
          </Box>
          <CardHeader 
          title="Approx"
          subheader={<><Typography>India : 56%</Typography><Divider orientation="horizontal" flexItem/>
          <Typography>Global: 63%</Typography></>}/>        
  </Card>
  </Grid>
  
  <Grid item xs={12} sm={6} md={6} sx={{flexGrow:1}} >
             <Card  sx={{  display:'flex', bgcolor: "#f7f7f7"}} elevation={4} >
           <Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}>
        <CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}>
          <Typography component="div" sx={{fontWeight:'bold', textAlign:'center'}}>
         Salary Range
          </Typography>
        
          </CardContent>
         
          </Box>
            <CardHeader 
          title="Details"
          subheader={<><Typography>India: 50Lpa</Typography><Divider orientation='horizontal' flexItem/>
          <Typography>Global: <div dangerouslySetInnerHTML={{ __html: repo[2].salary_global }}></div> </Typography></>}/>
           </Card>
  </Grid>
  
  <Grid item xs={12} sm={6} md={6} sx={{ flexGrow:1}}>
  <Card  sx={{  display:'flex', bgcolor: "#f7f7f7"}} elevation={4} >
           <Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}>
        <CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}>
          <Typography component="div" sx={{fontWeight:'bold', textAlign:'center'}}>
         Work Styles
          </Typography>
        
          </CardContent>
         
          </Box>
            <CardHeader 
          
          subheader= {<div dangerouslySetInnerHTML={{ __html: repo[2].work_styles }}></div>} />
           </Card>
          </Grid>
  
          <Grid item xs={12} sm={12} md={12} sx={{flexGrow:1}}>
           <Card  sx={{ display:'flex', bgcolor: "#f7f7f7"}} elevation={4} >
           <Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}>
        <CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}>
          <Typography component="div" sx={{fontWeight:'bold', textAlign:'center'}}>
          Abilities
          </Typography>
        
          </CardContent>
         
          </Box>   
        <CardHeader 
        title="Abilities you should have:"
        subheader={<div dangerouslySetInnerHTML={{ __html: repo[2].abilities }}></div>}/>
          </Card> 
          </Grid>
          

  </Fragment>
  </Grid>
        </Container>
  </>

I think its not reading repo[2].career I am not sure.

Leave a Comment