2024-11-25(rest api , axios, tanstack query)

REST API : 클라이언트-서버 통신에서 HTTP 메서드와 URL을 통해 요청을 식별하고 자원을 주고받는 규칙

*supabase는 REST API가 아님

 

CORS에러는 브라우저환경에서만!

 

payload : 서버한테 보내는 데이터그룹

content-type : payload 타입

 

axios 장점

- json데이터형식을 알아서 변환해줌

- custom intance와 interceptor를 이용한 코드 재사용

- 크로스 브라우징에 유리

 

get 요청 : axios.get(url[, config]); 

post 요청 : axios.post(url[, data[, config]]);

patch 요청 : axios.patch(url[, data[, config]]);

delete 요청 : axios.delete(url,[, config])

*선택적 매개변수 : [, config]

 

matation : CUD(create,update,delete)

 

axios custom instance : axios.create({baseURL: ~~~})

 

middleware : 마치 경유지(건너가는곳)

.interceptors.request.use(성공 callback, 실패 callback)

 

<QueryClientProvider client={queryClient}>는 main.jsx에!

=> 함수형 컴포넌트가 아니라서 재렌더링 대상이 안됨!

 

Tanstack Query

isPending :  마치 이륙전, api요청이 아직 서버한테 안감

useQuery , useSelector , context api  공통점 : 읽고 구독함!

 

useMutation : 객체!

mutate(인자는 mutationFn 인자로!) : 위에 메서드

const addMutation = useMutation({
	mutationFn: (newTodo) => ....
})


const onSubmit = async (e) => {
	...
	addMutation.mutate(newTodo);
};

 

.invalidateQueries : 무효화!

=> by useQueryClient

 

서버 상태 - tanstack query

클라이언트 상태 - 리덕스 / context / zustand