genetic-orange

Using typescript - How do I set a custom type for useMutation?

I want my useMutation to contain it's regular mutate, inLoading and others but I also want it to contain percentage. How can I set the type?

interface LUejeczob2
  extends Request<{ type?: MediaTypes }, null, { file: File }> {}

interface LftdYVO9fH
  extends Response<{ url: string; thumbnail: string }> {}

export const uploadImage = (): UseMutationResult<
  LftdYVO9fH,
  Qasah.Response<any>,
  LUejeczob2
> & { percentage: number } => {
  const [percentage, setPercentage] = useState(0);

  const mutation = useMutation({
    mutationFn: async (payload: LUejeczob2) =>
      await client.post('/upload', payload.body, {
        params: payload.params,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        onUploadProgress: file => {
          setPercentage(Math.round((file.loaded * 100) / file.total!));
        },
      }),
  });

  return { ...mutation, percentage };
};

interface LUejeczob2
  extends Request<{ type?: MediaTypes }, null, { file: File }> {}

interface LftdYVO9fH
  extends Response<{ url: string; thumbnail: string }> {}

export const uploadImage = (): UseMutationResult<
  LftdYVO9fH,
  Qasah.Response<any>,
  LUejeczob2
> & { percentage: number } => {
  const [percentage, setPercentage] = useState(0);

  const mutation = useMutation({
    mutationFn: async (payload: LUejeczob2) =>
      await client.post('/upload', payload.body, {
        params: payload.params,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        onUploadProgress: file => {
          setPercentage(Math.round((file.loaded * 100) / file.total!));
        },
      }),
  });

  return { ...mutation, percentage };
};