HTTP put and get(id) request ReactQuery

Question

我将项目中的redux更改为ReactQuery，在代码中放入req时遇到了一些问题。这是我的代码

const { dispatch } = store;
const editClientDataAsync = async ( id,data ) => {
await axiosObj().put(`clients/${id}`,data);
}
const { mutateAsync: editClientData, isLoading } = useMutation(['editClientData'], editClientDataAsync, {
onSuccess: () => dispatch({ type: SUCCESS_DATA, payload: { message: "Success" } }),
onError: () => dispatch({ type: ERROR_DATA, payload: { message: "Error" } })
});
return { editClientData, isLoading }

}

当我尝试用id 获得一些req时，也有同样的问题

const id = useSelector((state) => state?.clientData?.clientInfo?.data.id)

const getClientDetails = async ({ queryKey }) => {
const [_, { id }] = queryKey;
console.log(queryKey)
if (!id)
return;
const { data } = await axiosObj().get(`clients/${id}`)
console.log(data)
return data;

}
const { data: clientDetails, isLoading } = useQuery(['ClientId', { id }], getClientDetails)
return { clientDetails, isLoading }

Answer 1

1. 突变函数只接受1个参数

检查使用editClientData突变的位置，并在一个对象中传递参数。

const editClientDataAsync = async ({ id, data }) => {
await axiosObj().put(`clients/${id}`,data);
}
return useMutation(['editClientData'], editClientDataAsync, ...);

2. 您确定已将id传递给函数吗

您可以禁用查询，直到使用enabled选项获得该id，这样就不会进行不必要的http调用。

const id = useSelector((state) => state?.clientData?.clientInfo?.data.id)
const getClientDetails = async (id) => {
const { data } = await axiosObj().get(`clients/${id}`)
return data;
}
return useQuery(['client', id], () => getClientDetails(id), { enabled: !!id })

禁用/暂停查询