isPending always false and status always 'idle'
I am using the react-query integration with TRPC and successfully calling mutations. However the
isPending never changes to true and status is always "idle". Can anyone spot why?
function ProfileImageModal() {
const { toast } = useToast()
const utils = trpcClient.useUtils()
const getParams = trpcClient.getSignedUploadParams.useMutation()
const setProfileImage = trpcClient.setProfileImage.useMutation()
const isPending = getParams.isPending || setProfileImage.isPending
console.log({
isPending,
getParamsStatus: getParams.status,
setProfileImageStatus: setProfileImage.status,
})
const saveImage = async (imageFile: File) => {
try {
const params = await getParams.mutateAsync({
fileName: imageFile.name,
mediaType: MediaType.USER_AVATAR,
})
const res = await uploadFile({
file: imageFile,
url: params.url,
fields: params.fields,
})
if (res.status != 201) {
// TODO: Toast & Error logger
console.error(res)
return
}
await setProfileImage.mutateAsync({
uploadKey: params.uploadKey,
})
await utils.getAuthenticatedUser.invalidate()
} catch (error) {
...
}
}
function ProfileImageModal() {
const { toast } = useToast()
const utils = trpcClient.useUtils()
const getParams = trpcClient.getSignedUploadParams.useMutation()
const setProfileImage = trpcClient.setProfileImage.useMutation()
const isPending = getParams.isPending || setProfileImage.isPending
console.log({
isPending,
getParamsStatus: getParams.status,
setProfileImageStatus: setProfileImage.status,
})
const saveImage = async (imageFile: File) => {
try {
const params = await getParams.mutateAsync({
fileName: imageFile.name,
mediaType: MediaType.USER_AVATAR,
})
const res = await uploadFile({
file: imageFile,
url: params.url,
fields: params.fields,
})
if (res.status != 201) {
// TODO: Toast & Error logger
console.error(res)
return
}
await setProfileImage.mutateAsync({
uploadKey: params.uploadKey,
})
await utils.getAuthenticatedUser.invalidate()
} catch (error) {
...
}
}
0 Replies