인프런 커뮤니티 질문&답변

foxbox r님의 프로필 이미지
foxbox r

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

swr 사용해보기

reduxSaga로는 되는데 SWR로 바꾸면 에러가 나요

작성

·

168

0

profil.js

import React,{useEffect} from 'react';
import AppLayout from "../components/AppLayout"
import NicknameEditForm from "../components/NicknameEditForm"
import FollowList from "../components/FollowList"
import {useSelector,useDispatch} from "react-redux"
import {LOAD_FOLLOWERS_REQUEST,LOAD_FOLLOWINGS_REQUEST} from "../reducers/userReducer"

import Head from "next/head"
import {useRouter} from "next/router"

import {END} from "redux-saga"
import axios from "axios";
import wrapper from "../store/configureStore"
import {LOAD_MY_INFO_REQUEST} from "../reducers/userReducer"
import useSWR from "swr";
import {backAddress} from "../back"

const fetcher = (url)=>axios.get(url,{withCredentials:true}).then(result=>result.data);

function Profile(){
    const dispatch = useDispatch();
    const router = useRouter();
    const {me} = useSelector(state=>state.userReducer);

    const {data:followersData,error:followerError} = useSWR(`${backAddress}/user/followers`,fetcher);
    const {data:followingsData,error:followingError} = useSWR(`${backAddress}/user/followings`,fetcher);


    useEffect(()=>{
        if(!me) {
            router.push('/');
        }
    },[me])
    
    // useEffect(()=>{
    //     dispatch({
    //         type:LOAD_FOLLOWERS_REQUEST
    //     })
    //     dispatch({
    //         type:LOAD_FOLLOWINGS_REQUEST
    //     })
    // },[])

    // return 이 hooks(use...())보다 위에 있을수 없음 
    
    if(!me) return null;

    if(followerError || followingError){
        console.error(followerError || followingError);
        return <div>팔로잉/팔로워 로딩 중 에러가 발생함</div>;
    }

    
    return (
        <>
            <Head>
                <title>profile</title>
            </Head>
            <AppLayout>
                <NicknameEditForm />
                <FollowList header="팔로잉 목록" data={followingsData} />
                <FollowList header="팔로워 목록" data={followersData} />
            </AppLayout>
        </>
    )
}

export const getServerSideProps = wrapper.getServerSideProps(async (context)=>{
    const cookie = context.req ? context.req.headers.cookie : "";
    axios.defaults.headers.Cookie = "";
    if(context.req && cookie){
        axios.defaults.headers.Cookie = cookie; // 쿠키 넣기
    }
    context.store.dispatch({
        type:LOAD_MY_INFO_REQUEST,
    })

    context.store.dispatch(END); // 사용법 request success 기다리기
    await context.store.sagaTask.toPromise(); // 사용법 configureStore.js 에서 등록한 sgagTask 를 사용
});


export default Profile;

routes/user.js

router.get("/followers",isLoggedIn,async (req,res,next)=>{
    try{
        const me = await User.findOne({where:{id:req.user.id}});
        if(!me){
            res.status(403).send("me 없음")
        }
        const followers = await me.getFollowers(
            {
                limit:2,
            }
        );
        res.status(200).json(followers)
    } catch(error){
        console.error(error);
        next(error);
    }
})

router.get("/followings",isLoggedIn,async (req,res,next)=>{
    try{
        
        const me = await User.findOne({where:{id:15||req.user.id}})

        if(!me){
            res.status(403).send("me 없음")
        }
        const getFollowings = await me.getFollowings(
            {
                limit:2,
            }
        );
        res.status(200).json(getFollowings)
    } catch(error){
        console.error(error);
        next(error);
    }
})

Error

  sql: 'SELECT `User`.`id`, `User`.`email`, `User`.`nickname`, `User`.`createdAt`, `User`.`updatedAt`, `Posts`.`id` AS `Posts.id`, `Followings`.`id` AS `Followings.id`, `Followings->Follow`.`createdAt` AS `Followings.Follow.createdAt`, `Followings->Follow`.`updatedAt` AS `Followings.Follow.updatedAt`, `Followings->Follow`.`FollowingId` AS `Followings.Follow.FollowingId`, `Followings->Follow`.`FollowerId` AS `Followings.Follow.FollowerId`, `Followers`.`id` AS `Followers.id`, `Followers->Follow`.`createdAt` AS `Followers.Follow.createdAt`, `Followers->Follow`.`updatedAt` AS `Followers.Follow.updatedAt`, `Followers->Follow`.`FollowingId` AS `Followers.Follow.FollowingId`, `Followers->Follow`.`FollowerId` AS `Followers.Follow.FollowerId` FROM `Users` AS `User` LEFT OUTER JOIN `Posts` AS `Posts` ON `User`.`id` = `Posts`.`UserId` LEFT OUTER JOIN ( `Follow` AS `Followings->Follow` INNER JOIN `Users` AS `Followings` ON `Followings`.`id` = `Followings->Follow`.`FollowingId`) ON `User`.`id` = `Followings->Follow`.`FollowerId` LEFT OUTER JOIN ( `Follow` AS 
`Followers->Follow` INNER JOIN `Users` AS `Followers` ON `Followers`.`id` = `Followers->Follow`.`FollowerId`) ON `User`.`id` = `Followers->Follow`.`FollowingId` WHERE `User`.`id` = NaN;',
  parameters: undefined
}
SequelizeDatabaseError: Unknown column 'NaN' in 'where clause'
    at Query.formatError (C:\WEB\full\back\node_modules\sequelize\lib\dialects\mysql\query.js:239:16)
    at Query.run (C:\WEB\full\back\node_modules\sequelize\lib\dialects\mysql\query.js:54:18)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
GET /user/followers 500 27.011 ms - 511

리덕스사가로 바꿔서 실행하면 잘 작동하는데  swr로 바꾸면 sql문에 nan값이 들어갑니다. 제가 잘못한 부분이 어디인가요?

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

SQL 부분을 보시면 req.user.id가 NaN이네요. console.log(req.user)해보세요. 만약 undefined나 null이라면 로그인이 되어있지 않은 상황이라고 판단됩니다.

foxbox r님의 프로필 이미지
foxbox r

작성한 질문수

질문하기