[react-query] react-query의 query key는...

😎마치 useEffect의 의존성배열과 비슷하다!

 

리액트 쿼리는 모든 리렌더링에 대해 queryFn을 트리거하지 않습니다.

기본적인 유효기간(0초)가 지나도 마찬가지로 queryFn을 트리거하지 않아요

 

왜 그럴까요?

리액트에서 리렌더링은 굉장히 많이 일어날 수 있습니다.

이런 리렌더링마다 비용이 비싼 fetch 요청을 보내는 것은 미친짓이라고도 할 수 있습니다.

그러니... 한번 받아왔다면 revaildate가 필요하기전까지는 fetch를 하지 않는게 맞겠네요!

 

그런데 쿼리는 여러개일 수 있어요

각각의 쿼리에 대한 아이디가 있어야 어떤 쿼리가 바뀌었는지 인식할 수 있을 것이고

특정한 쿼리가 바뀌면 화면도 바뀌어주어야하겠죠?

 

마치 useEffect가 의존성배열에 있는 요소에 변화가 생기면 트리거되는것처럼

리액트 쿼리 역시 특정한 queryKey에 변화가 생기면 re-fetch가 트리거됩니다.

 

따라서 매개변수를 queryFn에 전달해주면 값이 변경될 때 거의 항상 데이터를 가져와요

이것을 이용해서 수동으로 re-fetch를 트리거시키기 위해

복잡하게 effects를 조정하는 대신 이런 방법을 채택할 수 있어지죠!

type State = 'all' | 'open' | 'done'
type Todo = {
  id: number
  state: State
}
type Todos = ReadonlyArray<Todo>

const fetchTodos = async (state: State): Promise<Todos> => {
  const response = await axios.get(`todos/${state}`)
  return response.data
}

export const useTodosQuery = (state: State) =>
  useQuery(['todos', state], () => fetchTodos(state))

이렇게하면 useTodosQuery를 작성해두면

useQuery의 queryFn에 변수를 전달해주지도 않는데 query key가 변경되기때문에

re-fetch가 자동으로 트리거됩니다.

---

🙄레퍼런스

https://tkdodo.eu/blog/practical-react-query

Practical React Query

https://parang.gatsbyjs.io/react/2022-react-01/

[번역] #1: 현실적인 리액트 쿼리