staleTime은 react-query의 useQuery 훅에서 사용되는 옵션 중 하나로, 캐시된 데이터의 유효 기간을 지정하는 데 사용됩니다. 기본적으로 staleTime은 0으로 설정되어 있으며, 이는 데이터가 한 번 가져와진 후에는 캐시된 데이터를 사용하고 바로 네트워크 요청을 수행하는 것을 의미합니다.
하지만 staleTime을 설정하여 데이터의 유효 기간을 지정할 수 있습니다. 예를 들어, staleTime을 10초로 설정하면, 데이터를 가져온 후 10초 동안은 캐시된 데이터를 사용하며 네트워크 요청을 생략합니다. 그러나 10초 이후에는 데이터의 유효성을 검사하고 필요한 경우 네트워크 요청을 수행하여 새로운 데이터를 가져옵니다.
staleTime은 쿼리별로 설정할 수 있으며, useQuery 훅에 staleTime 옵션을 전달하여 사용합니다. 예를 들어:
const { data } = useQuery('myQueryKey', fetchData, { staleTime: 10000 });위의 예제에서 staleTime은 10,000밀리초(10초)로 설정되었습니다.
invalidateQueries는 react-query에서 제공하는 함수로, 특정 쿼리 또는 쿼리 그룹의 캐시를 무효화하는 데 사용됩니다. 이를 통해 캐시된 데이터를 강제로 무효화하고 업데이트를 트리거할 수 있습니다.
invalidateQueries 함수는 useQueryClient 훅을 통해 얻은 queryClient 객체를 사용하여 호출됩니다. 예를 들어:
import { useQueryClient } from 'react-query';
const queryClient = useQueryClient();
// 단일 쿼리의 캐시 무효화
queryClient.invalidateQueries('myQueryKey');
// 쿼리 그룹의 캐시 무효화
queryClient.invalidateQueries(['user', 'posts']);위의 예제에서 'myQueryKey'는 단일 쿼리의 키를, ['user', 'posts']는 쿼리 그룹의 키를 나타냅니다. invalidateQueries 함수를 호출하면 해당 쿼리 또는 쿼리 그룹에 대한 캐시가 무효화되고, 필요한 경우에만 새로운 데이터를 가져올 수 있게 됩니다.
이렇게 staleTime과 invalidateQueries를 함께 사용하면, 데이터의 유효 기간을 지정하고 필요한 경우에만 업데이트할 수 있습니다.
