[23.02.14] TIL

에러

// Detail.tsx

const { data } = useQuery(['posts'], async () => {
    const response = await axios.get('<http://localhost:4000/posts>');
    return response.data;
  });

내가 쓴 글의 Data를 받아오기 위해, useQuery를 이용해 데이터를 불러왔다.

그러나 브라우저에서는 이러한 오류를 뱉었다.

 

 

 

 

해결을 위해 시도한 일

첫번째, 공식문서 읽어보기

https://tanstack.com/query/v4/docs/react/guides/query-keys

쿼리 키란?

• 쿼리 캐싱을 관리할 수 있는 key 라고 한다.
• 여러가지 설명이 나와있지만 이해하지 못했다….

 

두번째, 블로그 읽어보기

https://tech.kakao.com/2022/06/13/react-query/

• 카카오톡 개발블로그(?)에 있는 React Query 관련 글을 보았다.아..봐도 모르겠다.

 

세번째, 튜터님께 질문하기

• 쿼리키가 뭐가 되었던 상관은 없다.
• useQuery 동작하는 원리 와 힌트
  1. query Fucntion 실행
  2. 쿼리가 관리하는 캐시메모리가 있으면, posts 라는 key는 이 결과를 받아왔어. 라고 저장한다.(로컬스토리지처럼 키,벨류 형식)
  3. query Fucntion을 실행하지 않고 캐시메모리에 있는 것을 그대로 넘겨준다.
  4. Detail은 key를 다이나믹하게 줘야한다고 한다.
  5. key ${id} 이런식으로? key값은 다 달라야 하기에..

 

 

 

해결한 방법

정말 나는 바보인걸 확실하게 깨닫게 된 순간이였다..

QueryClient가 없다고 한 에러 메세지의 이유는, react Query를 잘못 import 해왔기 때문이다.

@tanstack/react-query 

이걸 import 해와야되는데 그냥 react-query를 import 하고 있었다 ㅠㅠㅠㅠ

그리고 detail에서 query key를 동적으로 바꿔주는건 생각보다 쉬웠다.

 

const { id } = useParams();
console.log('id: ', id);

const { data } = useQuery(['post', id], async () => {
const response = await axios.get('http://localhost:4000/posts');
return response.data;
});

일단 home 에서 글을 클릭 할 때, 글의 category/글의 id  로 URL이 이동되게 설정해줬다.

그리고 params로 글의 id를 가지고 와서, 각 글마다 다른 key값을 주니 정상적으로 작동한다.

---

오늘의 두번째 문제..에러는 아니고..

내가 하고싶었던 건, 컴포넌트 1개로 4개의 카테고리 데이터를 뿌려주는것이였다.

놀이 클릭하면 놀이페이지로 이동, 카테고리가 놀이인 데이터만 뿌려주고

공부 클릭하면 공부페이지로 이동, 카테고리가 공부인 데이터만 뿌려주고..

noSQL은 파이어베이스처럼 데이터를 where문같은걸 사용해 원하는 데이터만 골라올 수 없다고 한다.

ㅡ럼 어떻게 가져오는데.........ㅠㅠ 위에 에러를 해결하니 또 다른 난관이..

이걸로 또 몇시간 날려먹었다.

 

 

해결한 방법

결국 찾은 정말 간단한방법..

https://opentutorials.org/course/62/5125

생활코딩 블로그인 것 같다.

이렇게 url 주소를 통해 원하는 데이터만 골라서 가져올 수 있는 아주 신박한 방법이 있던 것이다..

감동..정말..ㅠㅠㅠ

이런 방법은 정말 처음알았다.

근데 여기까진 좋다.

그럼 카테고리가 전체 일때는..?

이것도 음..어떻게던 가능할것같긴 한데.....