마이 페이지 약 리스트 조회

[arch-spatula]

[arch-spatula]

react-query useQuery
(fetch) 요청

[arch-spatula]

시간순 정렬을 해야 합니다.

[arch-spatula]

WARN [TypeError: doc.data is not a function. (In 'doc.data()', 'doc.data' is undefined)]

WARN [TypeError: undefined is not an object (evaluating 'iter[Symbol.iterator]')]

[arch-spatula]

  const queryClient = useQueryClient();

  // 새로운 약 목록을 추가하는 Mutation 함수입니다.
  const postNewPill = (newPill) => {
    const selectedDoc = collection(dbService, 'pill');
    return addDoc(selectedDoc, newPill);
  };

  // console.log('getUid', uid);

  const newPill = {
    // id: uuid(),
    userId: uid,
    pillName: '점심약',
    time: '12:00',
    isTaken: false,
  };

  const { mutate: addPill } = useMutation(() => postNewPill(newPill), {
    onMutate: async () => {
      // 재요청으로 인한 덮어쓰기를 막습니다.
      await queryClient.cancelQueries('pill-list');
      const previousPillData = queryClient.getQueryData('pill-list');
      queryClient.setQueriesData('pill-list', (oldPillData) => {
        return { ...oldPillData, docs: [...oldPillData?.docs, newPill] };
      });
      return { previousPillData };
    },

    onError: (_, __, context) => {
      queryClient.setQueriesData('pill-list', context.previousPillData);
    },

    onSuccess: (data) => {
      console.log('data', data);
    },

    onSettled: () => {
      // 클라이언트 상태가 서버 상태랑 동일하게 싱크를 맞추어줍니다.
      queryClient.invalidateQueries('pill-list');
    },
  });

실시간 업데이트 반영을 위한 리액트 쿼리의 낙관적 업데이트 패턴입니다. 하지만 일부 에러가 발생합니다.