react-query 카테고리별 데이터 가져오기 (+ 반복되는 코드 줄이기)

개발환경 

* react

* typeScript

* Firebase

* react-query

 

 

react-query로 데이터 가져오기 + firebase

[api.ts]

import { db } from '../shared/firebase';

import { collection, getDocs, orderBy, query, where } from 'firebase/firestore';

import { PostType } from '../types/Posts';

//관리자 (콘텐츠 by Mango)

export const getAdminPostList = async (): Promise<PostType[]> => {

  const q = query(collection(db, 'test'), where('role', '==', 'admin'));

  const querySnapShot = await getDocs(q);

  return querySnapShot.docs.map((doc) => ({

    id: doc.id,

    ...(doc.data() as Omit<PostType, 'id'>) //id 제외하고 나머지 필드를 PostType으로 변환

  }));

};

▶ 반환값 타입 : Promise<PostType[ ]> : PostType 배열을 포함하는 프로미스

▶ getDocs(q) : 쿼리 결과 (q: 쿼리 객체)

▶ querySnapShot.docs.map() : PostType 타입의 객체로 변환

 

[Posts.ts]

export type PostType = {

  category: string;

  id: string;

  title: string;

  content: string;

  uid: null;

  hashtag: null;

  createdAt: number;

  updatedAt: number;

  likeCount: number;

  likedUsers: null;

  role: string;

};

 

[ViewAllBody.tsx] 에서 useQuery를 사용해서 데이터 가져오기

▶ useQuery는 객체로 queryKey와 queryFn이 들어간다

★ 실수했던 부분  : queryKey를 String으로 넣어서 오류가 발생했었음 => 객체로 수정 완료.

 

 

[반복되는 코드 줄이기]

1. react-query로 카데고리별 데이터 가져오기

ViewAllBody.tsx (변경 전)

const {

    data: adminList,

    isLoading: adminLoading,

    isError: adminError

  } = useQuery({ queryKey: [QUERY_KEYS.ADMIN], queryFn: getAdminPostList });

  console.log('adminList', adminList);

  const {

    data: knowHowList,

    isLoading: knowHowListLoading,

    isError: knowHowError

  } = useQuery({ queryKey: [QUERY_KEYS.KNOWHOW], queryFn: getknowHowList });

  const {

    data: recommendList,

    isLoading: recommendListLoading,

    isError: recommendError

  } = useQuery({ queryKey: [QUERY_KEYS.RECOMMEND], queryFn: getRecommendList });

  const {

    data: shareList,

    isLoading: shareListLoading,

    isError: shareError

  } = useQuery({ queryKey: [QUERY_KEYS.SHARE], queryFn: getShareList });

  const {

    data: habitList,

    isLoading: habitListLoading,

    isError: habiteError

  } = useQuery({ queryKey: [QUERY_KEYS.HABIT], queryFn: getHabitList });

 

 

(변경 후)

  const adminQuery = useQuery({ queryKey: [QUERY_KEYS.ADMIN], queryFn: getAdminPostList });

  const knowHowQuery = useQuery({ queryKey: [QUERY_KEYS.KNOWHOW], queryFn: getknowHowList });

  const recommendQuery = useQuery({ queryKey: [QUERY_KEYS.RECOMMEND], queryFn: getRecommendList });

  const shareQuery = useQuery({ queryKey: [QUERY_KEYS.SHARE], queryFn: getShareList });

  const habitQuery = useQuery({ queryKey: [QUERY_KEYS.HABIT], queryFn: getHabitList });

const isLoading =

    adminQuery.isLoading ||

    knowHowQuery.isLoading ||

    recommendQuery.isLoading ||

    shareQuery.isLoading ||

    habitQuery.isLoading;

 

 if (isLoading) {

    return <div>Loading...</div>;

  }

const isError =

    adminQuery.isError || knowHowQuery.isError || recommendQuery.isError || shareQuery.isError || habitQuery.isError;

if (isError) {

    return <div>Error loading data</div>;

  }

 

 

2. 버튼 클릭시, 해당 카테고리 데이터 가져오기

 const handleButtonsClick = (category: PostType[] | undefined) => {

    if (category) {

      setSelectCategory(category);

    } else {

      setSelectCategory([]);

    }

  };

 <St.ButtonWrapper>

          <St.Button onClick={() => handleButtonsClick(knowHowQuery.data)}>친환경 노하우</St.Button>

          <St.Button onClick={() => handleButtonsClick(recommendQuery.data)}>제품 추천</St.Button>

          <St.Button onClick={() => handleButtonsClick(shareQuery.data)}>제품 나눔</St.Button>

          <St.Button onClick={() => handleButtonsClick(habitQuery.data)}>습관 인증</St.Button>

 </St.ButtonWrapper>

 

 

끝.