[TIL][24.01.19] Project - useMutate에서 값 가져오기

 

// useMutation
  const uploadImageMutate = useMutation({
    mutationFn: uploadMenuItemImage,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MENU_CATEGORY_WITH_ITEM] });
    },
  });

return uploadImageMutate

 

//mutationFn

export const uploadMenuItemImage = async (uploadMenuItem: UploadMenuItemType) => {
  // 기존 storage 이미지 삭제
  const { data: list } = await supabase.storage
    .from('images')
    .list(`menu/${uploadMenuItem.menuItem.category_id}/${uploadMenuItehttp://m.menuItem.id}`);
  const filesToRemove = list?.map(
    x => `menu/${uploadMenuItem.menuItem.category_id}/${uploadMenuItehttp://m.menuItem.id}/${x.name}`,
  );
  await supabase.storage.from('images').remove(filesToRemove!);
  //stoage upload
  const { error } = await supabase.storage
    .from('images')
    .upload(
      `menu/${uploadMenuItem.menuItem.category_id}/${uploadMenuItehttp://m.menuItem.id}/${uploadMenuItem.createAt}`,
      uploadMenuItem.selectedFile!,
      {},
    );
  // 올라간 image get url
  const { data } = supabase.storage
    .from('images')
    .getPublicUrl(
      `menu/${uploadMenuItem.menuItem.category_id}/${uploadMenuItehttp://m.menuItem.id}/${uploadMenuItem.createAt}`,
    );

  console.log(data, 'supabase');
  if (error) throw error;

  return data.publicUrl; // 내가 원하는 값
};

uploadImageMutate라는 useMutation을 필요한 컴포넌트에서 호출하는데


mutationFn인 uploadImageMutate 의 return 값인 data.publicUrl을 받아오고 싶은 상황이다.

return 되는 값을 받아오기 위해서는 mutateAsync 를 사용하면 된다.

 const uploadedMenuImage = await uploadImageMutate.mutateAsync(uploadImageGroup);

// uploadedMenuImage = data.publicUrl