상황 1 : addDoc을 해주고 그 데이터를 바로 받아와서 navigate 할 때 써주려고 했으나 그 전 데이터가 불러와졌다.

1. RTK-Query endpoint에서 생성된 react-hook이 비동기라서 가장 마지막에 실행되어 원하는 순서대로 작동하지 않았다. ⇒ async. await로 해결

2. 서버에 새 데이터를 Add해주고 바로 그 데이터를 받아서 navigate 할 때 사용하려 했으나, 그 전 데이터가 받아 와졌다.

   ⇒ 원인: 라이프 싸이클에 따르면 바뀐 State는 리렌더링을 해주어야 적용이 된다.

   ⇒ 해결: useEffect의 의존성 배열에 이용하는 데이터를 넣어주고, 일부러 state 변경을 하여 리렌더를 일으켰다. 그랬더니 최신 데이터가 받아 와지면서 제대로 된 주소로 navigate할 수 있었다.

해결 전

const [addCourse] = useAddCourseMutation();
const { data } = useGetCourseQuery();

const submitHandle = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const newPost = {
........
    };
    addCourse(newPost);
    navigate(`/course/${data && data[0].id}`);
  };

해결 후

const [condition, setCondition] = useState(false);
const { data } = useGetCourseQuery();

  const submitHandle = **async** (event: React.FormEvent<HTMLFormElement>) => {
	event.preventDefault();
	 const newPost = {
   ........
    };
		**await** addCourse(newPost);
    **setCondition(true);**
    window.alert("게시물이 등록되었습니다");
  };

  useEffect(() => {
    if (condition) {
      navigate(`/course/${data && data[0].id}`);
      setCondition(false);
    }
  }, [**data**]);

상황 2. 상세페이지에서 좋아요를 눌렀을 때 유저 페이지의 좋아요한 게시물 데이터로 가져와지지 않았다.

1. invalidateTags와 리렌더링을 다 했는데도 불구하고, 서로 다른 페이지 중 한쪽에서 업데이트 된 최신데이터가 다른 페이지에서 받아와지지 않았다.

   ⇒ 원인: react의 page가 다르면 다른 client이기 때문에 react-hook의 invalidateTags가 역할을 해주지 못한다. .

   ⇒ 해결: refetch를 해주어서 수동으로 최신 데이터를 가져와준다.

   provides가 적용된 모습

   getCourse: builder.query<CourseType[], void>({
         async queryFn() {
           try {
             const courseQuery = query(
               collection(dbService, "courses"),
               orderBy("createdAt", "desc")
             );
             const querySnapshot = await getDocs(courseQuery);
             let courses: any = [];
             querySnapshot?.forEach((doc) => {
               courses.push({ id: doc.id, ...doc.data() } as CourseType);
             });
             return { data: courses };
           } catch (error: any) {
             console.error(error.message);
             return { error: error.message };
           }
         },
         providesTags: ["Courses"],
       }),
   

   invalidate가 적용된 모습

   updateLikes: builder.mutation({
         async queryFn({ likes, likesID, courseId }) {
           try {
             await updateDoc(doc(dbService, "courses", courseId), {
               likes,
               likesID,
             });
             return { data: null };
           } catch (error: any) {
             console.error(error.message);
             return { error: error.message };
           }
         },
         **invalidatesTags: ["Courses"],**
       }),
   

   해결 전

   const { refetch } = useGetCourseQuery();
   const filterData = () => {
   .........
     };
   
     useEffect(() => {
       filterData();
     }, [data, category, done]);
   
   return (
         <div className="flex flex-start">
           <button
             className="border border-black px-8  py-2 mr-3 hover:bg-black hover:text-white "
             onClick={() => setCategory("MY")}
           >
             내 게시글
           </button>
   )
   

   해결 후

   const { refetch } = useGetCourseQuery();
   
   const filterData = () => {
   .......
   }
   
     useEffect(() => {
       filterData();
     }, [data, category, done]);
   
     return (
           <button
             className="border border-black px-8  py-2 mr-3 hover:bg-black hover:text-white "
             onClick={() => {
               **refetch();**
               setCategory("MY");
             }}
           >
             내 게시글
           </button>
   )