강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của chisgm3118773
chisgm3118773

câu hỏi đã được viết

Tiếp theo + Tạo dịch vụ SNS bằng React Query

Client react-query

미리보기했을때 저는 아예안뜨는데 뭐가 문제일까요?

Viết

·

374

0

저는 미리보기하면 PostRecommend.tsx부분이 아예 안뜨는데 뭐가 잘못된지 모르겠어서 질문드립니다.
(단, 화면에 정상적으로 post들은 문제없이 뜹니다.)

<PostRecommend.tsx>의 코드는 아래입니다.

"use client"
import Post from "../../_component/Post";
import { useQuery } from "@tanstack/react-query"
import { getPostRecommends } from "../_lib/getPostRecommends"
import { Post as IPost } from "@/app/model/post";

export default function PostRecommend(){
    const {data} = useQuery<IPost[]>({queryKey:['posts','recommends'],queryFn:getPostRecommends});
    return data?.map((post)=>
        <Post key={post.postId} post={post}/>
    )
}

 

또한 Post.tsx에서 넘겨받은 post를 console.log해봤는데

undefined가 나와 이것과 연관되어있지않나 싶어서 Post.tsx의 코드도 올리겠습니다.

import style from './post.module.css';
import Link from "next/link";
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ko';
import ActionButtons from "@/app/(afterLogin)/_component/ActionButtons";
import PostArticle from "@/app/(afterLogin)/_component/PostArticle";
import {faker} from '@faker-js/faker';
import PostImages from "@/app/(afterLogin)/_component/PostImages";
import { Post as IPost } from '@/app/model/post';

dayjs.locale('ko');
dayjs.extend(relativeTime)

type Props = {
  noImage?: boolean,
  post:IPost,
}
export default function Post({ noImage,post }: Props) {
  const target = post;
  console.log("+++++++@@@@@@"+target);
  return (
    <PostArticle post={target}>
      <div className={style.postWrapper}>
        <div className={style.postUserSection}>
          
          <Link href={`/${target.User.id}`} className={style.postUserImage}>
            <img src={target.User.image} alt={target.User.nickname}/>
            <div className={style.postShade}/>
          </Link>
        </div>
        <div className={style.postBody}>
          <div className={style.postMeta}>
            <Link href={`/${target.User.id}`}>
              <span className={style.postUserName}>{target.User.nickname}</span>
              &nbsp;
              <span className={style.postUserId}>@{target.User.id}</span>
              &nbsp;
              ·
              &nbsp;
            </Link>
            <span className={style.postDate}>{dayjs(target.createdAt).fromNow(true)}</span>
          </div>
          <div>{target.content}</div>
          {!noImage && <div>
            <PostImages post={target} />
          </div>}
          <ActionButtons/>
        </div>
      </div>
    </PostArticle>
  )
}

 

 

 

reactnext.jsreact-querynext-authmsw

Câu trả lời 2

0

chisgm3118773님의 프로필 이미지
chisgm3118773
Người đặt câu hỏi

영상 후반부에 f12개발자도구에서 network텝의 미리보기를 보면 제로초님은 PostRecommends의 본문 내용(포스트의 그림 링크와 본문 내용)이 모두 뜨는데 저는 PostRecommends이 안뜨고,
화면에는 정상적으로 포스트들이 떠서 여쭤본겁니다.

+포스트들의 Date가 모두 몇초전으로뜨던 오류가있었는데 해결해서 이부분은 삭제했습니다.

chisgm3118773님의 프로필 이미지
chisgm3118773
Người đặt câu hỏi

+추가로 제로초님 github을 그대로 clone해서 실행해도 미리보기해보면 PostRecommends쪽은 안떠요 ㅜㅜ

zerocho님의 프로필 이미지
zerocho
Người chia sẻ kiến thức

아, 혹시 Suspense Streaming 강의에서 loading.tsx나 Suspense, useSuspenseInfiniteQuery를 적용하셨나요? 셋 중 하나만 해도 PostRecommends가 안 뜹니다.

0

zerocho님의 프로필 이미지
zerocho
Người chia sẻ kiến thức

미리보기가 뭘 말씀하시는건가요? PostRecommends가 있어야 Post가 뜨는데 Post만 뜬다는 게 어떤 상황이신가요?

Hình ảnh hồ sơ của chisgm3118773
chisgm3118773

câu hỏi đã được viết

Đặt câu hỏi