Guides&Concepts_(Queries & Qeury Keys)

Query basics

쿼리는 unique key에 묶인 비동기 데이터 소스에 의한 *선언적 의존성이다.

쿼리는 서버로부터 데이터를 받아오기위해 Promise기반 메서드와 함께 사용될 수 있다.

만약 사용하는 메서드가 서버측의 데이터를 수정한는 메서드라면 차라리 Mutation을 사용하는 것이 낫다.

선언적 의존성이란 말이 어렵다.
프로그래밍에서 '선언적'이란 어떤 작업을 어떻게 수행할지를 직접 명시하지 않고도 원하는 결과를 설명하는 것을 의미한다. 예를들어 리액트에서 JSX를 사용하여 UI를 정의할때, 어떻게 UI가 그려지는지는 직접 명시하지않지만 어떤 컴포넌트와 어떤 구조로 UI를 나타내고 싶은지를 선언하는 것과 같다.
프로그래밍에서의 '의존성'이란 비동기 데이터 소스에서 데이터를 가져올 때, 해당 데이터에 의존하는 것을 의미한다. 즉, 어떤 데이터가 변경된다면 해당 데이터를 사용하는 부분도 데이터변경에 '의존'해 업데이트되어야한다.

"Declarative dependency on an asynchronous source of data"를 다시 이해해보자. 이 개념은 비동기 데이터 소스에 대한 의존성을 선언적으로 정의한다는 것을 나타낸다. 즉, 어떤 데이터가 비동기적으로 변경되었을 때, 이 변경사항에 의존하는 부분을 업데이트하거나 다시 렌더링하는 방식을 뜻하는 것이다. 사실 나는 아직도 잘 모르겠다.

 

쿼리를 사용하려면 적어도 한번은 useQuery훅을 사용해야한다.

useQuery훅은 기본적으로 다음과 같이 사용된다. (쿼리를 위한 unique key + promise기반 메서드)

이때 unique key는 데이터를 다시 받아오고 저장하고 queries에 공유할때 쓰인다.

 function Todos() {
   const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
 
   if (isLoading) {
     return <span>Loading...</span>
   }
 
   if (isError) {
     return <span>Error: {error.message}</span>
   }
 
   // We can assume by this point that `isSuccess === true`
   return (
     <ul>
       {data.map(todo => (
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

---

Query Keys

React Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리한다. 쿼리키는 간단하게 쓰려면 string타입으로 쓸수도 있고, 복잡하게 쓰려면 배열, 중첩된객체로도 사용가능하다. 쿼리키가 unique하고 serializable하다면 언제나 사용가능하다.

 

String-only Query Keys

React Query는 쿼리 키의 가장 간단한 버전이 string타입의 쿼리키이다. string타입으로 작성을 해도 내부적인 로직에 의해 배열로 변환된다. 다음에 경우 사용하면 유용한 방식이다.

• query가 일반적인 인덱스 형태의 목록들인 경우 (데이터가 상품리스트같은것들)
• 계층 구조가 없는 query의 경우 (데이터가 트리형태로 위계가 있는 것이 아닌 경우 (상품 리뷰 등..)

 

Array Keys

쿼리 키를 더 고유하게 묘사하기위해 array타입으로도 작성가능하다. 다음에 경우 사용하면 유용한 방식이다.

• 데이터가 계층적이거나 중첩된 경우
• 아이디, 인덱스 기타 기본 유형을 전달하여 항목을 고유하게 식별해야 하는 경우
• 추가적인 매개변수를 가지는 경우

 // An individual todo
 useQuery(['todo', 5], ...)
 // queryKey === ['todo', 5]
 
 // An individual todo in a "preview" format
 useQuery(['todo', 5, { preview: true }], ...)
 // queryKey === ['todo', 5, { preview: true }]
 
 // A list of todos that are "done"
 useQuery(['todos', { type: 'done' }], ...)
 // queryKey === ['todos', { type: 'done' }]

 

Unique Query Keys or not

인덱스는 기본적으로 순서가 있는 데이터타입이며, 객체는 순서가 없는 데이터타입이다. 이러한 상황은 query key에도 반영된다.

 

순서가 없는 객체타입에서는 다음과 같은 모든 쿼리키가 동일한 것으로 여겨진다.

또한, 세번째줄과 같이 undefined라는 value를 가지는 프로퍼티는 직렬화되지 않으므로 첫번째줄, 두번째줄과 완벽히 같다.

 useQuery(['todos', { status, page }], ...)
 useQuery(['todos', { page, status }], ...)
 useQuery(['todos', { page, status, other: undefined }], ...)

다음의 예시는 모두 다른 query key들이다.

 useQuery(['todos', status, page], ...)
 useQuery(['todos', page, status], ...)
 useQuery(['todos', undefined, page, status], ...)

 

If your query function depends on a variable, include it in your query key

만약 query function이 어떠한 변수에 의존하고 있다면 변수를 쿼리키에 포함시켜야한다. 그럼, 그 변수의 상태가 변경될때마다 알아서 

refetch해준다. 

  const {
    isLoading,
    error,
    data: reserchedVideo,
    refetch,
  } = useQuery(
    ["reserchedvideo", refetching],
    () => getReserchedVideos(typing),
    {
      staleTime: 1000 * 60 * 5,
    }
  );