npm i react-query

• 라이브러리를 설치해줍니다.
• 직접 fetch 코드를 작성하는 것보다 구조적이고 편의성을 제공해줍니다.
• response도 caching 해줘서 직접 캐시하는 작업을 작성하지 않아도 됩니다 👍

const queryClient = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <RecoilRoot>
    <QueryClientProvider client={queryClient }>
      <RouterProvider router={router} />
    </QueryClientProvider>
  </RecoilRoot>
);

• queryClient를 만들어 Provider로 전달해줍니다.

export function fetchContacts() {
  const backend_url = "";
  return fetch(`${backend_url}/contacts`).then((res) => res.json());
}

• fetcher function을 만들어서 export 합니다.

const { isLoading, data } = useQuery("allContatcs", fetchContacts);

• Component에서 useQuery를 이용해 식별자 key를 지정하고, fecth function을 적용해서 사용해줍니다.
• Loading이 되면 data에 fetcher function에서 return한 respone를 넣어줍니다.

Test Tip

npm install -g -D json-server

• json server를 통해 backend에서 날아올 데이터의 형태를 Mockup 형태로 가볍게 테스트해볼 수 있습니다.

json-server --watch src/apis/db.json --port 3001

• json server는 따로 띄워줄 수 있는데, db.json에 Mockup 형태의 json 결과물을 둬서 실행해줍니다.

{
  "api": {
    "contacts": [
      {
        "id": "3df15081-762b-4f07-bde9-6d3ad3281582",
        "name": "John Doe",
        "created_at": "2025-05-06T06:29:43.038431+00:00",
        "phone": "1234567890",
        "address": "123 Elm St"
      },
      {
        "id": "305708be-74f8-424a-b694-d68a04d641ad",
        "name": "test",
        "created_at": "2025-05-06T07:31:58.793334+00:00",
        "phone": "12341234",
        "address": "testaddress"
      }
    ]
  }
}

• db.json 예시 입니다.

curl http://localhost:3001/contacts

• curl을 이용해서 간단하게 GET 테스트를 할 수 있습니다.
• ReactQuery 사용 시, 백엔드 없이 미리 테스트하기 가볍고 용이해보여서 자주 이용합니다 😁