inflearn logo
강의

Khóa học

Chia sẻ kiến thức

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

Client react-query

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

384

chisgm3118773

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

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>
  )
}

 

 

 

react next.js react-query next-auth msw

Câu trả lời 2

0

chisgm3118773

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

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

0

chisgm3118773

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

0

zerocho

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

0

zerocho

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

캡처링부분 질문있습니다.

0

74

2

깃에 소스코드를 찾을 수 없습니다.

0

113

2

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

0

98

1

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

0

109

2

css 라이브러리 추천 부탁드립니다

0

140

2

팔로우 추천 목록이 빈 배열로 들어옵니다.

0

131

1

게시물 업로드 시 userId가 undefined로 들어가는 오류

0

119

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

172

1

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

0

184

3

폴링이 필요없는 이유

0

93

2

next Request Memoization과 react cache

0

109

2

seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?

0

84

2

next.js 서버fetch 에러 fallback ui 구현 방법

0

173

2

프레임워크 여론 파악법

0

125

2

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

0

103

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

102

2

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

0

66

2

Auth.js 사용 시 authorize 함수가 호출되지 않습니다

0

132

2

next.js 에서 로그인에 관하여

0

138

1

Next의 route handler에 대한 질문이 있습니다.

0

101

2

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

0

98

2

프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.

0

85

2

vanilla-extract 못찾는 문제

0

230

2

fetch 캐싱과 revalidate 관련

0

84

2