react-query-from-scratch

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

참고

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

• 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 객체 )