Nextjs axios delete method

JavaScript
1

Whenever request axios delete method in which I have passed the userId to follow api it give the error “Error: Invalid ID
at handler (webpack-internal:///(api)/./pages/api/follow.ts:17:19)”
In follow api I have console log the userId and it shows the undefined.

Follow Hook

import useSWR from 'swr'

import fetcher from '@/libs/fetcher'
import useCurrentUser from './useCurrentUser'
import useUser from './useUser'
import useLoginModal from './useLoginModal'
import { useCallback, useMemo } from 'react'
import { toast } from 'react-hot-toast'
import axios from 'axios'

const useFollow = (userId: string) => {
  const { data: currentUser, mutate: mutateCurrentUser } = useCurrentUser()
  const { mutate: mutateFetchedUser } = useUser(userId)
  const loginModal = useLoginModal()

  const isFollowing = useMemo(() => {
    const list = currentUser?.followingIds || []

    return list.includes(userId)
  }, [userId, currentUser?.followingIds])

  const toggleFollow = useCallback(async () => {
    if (!currentUser) {
      return loginModal.onOpen()
    }

    try {
      let request

      if (isFollowing) {
        request = () => axios.delete(`/api/follow`, { data: { userId } })
      } else {
        request = () => axios.post(`/api/follow`, { userId })
      }

      await request()
      console.log('Hello')

      mutateCurrentUser()
      mutateFetchedUser()

      toast.success('Success')
    } catch (error) {
      toast.error('Something went wrong')
      console.log(error)
    }
  }, [
    currentUser,
    isFollowing,
    userId,
    mutateCurrentUser,
    mutateFetchedUser,
    loginModal,
  ])

  return {
    isFollowing,
    toggleFollow,
  }
}

export default useFollow

Follow strong textApi

import serverAuth from '@/libs/serverAuth'
import { NextApiRequest, NextApiResponse } from 'next'
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST' && req.method !== 'DELETE') {
    return res.status(400).end()
  }

  try {
    const { userId } = req.body

    console.log('Hello')
    console.log(userId)

    const { currentUser } = await serverAuth(req, res)

    if (!userId || typeof userId !== 'string') {
      throw new Error('Invalid Id')
    }

    const user = await prisma?.user.findUnique({
      where: {
        id: userId,
      },
    })

    if (!user) {
      throw new Error('Invalid ID')
    }

    let updatedFollowingIds = [...(user.followingIds || [])]

    if (req.method === 'POST') {
      updatedFollowingIds.push(userId)
    }

    if (req.method === 'DELETE') {
      updatedFollowingIds = updatedFollowingIds.filter(
        (followingId) => followingId !== userId
      )
    }

    const updatedUser = await prisma?.user.update({
      where: {
        id: currentUser.id,
      },
      data: {
        followingIds: updatedFollowingIds,
      },
    })
    return res.status(200).json(updatedUser)
  } catch (error) {
    console.log(error)
    return res.status(400).end()
  }
}
2
  • i suppose you are not getting “userId” from “http request” sent to server, debug that

maybe try looking into this

  • perhaps use “JSON.stringify” before sending “data”

if not then use “params” and use “query” to get that (userId) out of it

happy learning :slight_smile:

3

Same problem, did you solve it?