Problem figuring out the mutation result type after upgrading to 3.x

[madhurgarg71]

I have upgraded react-query from 2.x to 3.x.
I have a wrapper react hook which deals with the mutations using graphql as the mutation function something like this:

export const useGraphqlMutation = <
  TResult,
  TError,
  TVariables,
  TSnapshot = unknown
>(
  mutationQuery: string,
  options: UseMutationOptions<TResult, TError, TVariables, TSnapshot> = {},
): [
  UseMutateFunction<TResult, TError, TVariables, TSnapshot>,
  UseMutationResult<TResult, TError, TVariables, TSnapshot>,
] => {
  const mutationFn: MutationFunction<TResult, TVariables> = (variables) => {
    return graphqlRequester(mutationQuery, variables);
  };

  const mutationResult = useMutation<TResult, TError, TVariables, TSnapshot>(
    mutationFn,
    options,
  );

// returning the mutate function and mutationResult as a tuple just like 2.x
  return [mutationResult.mutate, mutationResult]; 
};

I am doing all of this to support backward compatibility with my code for react-query 2.x

Here is how I am using the above hook:

const [mutate, mutationResult] = useGraphqlMutation<
    AppCreateResponse // TData,
    ErrorResponse // TError,
    GraphqlQueryPayload<CreateAppPayload> // TVariables
  >(...);

// again since I am trying to support backward compatibility I am not changing any logic inside my old usage.
const res: UseMutationResult<
    App // TApp,
    ErrorResponse // TError,
    GraphqlQueryPayload<CreateAppPayload> // TVariables
  > = {
    ...mutationResult,
    data: mutationResult.data?.createApp //overriding Tdata with TApp,
  };
};

I am not sure whether UseMutationResult should be used to type res. I am getting an error saying the App | undefined is not assignable to App even though the data is of type TData | undefined (as per the MutationState type) ;which basically means something is wrong with the type I am using here.

I even tried to forcefully typecast my data as App but then I got some different error. (See below SS)

const res: UseMutationResult<
    App // TApp,
    ErrorResponse // TError,
    GraphqlQueryPayload<CreateAppPayload> // TVariables
  > = {
    ...mutationResult,
    data: mutationResult.data?.createApp as App // typecasting to App
  };
};

When I was using react-query 2.x, I was using MutationResult in place of UseMutationResult as the type. So the question boils down to "What type should be used in place of MutationResult? The MutationResult looked like this in 2.x and it was working fine.

export interface MutationResult<TResult, TError = unknown> {
  status: QueryStatus
  data: TResult | undefined
  error: TError | null
  isIdle: boolean
  isLoading: boolean
  isSuccess: boolean
  isError: boolean
  reset: () => void
}

[madhurgarg71]

Closing this