useQuery , useSuspenseQuery , useMutation 구현해 보기

[tkp12345]

react query 의 api hooks 들을 직접 구현해봅시다

• useQuery, useMutation, useSuspenseQuery

1. useQuery

구현

interface useQueryProps{
  queryFn:()=>Promise<AxiosResponse>
}

const useQuery = <TData>({ queryFn }: useQueryProps) => {

   // 🧑🏻‍🎨 구현 해주세요

  return {
    data,
    error,
    isLoading,
  }
}

사용시

 const {data , isLoading , error} = useQuery<User>(()=>api.get('/user'))

2. useMutation

구현

interface useMutationProps<TData, TVariables> {
  mutationFn: (variables: TVariables) => Promise<AxiosResponse<TData>>
}

const useMutation = <TData = unknown, TVariables = unknown>({ mutationFn }: useMutationProps) => {
    // 🧑🏻‍🎨 구현 해주세요

    
  const mutate = async (variables: TVariables) => {
     // 🧑🏻‍🎨 구현 해주세요

  }

  return {
    mutate,
    data,
    error,
    isLoading,
  }
}

사용시

const { mutate, data, error, isLoading } = useMutation<User, UserVariables>({
  mutationFn: (newUser) => api.post<User>('/user', newUser),
})

const updateUser = () => {
  mutate({ name: 'roberto', age: 44 })
}

3. useSuspenseQuery

 시간나면  ( hint :  Promise 객체 )

[aahreum]

참고 (React Query 비공식 한글 문서)

https://react-query.kro.kr/docs/getting-started
https://www.codingmax.net/courses/ko-react-query/intro/lec0001

공식문서 (영문)

https://tanstack.com/query/latest/docs/framework/react/overview

[aahreum]

useMutation PR

#249

useQuery PR

#207