개발을 하면서 "쿼리를 날린다"는 표현을 종종 들었고 그것 외에도 정말 자주 마주치는 단어인데
이 단어가 무슨뜻인지 제대로 알지 못하였다.
실제로 이번 프로젝트에서도 react-query라는 기능을 사용했지만
비동기 작업에서의 결과값을 받아오는 기능 중 하나 라는 정도로 사용을 했지 이 쿼리라는게 정확히 어떤건지 알아야 겠다고 생각을 해서 조사를 시작했다.
조사를 시작한 가장 큰 계기는
저 invalidateQueries 라는 함수가
"갱신을 위해 쿼리키를 날리는" 함수라고 알고 있는데 이 과정 자체를 잘 모르겠어서 쿼리가 무엇인지,
쿼리키는 무엇인지 조사해보았다.
Query
"데이터베이스로부터 정보를 요청하는 것" 을 의미한다.
쿼리는 웹 서버에 특정한 정보를 웹 클라이언트 요청에 의해 처리하는 것이며,
검색된 결과를 자유로이 조회할 수 있는 기능을 지원하는 것이 특징이다.
그렇다면 querykey는 무엇일까??
찾아보기도 하고 같이 작업한 백엔드분들한테도 쿼리키가 도대체 뭐냐고 여쭤봤는데 요청 자체를 쿼리라고 하고 쿼리키는 무슨말인지 모르겠다 는 답변을 받았다.
쿼리키는 react-query에서만 사용되는 기능인것같다.
querykey
querykey란 useQuery마다 부여되는 고유한 키값이다.
링크의 예시 코드를 보면
const res = useQuery('persons', queryFn);
// 배열 - 1
const res = useQuery(['persons'], queryFn);아마 첫번째 인자가 쿼리키의 자리인듯 하다.
여기서 중요한것은 react-query는 문자열로 작성해도 자동으로 길이가 1인 배열로 인식을 한다고 한다.
때문에 위 아래 둘 다 같은 쿼리키로 인식을 한다.
// 배열 - 2
const res = useQuery(['persons', 'add Id'], queryFn);
// 배열 - 3
const res = useQuery(['add Id', 'persons'], queryFn);또한 react-query에서는 쿼리 키가 입력될 때 순서를 보장해주기 때문에 배열2와 배열3은 서로 다른 쿼리키를 가지고 있는것으로 간주된다.
querykey의 역할
React Query가 query 캐싱을 관리할 수 있도록 도와주는 역할을 한다.
const getPersons1 = () => {
const res1 = useQuery(['persons'], queryFn1);
}
const getPersons2 = () => {
const res2 = useQuery(['persons'], queryFn2);
}
링크코드 참조
위의 두 함수는 동일한 쿼리키를 사용한 다른 요청을 보낸다.
하지만 쿼리키가 동일하기 때문에 이미 해당 쿼리키에 대한 결과값이 있기때문에 2번째 요청이 가지않고 1번째의 결과값을
그대로 사용한다.
(queryFn은 실행하는 함수, 서버에 요청하는 함수 라고 생각하면 될 것 같다.)
여기까지 정리하면 처음의 의문점이 해결이 되는것같다.
useQuery는 querykey랑 queryFn(쿼리함수)를 인자로 받는데
쿼리키에 의한 쿼리 캐싱을 한다.
서로 다른 요청을 보내도 키가 같으면 같은 결과값을 받는(정확히는 기존에 캐싱된 결과값을 사용하는), 그래서 키를 날려야지만 새로운 결과값을 받아오기 때문에 invalidateQueries 함수로 쿼리키를 날리는 과정이 있었던것
HTTP 프로토콜에서 GET요청이 캐싱되는거랑 비슷한 원리인것같다.
