[typescript] `ApolloClient.mutate()` type is not consistent and not usable

The type of ApolloClient.mutate() is not consistent with other methods like query() and offers no way to deal with mutations in a type safe way. Here’s the type of mutate<T, TVariables>():

export default class ApolloClient<TCacheShape> implements DataProxy {
    mutate<T, TVariables = OperationVariables>(options: MutationOptions<T, TVariables>): Promise<FetchResult<T>>;
}

Here’s FetchResult<T>:

export declare type FetchResult<C = Record<string, any>, E = Record<string, any>> = ExecutionResult & {
    extensions?: E;
    context?: C;
};

Note that the T in mutate<T>() corresponds to C in FetchResult<C = Record<string, any>, E = Record<string, any>>. In other words mutate<T>(...).context : T which doesn’t match ApolloClient.query().

Moreover there’s no way to type the resulting data that comes out of the mutation: Because no type parameters are passed to ExecutionResult there’s no way to type mutate(...).data!

And for reference, here’s ExecutionResult from @types/graphql:

export interface ExecutionResult<TData = ExecutionResultDataDefault> {
    errors?: ReadonlyArray<GraphQLError>;
    data?: TData;
}

See also https://github.com/apollographql/apollo-client/issues/4153.

Intended outcome: A consistent, clean way to type graphql queries and mutations.

Actual outcome: Unhelpful and inconsistent types on ApolloClient.mutate() relative to the other methods, query() etc.

How to reproduce the issue: Look at the code.

Versions “apollo-boost”: “0.1.22”

[Veetaha]

Come on, this issue has been being openned since Dec 29, 2017. God damn, can someone fix this bug already?

[ekron]

The problem is the ApolloClient.mutate function can return Promise<any> even if the correct types are provided as generics.

Example:

interface SampleMutationResult {
  id: string;
}

interface SampleMutationVariables {
  someVariable: string;
}

const result = await client.mutate<SampleMutationResult, SampleMutationVariables>({
  mutation: TaskByIdDocument,
  variables: { someVariable: "test" }
});

// Expect: result to be FetchResult<SampleMutationResult, Record<string, any>>

// Actual: result is type any.

The fix is to add the typings for graphql module:

yarn add @types/graphql

What’s the problem?

I’ll take a quick guess. The ApolloClient type returns a FetchResult for mutate:

mutate<T = any, TVariables = OperationVariables>(options: MutationOptions<T, TVariables>): Promise<FetchResult<T>>;

FetchResult relies on a typing being present for ExecutionResult from the graphql package:

export declare type FetchResult<TData = {
    [key: string]: any;
}, C = Record<string, any>, E = Record<string, any>> = ExecutionResult<TData> & {
    extensions?: E;
    context?: C;
};

Possibly if the @types/graphql typings are not available then you’ll get the unexpected Promise<any> returned from mutate?