react-query useQuery 재조회

🔥 문제 및 질문

📢 해결 과정

// useFilteredUserList 훅
import { useQuery } from "react-query";
import { requestGetFilteredUsers } from "../utils/apis/introductions";

const getFilteredUsers = async (filters) => {
  const { data } = await requestGetFilteredUsers(filters);
  return data;
};

const useFilteredUserList = (filters) =>
  // key 값으로 filters 설정
  useQuery(["filteredUsers", filters], () => getFilteredUsers(filters), {
    retry: false,
  });

export default useFilteredUserList;

const UserListContainer = () => {
  // 검색 필터
  const [filters, setFilters] = useState({
    name: null,
    course: null,
    generation: null,
    role: null,
    lastUserId: null,
    size: null,
  });
  // 여기에서 useState로 관리하는 filters를 넘겨준다.
  // 그럼 자식 컴포넌트인 UserList 에서 setFilter가 되었을 경우 변화를 감지하여
  // 변경된 filter 값으로 useQuery를 재 요청 할 수 있다.
  // 이렇게 사용하기 위해선 useQuery의 key값으로 filters를 넘겨줘야 함
  const { data } = useFilteredUserList(filters);

  return (
    <UserList
      users={data}
      handleMoveDetailPage={handleMoveDetailPage}
      setFilters={setFilters}
    />
  );
};

export default UserListContainer;

const UserList = ({ users, handleMoveDetailPage, setFilters }: IProps) => {
  const { handleChange, handleSubmit, handleBlur, values } = useFormik<{
    name: string;
    course: string;
    generation: string;
    role: string;
  }>({
    initialValues: { name: "", course: "", generation: "", role: "" },
    validationSchema: Yup.string().required(""),
    onSubmit: (formValues, { setSubmitting }) => {
      setSubmitting(true);
      // props로 받은 setFilter를 onSubmit이 발생했을 때 실행 해 준다.
      setFilters({ ...formValues, lastIserId: users.lastUserId, size: 5 });
      setSubmitting(false);
    },
  });


  return (
    ... 생략
  );
};

export default UserList;

📃 참고자료