I have been trying to implement a LIKE system for my social media application with react at client-side and express at server-side. I'm trying to fetch the current LIKE stats using "axios" within a "useEffect". But, the data returned after "GET" request is an empty array instead of actual data. The data is being saved to mongoDB and it could be fetched using "POSTMAN", but cannot be fetched from the client-side. Any fixes?

Like.jsx

// Client-side where LIKE stats are fetched

import axios from 'axios';
import { useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { Context } from '../../context/Context';
import './reactions.css'

export default function Reactions() {

    const LIKE = "LIKE"
    
    const { user } = useContext(Context)
    const location = useLocation()
    const postId = location.pathname.split("/")[2]

    const [likes, setLikes] = useState(0)
    const [refresh, setRefresh] = useState(false)

    useEffect(() => {
        const fetchReactions = async () => {
            
            const likeRes = await axios.get(`/reactions/all`, {
                data: {
                    postId, 
                    reactionType: LIKE
                }
            })
            
            console.log("Like res data", likeRes.data) // The logged array is empty :(
            setLikes(likeRes.data.length)
        }
        fetchReactions()
    }, [postId, refresh])

    const handleReact = async (reactionType) => {
        const newReaction = {
            reactionType, 
            username: user.username,
            postId,
        }
        try {
            const res = await axios.post("/reactions", newReaction)
            console.log(res.data) // The logged object has data :)
            setRefresh(!refresh)
        } catch(err) {
            console.log(err)
        }
    }

Like.js

// Reaction model at server-side
const mongoose = require("mongoose")

const ReactionSchema = new mongoose.Schema(
    {
        reactionType: {
            type: String,
            required: true,
        },
        username: {
            type: String,
            required: true,
        },
        postId: {
            type: String,
            required: true,
        }
    },
    {
        timestamps: true,
    }
)

module.exports = mongoose.model("Reaction", ReactionSchema)

likes.js

// API for creating and fetching LIKES

const router = require("express").Router()
const Reaction = require("../models/Reaction")

// CREATE REACTION
router.post("/", async (req, res) => {
    const newReaction = new Reaction(req.body)
    try {
        const savedReaction = await newReaction.save()
        res.status(200).json(savedReaction)
    } catch(err) {
        res.status(500).json(err)
    }
})

// GET REACTIONS OF A POST
router.get("/all", async (req, res) => {
    try {
        const reactions = await Reaction.find({
            postId: req.body.postId,
            reactionType: req.body.reactionType,
        })
        res.status(200).json(reactions)
    } catch(err) {
        res.status(500).json(err)
    }
})

module.exports = router

CodePudding user response：

Thanks to @cmgchess for making me think about my approach of making a "GET" request with request body.

I changed the body parameters to query parameters and it did WORK :)

changed Like.jsx

// Client-side where LIKE stats are fetched

import axios from 'axios';
import { useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { Context } from '../../context/Context';
import './reactions.css'

export default function Reactions() {

    const LIKE = "LIKE"
    
    const { user } = useContext(Context)
    const location = useLocation()
    const postId = location.pathname.split("/")[2]

    const [likes, setLikes] = useState(0)
    const [refresh, setRefresh] = useState(false)

    useEffect(() => {
        const fetchReactions = async () => {
            
            // ---- DIFF OPEN ----
            const search = `?postId=${postId}&reactionType=${LIKE}`

            const likeRes = await axios.get(`/reactions${search}`)
            // ---- DIFF CLOSE ----

            console.log("Like res data", likeRes.data) // The logged array has data :)
            setLikes(likeRes.data.length)
        }
        fetchReactions()
    }, [postId, refresh])

    const handleReact = async (reactionType) => {
        const newReaction = {
            reactionType, 
            username: user.username,
            postId,
        }
        try {
            const res = await axios.post("/reactions", newReaction)
            console.log(res.data) // The logged object has data :)
            setRefresh(!refresh)
        } catch(err) {
            console.log(err)
        }
    }

changed likes.js

// API for creating and fetching LIKES

const router = require("express").Router()
const Reaction = require("../models/Reaction")

// CREATE REACTION
router.post("/", async (req, res) => {
    const newReaction = new Reaction(req.body)
    try {
        const savedReaction = await newReaction.save()
        res.status(200).json(savedReaction)
    } catch(err) {
        res.status(500).json(err)
    }
})

// GET REACTIONS OF A POST
// --- DIFF OPEN ---
router.get("/", async (req, res) => {
    const postId = req.query.postId
    const reactionType = req.query.reactionType
    try {
        const reactions = await Reaction.find({
            postId,
            reactionType
        })
// --- DIFF CLOSE ---
        res.status(200).json(reactions)
    } catch(err) {
        res.status(500).json(err)
    }
})

module.exports = router