리액트 쿼리, key를 사용한 일부 fetch

고민사항

• 원래는 전체 정보를 매번 fetch 해왔습니다.
• 다만 매번 전체 정보를 받아오는것이 오버헤드가 크다고 판단되어 id를 통해 일부 정보만 fetch 해올 수 있게 로직을 변경해보았습니다.

---

리액트 쿼리의 sub key

리액트 쿼리에서 키는 배열로 받아옵니다. 처음에는 왜 굳이 배열로 받을까 생각했는데, 서브키를 통해 더 세부적으로 데이터를 불러올 수 있다는 것을 알게 되었습니다.

쿼리(Query)

서버 상태의 단위

• 각각의 쿼리는 서버에서 데이터를 요청하고, 그 데이터 상태를 캐시하고 관리
• 일반적으로 API 단위로 분리합니다.
• 고유한 쿼리 키(Query Key)로 데이터를 식별합니다.
  • 캐시를 관리하기 위한 목적
  • 해시값을 생성해 데이터를 매핑

퀴리키 / 서브키

• 쿼리 키(Query Key): 데이터를 구별하는 고유한 키
  • 예를 들어, ['todos']는 할 일 목록 전체를 의미합니다.
• 서브 키(Sub-key): 쿼리 키의 하위 키로, 데이터를 더 세부적으로 구별하기 위해 사용
  • 예를 들어, ['todos', { id: 1 }]는 특정 id를 가진 할 일 항목을 의미합니다.

---

실제로 사용해보기

서브 키를 추가해 일부 fetch를 구현해보았습니다.

1. 일부 fetch api 함수 만들기

export async function fetchTablesByName(tableName: string) {
  const response = await axiosInstance.get(`/tables/${tableName}`)
  return response.data.data
}

2. 서브 키를 받는 쿼리

• tableName, 즉 서브키를 받아와서 useQuery를 호출하는 커스텀 훅 함수

export function useTableByName(tableName: string | null) {
  return useQuery(
    [QUERY_KEYS.TABLES, tableName],
    () => fetchTablesByName(tableName!),
    {
      refetchOnWindowFocus: false,
      enabled: !!tableName,
    }
  )
}

3. 이제 일부 fetch를 사용할 수 있습니다!

const {
    data: selectedTable,
    isLoading,
    isError,
  } = useTableByName(selectedTableName)
  
  
  return (
	  {selectedTable.columns.map((row: TableColumnType) => (
	  	  <TableRow key={generateKey(row)}>
	  	  	  {Object.values(row).map((cell) => (
	  	  	  	  <TableCell key={generateKey(cell)}>
                    {cell === null && '-'}
                    {cell === true && <Check className="w-4 text-primary" />}
	  	  	  	  	  {typeof cell === 'string' && cell}
	  	  	 	   </TableCell>
	  	  	  ))}
	  	  </TableRow>
	  ))}
  )