我是React-Query的新手。
我在NextJS中使用useQuery来获取用户数据。
下面是更改用户数据中昵称的代码。
问题是，当我更改昵称时，它不会重新呈现更改后的昵称。--〉{user？.nickname}

export default function ProfileUpdateTest() {
  const queryClient = useQueryClient();
  const { data: user } = useAuth();
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div>
      {user?.nickname}
      <Form.Control type="text" ref={inputRef} />
      <button onClick={test}>change nickname</button>
    </div>
  );

  function test() {
    axios.put('/api/user/nickname', { user_id: 3, nickname: inputRef.current?.value }).then(() => {
      queryClient.invalidateQueries(queryKeys.AUTH_USER);
    });
  }
}

export function useAuth() {
  const fetcher = () => request.get('/api/auth');
  return useQuery(queryKeys.AUTH_USER, fetcher, {
    select: (res): IUsers | null => {
      return res.data;
    },
  });
}

在React-Query Devtools中，我检查了缓存数据的更改。
即使使用useMutation钩子，结果也是一样的。
奇怪的是，在其他组件中，它显示为更改了昵称。
有什么我遗漏的吗？