React Router SSR 적용하고 새로고침시 좋아요 적용 안 되는 문제

Question

현재, 리액트 라우터 프레임워크 모드로 SSR을 적용하고 있고,react-query로 loader에서 가져온 데이터를 prefetchInfiniteQuery하고클라이언트에서 그 쿼리를 useInfiniteQuery로 받아오고 있습니다.SSR 적용 전에는 좋아요를 누르면 새로고침을 해도 적용이 잘 되었었는데,SSR 적용 후에는 좋아요를 누르고 새로고침을 누르면 당시에는 분명 잘 적용이 되는데새로고침시 좋아요를 누르지 않은 것으로 다시 돌아가게 됩니다.서버에서 가져오는 거니까 서버에 문제가 있나 싶어 얘기를 나눠봐도 캐싱을 하고 있지 않아 항상 최신순이라고 하고,무엇이 문제인지 모르겠습니다.일단은 프론트에서 데이터를 가져올 때 staleTime:0으로 설정하여(모임 데이터를 가져오는 useInfiniteQuery에) 마운트시 다시 한 번 refetch가 일어나도록 설정을 해뒀지만이 방법을 쓰는게 맞는 건지 아직까지 잘 모르겠습니다..제미나이에 물어봤을 때는 서버 문제라고 하고,서버에서 실시간이 적용될시 staleTime을 원래 대로 되돌려도 문제가 없을 거라고 하는데저는 이게 프론트 문제인지 서버문제인지 아직까지 잘 모르겠네요..분명 CSR만 적용했을 당시에는 새로고침을 해도 좋아요를 잘 불러왔습니다.도움을 주실 수 있으신 분이 계실까요?- root.tsxexport const queryClient = new QueryClient({ defaultOptions: { queries: { throwOnError: true, retry: 3, staleTime: 5 * 60 * 1000, }, }, });- 데이터를 가져올 때import { useInfiniteQuery } from '@tanstack/react-query'; import { getMeetingList } from '@/api/meetings'; import type { MeetingListFilters } from '@/schemas/meetingFilters'; export default function useMeetingsQuery(meetingFilters: MeetingListFilters) { return useInfiniteQuery({ queryKey: ['meetings', meetingFilters], queryFn: ({ pageParam }) => getMeetingList(meetingFilters, pageParam), initialPageParam: 0, getNextPageParam: (lastPage) => { return lastPage.pageInfo.hasNext ? lastPage.pageInfo.nextCursor : undefined; }, staleTime: 0, // maxPages: 나중에 위의 페이지가 사라질 것을 고려하여 사용X }); }- 좋아요를 눌렀을 때import { queryClient } from '@/root'; import { useMutation } from '@tanstack/react-query'; import { likeMeeting } from '@/api/meetings'; import toast from 'react-hot-toast'; export default function useLikeMeetingMutation(refetchKey: string) { return useMutation({ mutationFn: (meeting: { id: number; liked: boolean }) => likeMeeting(meeting), onSuccess: (_, variables) => { toast.success( `해당 모임의 ${variables.liked ? '좋아요를 취소하였습니다.' : ' 좋아요를 눌렀습니다.'}`, ); queryClient.refetchQueries({ queryKey: [refetchKey] }); }, onError: (err, variables) => { toast.error( `해당 모임의 ${variables.liked ? '좋아요 취소를' : '좋아요 누르는 것을'} 실패하였습니다. 다시 시도해주세요.`, ); console.error('Meeting cancellation failed:', err); }, }); }- meetings.tsximport { useMemo } from 'react'; import { queryClient } from '@/root'; import { dehydrate, HydrationBoundary } from '@tanstack/react-query'; import { MeetingListFilterSchema, type MeetingListFilters, } from '@/schemas/meetingFilters'; import { withOptionalAuth } from '@/lib/auth.server'; import { getMeetingList } from '@/api/meetings'; import { getTopics } from '@/api/topics'; import { useUrlFilters } from '@/hooks/ui/userUrlFilters'; import useMeetingsQuery from '@/hooks/api/useMeetingsQuery'; import useInfiniteScroll from '@/hooks/ui/useInfiniteScroll'; import { useModalStore } from '@/stores/useModalStore'; import { useRouteLoaderData } from 'react-router'; import type { Route } from './+types/meetings'; import type { Topic } from '@/types/entities'; import CommonTemplate from '@/components/templates/CommonTemplate'; import Banner from '@/components/atoms/Banner'; import MeetingFilterControls from '@/components/organisms/MeetingFilterControls'; import MeetingCardGroup from '@/components/sections/MeetingCardGroup'; import LoadingSpinner from '@/components/molecules/LoadingSpinner'; import { Button } from '@/components/atoms/button/Button'; export async function loader({ request }: Route.LoaderArgs) { const authResult = await withOptionalAuth(request, async () => { const url = new URL(request.url); const urlSearchParams = new URLSearchParams(url.search); const rawFilters = Object.fromEntries(urlSearchParams.entries()); const parsedFilters: MeetingListFilters = MeetingListFilterSchema.parse({ ...rawFilters, }); const cookiesHeaderFromBrowser = request.headers.get('Cookie'); const axiosRequestConfigHeaders: { Cookie?: string } = {}; if (cookiesHeaderFromBrowser) { axiosRequestConfigHeaders.Cookie = cookiesHeaderFromBrowser; } queryClient.prefetchInfiniteQuery({ queryKey: ['meetings', parsedFilters], queryFn: ({ pageParam }) => getMeetingList(parsedFilters, pageParam, { headers: axiosRequestConfigHeaders, }), initialPageParam: 0, }); const topics = await getTopics({ headers: axiosRequestConfigHeaders, }); return { filters: parsedFilters, topics, }; }); const loaderDataForComponent = authResult.data; const dehydratedState = dehydrate(queryClient); return { ...loaderDataForComponent, dehydratedState }; } export default function Meetings({ loaderData }: Route.ComponentProps) { const { open } = useModalStore(); const rootLoaderData = useRouteLoaderData('root'); const user = rootLoaderData.user; const { data, dehydratedState } = loaderData; const initialFilters = data?.filters; const topics = data?.topics; const { filters: meetingFilters, setFilter } = useUrlFilters( MeetingListFilterSchema, initialFilters, ); const { data: clientMeetings, isLoading, isFetching, fetchNextPage, hasNextPage, isFetchingNextPage, } = useMeetingsQuery(meetingFilters); useInfiniteScroll({ fetchNextPage, hasNextPage, isFetchingNextPage, }); const meetings = useMemo(() => { return clientMeetings?.pages?.flatMap((page) => page.meetings) || []; }, [clientMeetings]); const allTopics = useMemo(() => { const defaultAllOption = { label: '전체', value: 'all' }; if (topics && topics.length > 0) { const apiTopics = topics.map((item: Topic) => ({ label: item.topic, value: String(item.topic), })); return [defaultAllOption, ...apiTopics]; } return [defaultAllOption]; }, [topics]); console.log(meetings); return ( {(isLoading || isFetching || isFetchingNextPage) && } {user && ( )} ); }

React Router SSR 적용하고 새로고침시 좋아요 적용 안 되는 문제

0개의 답변

Q&A 목록