Get useMutation options type
Hey there! I'm trying to put a useMutation call into a custom hook to define explicitly the types. I want to pass the useMutation options to this new hook and then send all those props down to the original useMutation with the same types it figures out. I peeked at the type definitions, but it's not working like I thought it would. Any tips on how to make this happen?
Current code:
What i want:
async function deleteFormRequestQuery(id: string) {
try {
const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
return data;
} catch (error) {
// eslint-disable-next-line @typescript-eslint/no-throw-literal
throw "Error";
}
}
const useDeleteMutation = () => {
const mutation = useMutation({
mutationKey: ["Hi"],
mutationFn: deleteFormRequestQuery,
});
return mutation;
};
async function deleteFormRequestQuery(id: string) {
try {
const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
return data;
} catch (error) {
// eslint-disable-next-line @typescript-eslint/no-throw-literal
throw "Error";
}
}
const useDeleteMutation = () => {
const mutation = useMutation({
mutationKey: ["Hi"],
mutationFn: deleteFormRequestQuery,
});
return mutation;
};
async function deleteFormRequestQuery(id: string) {
try {
const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
return data;
} catch (error) {
// eslint-disable-next-line @typescript-eslint/no-throw-literal
throw "Error";
}
}
// Want this props to have the same type as the ones inside the useMutation.
const useDeleteMutation = (props: UseMutationProps) => {
// Here I maybe define explicitly the types on useMutation
const mutation = useMutation({ // <- This types
mutationKey: ["Hi"],
mutationFn: deleteFormRequestQuery,
...props
});
return mutation;
};
async function deleteFormRequestQuery(id: string) {
try {
const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
return data;
} catch (error) {
// eslint-disable-next-line @typescript-eslint/no-throw-literal
throw "Error";
}
}
// Want this props to have the same type as the ones inside the useMutation.
const useDeleteMutation = (props: UseMutationProps) => {
// Here I maybe define explicitly the types on useMutation
const mutation = useMutation({ // <- This types
mutationKey: ["Hi"],
mutationFn: deleteFormRequestQuery,
...props
});
return mutation;
};
2 Replies
eager-peach•17mo ago
You should elaborate your use case a little bit more
You can use UseMutationOptions for your props type
typical-coralOP•17mo ago
I found a solution. I don't know if it exist a better approach
import { useMutation, type UseMutationOptions } from 'react-query'
interface RequestResponse { ok: boolean, data: number[] | null }
interface RequestPayload { id: string, age: number }
type RequestError = RequestResponse
type MutationOptions<TData = unknown, TError = unknown, TVariables = void, TContext = unknown> = Omit<UseMutationOptions<TData, TError, TVariables, TContext>, 'mutationFn'>
type RequestMutationOptions = MutationOptions<RequestResponse, RequestError, RequestPayload>;
async function request(payload: RequestPayload): Promise<RequestResponse> | never {
const { id, age } = payload;
try {
const data = { ok: true, data: [1, 2, 3] }
return data;
} catch (error) {
throw { ok: false, data: null }
}
}
function useRequestMutation(options: RequestMutationOptions) {
const mutation = useMutation({
mutationFn: request,
...options
});
return mutation;
};
const mutation = useRequestMutation({
onSuccess(data) {
if (data.data !== null) { console.log(data.data.map((a) => 2 + a)) }
}
})
import { useMutation, type UseMutationOptions } from 'react-query'
interface RequestResponse { ok: boolean, data: number[] | null }
interface RequestPayload { id: string, age: number }
type RequestError = RequestResponse
type MutationOptions<TData = unknown, TError = unknown, TVariables = void, TContext = unknown> = Omit<UseMutationOptions<TData, TError, TVariables, TContext>, 'mutationFn'>
type RequestMutationOptions = MutationOptions<RequestResponse, RequestError, RequestPayload>;
async function request(payload: RequestPayload): Promise<RequestResponse> | never {
const { id, age } = payload;
try {
const data = { ok: true, data: [1, 2, 3] }
return data;
} catch (error) {
throw { ok: false, data: null }
}
}
function useRequestMutation(options: RequestMutationOptions) {
const mutation = useMutation({
mutationFn: request,
...options
});
return mutation;
};
const mutation = useRequestMutation({
onSuccess(data) {
if (data.data !== null) { console.log(data.data.map((a) => 2 + a)) }
}
})