react - useQuery typescript, 서버적용 실제적용

react-query

useQuery란?

1. useQuery는 백엔드에서 api요청시 "GET"을 할 때 사용한다.
2. 언제 요청할 것인가? 몇 번 보낼 것인가? 몇 분마다 다시 보낼것인가? 화면을 다시 바꿨을때 다시 axios요청 보낼 것인가, api요청시 대기 중임을 알려줄때 사용 할 수 있다.

useQuery 사용 방법

1. 받아올 데이터의 타입을 설정해주기!

board의 데이터들

export interface BoardData {
  content: string
  date: string
  level: number
  status: number
  title: string
  type: number
  userId: number
  views: number
  id?: number
  nickname: string
  email: string
  reviews?: number
}

게시글 리스트와 게시글 디테일을 가지고 오는 useHooks를 설정해줌

export const getBoards = () => {
  return axios
    .get(`${process.env.BASE_URL}boards`)
    .then((res) => res.data)
}

export const getBoard = (id: number | null) => {
  return axios
  .get(`${process.env.BASE_URL}boards/${id}`)
  .then((res) => res.data)
}

useQuery 사용!!

1. const {어떤 것을 가져올 것인가}

ex) isLoading -> 요청 보냈을 때 로딩중인상태
isError -> 에러가 발생한 상태
data -> 내가 필요한 데이터
refetch -> 다시 axios보냄
error -> 에러종류

2. useQuery<가지고올 데이터의 타입>([react에서 useQuery가 사용될 주소], () => axios방식)

cf) 만약 변수가 필요하다면

2. useQuery<가지고올 데이터의 타입>([react에서 useQuery가 사용될 주소], axios방식)

cf) 변수가 필요없다면

ps) 변수가 필요하면 변수도 추가해줘야함

const {isLoading, data, ... } = useQuery<BoardData>(['freeboard']),getBoards)

const {
    isLoading,
    data: article,
    isError,
    error,
    refetch,
  } = useQuery<BoardData>(['freeboard', id], () => getBoard(id))드를 입력하세요