(React-query)请求帖子后正确重新获取答案

【问题标题】：(React-query)Correct refetch after requesting post(React-query)请求帖子后正确重新获取
【发布时间】：2022-09-23 05:36:33
【问题描述】：

反应组件顺序

主页组件使用 react-query 获取数据子组件 UserForm POST 数据。这时候，我必须在POST请求后对服务器数据请求进行refetch，有没有比交给props来refetch更好的方法？

export default function HomePage() {
  const {
    isLoading,
    isFetching,
    isError,
    refetch,
    data: users,
  } = useQuery([\'users\'], getUsers);

  if (isLoading) {
    return <h1>loading..!!!</h1>;
  }

  if (isError) {
    return <h1>error</h1>;
  }

  return (
    <div>
      <UserForm refetch={refetch} />
      <ul>
        {users.length ? (
          users?.map((user: IUser) => <UserItem key={user.id} user={user}  refetch={refetch}/>)
        ) : (
          <li>data error</li>
        )}
      </ul>
    </div>
  );
}

UserForm 组件（post 函数）

 const handleSubmitAddUser = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (name) {
      addUser(name)
        .then(() => {
          setName(\'\');
          refetch();
        })
        .catch((err) => console.error(err));
    }
  };

标签： react-query

【解决方案1】：

就在这里。一般来说，你应该避免使用refetch，而是使用invalidateQueries()：

const queryClient = useQueryClient();
//...
.then(() => {
  // ..
  queryClient.invalidateQueries(["users"]);
});

这将告诉 React-query 旧的 users 数据已过时，需要重新获取。

【讨论】：