[7/22] React Query - queryClient

queryClient: 전역에서 쿼리 상태를 직접 제어

- QueryClientProvier를 통해 등록되고, 내부에 있는 데이터 캐시, 상태 등을 수동으로 조작

- 캐시 읽기, 쓰기, 무효화, 제거 등 

import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

getQueryData(key) : 캐시된 데이터 반환

const queryClient = useQueryClient();
const cachedData = queryClient.getQueryData(['user']);

setQueryData(key, data) : 캐시 값 수동 설정

queryClient.setQueryData(['cart'], (old) => ({
	...old,
    items: [...old.items, newItem],
}));

invalidateQueries(key) : 해당 쿼리를 무효화(stale) 처리하여 자동 refetch 유도

queryClient.invalidateQueries(['user']);

removeQueires(key) : 캐시 제거

queryClient.removeQueries(['user']);

refetchQueries(key) : 강제 refetch

 

등록 버튼 클릭 시 목록 업데이트

const queryClient = useQueryClient();

const mutation = useMutation({
	mutationFn: createPost,
    onSuccess: () => {
    	queryClient.invalidateQueries(['posts']); // 리스트 다시 불러오기
    },
});

<button onClick={() => mutation.mutate({ title: 'New' })}>
	등록하기
</button>