From 5943cd339e3c9e8ad5a9f2e29e16401ee85e4453 Mon Sep 17 00:00:00 2001 From: ColorFilter Date: Sun, 7 Apr 2024 01:39:38 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(get-random-sentences.ts):=20add=20?= =?UTF-8?q?timeStamp=20property=20to=20RandomSentenceParams?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/get-random-sentences.ts | 2 +- .../hooks/use-random-sentence-form.ts | 37 ++++++++++++------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/features/syntax-analyzer/api/get-random-sentences.ts b/src/features/syntax-analyzer/api/get-random-sentences.ts index 14ac344..1b0a429 100644 --- a/src/features/syntax-analyzer/api/get-random-sentences.ts +++ b/src/features/syntax-analyzer/api/get-random-sentences.ts @@ -23,7 +23,7 @@ export const getRandomSentences = async < export const RANDOM_SENTENCE_BASE_KEY = ['random-sentences'] as const; export const useRandomSentenceQuery = ( - params: RandomSentenceParams, + params: RandomSentenceParams & { timeStamp: number }, options?: Partial>, ) => { return useQuery({ diff --git a/src/features/syntax-analyzer/hooks/use-random-sentence-form.ts b/src/features/syntax-analyzer/hooks/use-random-sentence-form.ts index c22c8b4..faeaab1 100644 --- a/src/features/syntax-analyzer/hooks/use-random-sentence-form.ts +++ b/src/features/syntax-analyzer/hooks/use-random-sentence-form.ts @@ -1,8 +1,8 @@ -import { useState } from 'react'; - +import { useBoolean } from '@chakra-ui/react'; import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; +import { useLocalStorage } from '@/base'; import { randomSentenceFormSchema, REMAINING_COUNT_BASE_KEY, @@ -19,30 +19,41 @@ export type RandomSentenceFormValues = { * yup 스키마의 cast 기능을 이용해 기본값 설정 * @see https://github.com/orgs/react-hook-form/discussions/1936 * */ -const defaultValues = randomSentenceFormSchema.cast({}); -const { topics, sent_count } = defaultValues; +const defaultFormValues = randomSentenceFormSchema.cast({}); +const { topics, sent_count } = defaultFormValues; +const defaultParams = { topics, sent_count, timeStamp: Date.now() }; export const useRandomSentenceForm = () => { - const [params, setParams] = useState({ topics, sent_count }); + const [readyToFetch, setReadyToFetch] = useBoolean(); + + const [params, setParams] = useLocalStorage( + 'random-sentence-params', + defaultParams, // 기본값을 넘겼어도 로컬 스토리지에 key 값이 있으면 해당 값 사용 + ); const methods = useForm({ - defaultValues, + defaultValues: { + ...defaultFormValues, + topics: params.topics, // 로컬 스토리지에 있는 값을 기본값으로 설정 + sent_count: params.sent_count, + }, resolver: yupResolver(randomSentenceFormSchema), reValidateMode: 'onSubmit', }); - // 쿼리가 비활성화 되자마자 캐시를 삭제하고 싶으면 gcTime 쿼리 옵션을 0으로 설정 - // 캐시 데이터가 있다면 쿼리가 활성화 됐을 때(마운트 등) 캐시 데이터 사용(staleTime 초과됐다면 리패치) - const { data, isFetching, refetch } = useRandomSentenceQuery(params, { - enabled: false, // 생성 버튼을 클릭했을 때만 수동으로 데이터 조회하므로 false로 설정 - staleTime: Infinity, // 데이터를 수동으로 조회하므로 자동 refetch 방지 + const { data, isFetching } = useRandomSentenceQuery(params, { + enabled: readyToFetch, + gcTime: 0, // 비활성화된 쿼리의 캐시 데이터는 바로 삭제 + staleTime: Infinity, // 일회성 데이터를 수동으로 조회하므로 자동 refetch 방지 meta: { invalidateQueries: REMAINING_COUNT_BASE_KEY }, }); const generateSentences = async () => { + if (!readyToFetch) setReadyToFetch.on(); // 쿼리 활성화 + const { topics, sent_count } = methods.getValues(); - setParams({ topics, sent_count }); - await refetch(); + // timeStamp 값이 바뀌면서 이전 쿼리키가 비활성화 되고 캐시 데이터에서 삭제됨 (gcTime 0이므로) + setParams({ topics, sent_count, timeStamp: Date.now() }); }; return { methods, data, isFetching, generateSentences };