invalidateQueries가 안먹힙니다.

사진 순서대로 1. 유저 정보 수정 Mutation훅 2. 유저 정보 수정 Mutation훅을 호출하는 컴포넌트 3. 유저 정보를 새로받아오는 Query 훅 입니다. invalidateQueries, refetchQueries, 옵션추가 등등 다해봤는데 쿼리를 무효화하는 요청이 아예안갑니다..ㅜ 쿼리키도 똑같은데 뭐가 문제일까요? 두번째 사진은 흐리게보여서 코드로 올립니다.

1import { useForm } from "react-hook-form"
2import { useNavigate } from "react-router-dom"
3
4import { useUserStore } from "@store/useUserStore"
5import { UPDATE_INPUTS, UPDATE_LIST } from "constants/validation"
6
7import styled from "styled-components"
8
9import Button from "@components/Button/Button"
10import Input from "@components/Input/Input"
11
12import { UpdateUserPayload } from "@typpes/type"
13import { User } from "@typpes/type"
14
15import theme, { fonts } from "@styles/theme"
16
17import { formAdapter } from "@utils/formAdapter"
18
19import { useEditProfile } from "../../../hooks/mutation/useEditProfile"
20
21const UpdateProfile = () => {
22  const navigate = useNavigate()
23
24  const { isLogin, user } = useUserStore()
25  const { register, formState, handleSubmit } = useForm<Omit<User, "sex">>({
26    mode: "onChange",
27    defaultValues: {
28      userName: user?.userName,
29      birthDate: user?.birthDate,
30      loginEmail: user?.loginEmail,
31    },
32  })
33  const { mutate: editUser } = useEditProfile()
34
35  const handleUpdatePaswordPage = () => {
36    navigate("/mypage/password")
37  }
38
39  const handleHome = () => {
40    navigate("/")
41  }
42
43  if (!isLogin) {
44    navigate("/")
45    return null
46  }
47
48  const onSubmit = ({ userName, birthDate }: UpdateUserPayload) => {
49    editUser({ userName, birthDate })
50  }
51
52  return (
53    <UpdateProfileForm
54      noValidate
55      onSubmit={handleSubmit(onSubmit)}>
56      <UpdateProfileTitle>{user?.userName}님의 회원정보</UpdateProfileTitle>
57      <UpdateProfileList>
58        {UPDATE_LIST.PROFILE.map(({ id, name, label, isDisabled }) => (
59          <Input key={id}>
60            <Input.Label htmlFor={name}>{label}</Input.Label>
61            <Input.Input
62              variant="edit"
63              props={{
64                ...formAdapter({
65                  register,
66                  name,
67                  validator: UPDATE_INPUTS.PROFILE[name],
68                  $isDirty: !!formState.dirtyFields[name],
69                  $isError: !!formState.errors[name],
70                }),
71                disabled: isDisabled,
72                defaultValue: name,
73              }}
74            />
75            <Input.Error>{formState?.errors[name]?.message}</Input.Error>
76          </Input>
77        ))}
78      </UpdateProfileList>
79      <UpdatePasswordButton
80        type="button"
81        onClick={handleUpdatePaswordPage}>
82        비밀번호 변경하기
83      </UpdatePasswordButton>
84      <UpdateButtonContainer>
85        <Button
86          variant="text"
87          size="full"
88          type="button"
89          onClick={handleHome}>
90          취소
91        </Button>
92
93        <Button
94          variant="main"
95          size="full"
96          type="submit">
97          회원정보 변경 완료
98        </Button>
99      </UpdateButtonContainer>
100    </UpdateProfileForm>
101  )
102}
103
104export default UpdateProfile

• ‌

  
• ‌

  
• ‌

  

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

익명님의 질문