[NEXT.JS] React-Query를 통해 데이터 가져오기

개요

회사 서비스 개발을 위해 react-query를 사용하게 되었고, 이를 정리하기 위해 글을 작성해보았다.

 

동작 구조

home 페이지가 호출될 때, backend에서 데이터를 가져오고 이를 보여주는 구조이다.

 

구조

실제 상용 데이터들이라 이름은 임의로 변경했다. 간단하게 FLOW만 보면 좋을 것 같다.

/src/app/home/page.body.tsx

'use client'

export default function HomeBody() {
  const { data, isSuccess } = useHomeContentsQuery()
  const { setError } = useErrorStore()

  useEffect(() => {
    if (isSuccess) {
      if (data.status !== 200) {
        setError(true, data.message)
      }
    }
  }, [data])

  return (
    <>
      {data?.data && (
        <>
          <HomeBanner bannerList={data.data.data1} />
          <HomeList buyHighRank={data.data.data2} />
          <HomeCard contents={data.data.data3} />
        </>
      )}
    </>
  )
}

useHomeContentsQuery()를 통해 react-query를 호출한다.

 

/src/queries/query.home.tsx

export function useHomeContentsQuery(): any {
  return useQuery({
    queryKey: [HomeContentsQueryKey.QUERY_LIST_CONTENTS],
    queryFn: getHomeContents,
  })
}

react-query에서 query key를 지정하고 backend와 통신하는 Function을 호출한다.

/src/api/api.home.tsx

export async function getHomeContents() {
  const response = await HttpClient.get(Home.CONTENTS, { channelCd: 1 })

  return response
}

fetch를 통해 받은 데이터를 return한다.