概要

useMutationって何やってんのか気になったから調査
まずは何を返すかを知りたかったため、型だけ追ってみる
（なぜかって、いろんなファイルやリポジトリ追うから、中身と型どっちも追うと疲れちゃうから）

結論

返り値：以下2つの要素の配列を返却
- Promise<FetchResult<TData>>を返却する関数 = graphql通信する関数
- MutationResult<TData> = dataとかloadingとかapolloあるあるな値
引数
- クエリ
  - ここは調べてないですが、チュートリアルとかでクエリを入れている引数だったのでこのように記述。追うのが複雑そうだったのとクエリ以上の情報が得られそうでなかったため調査割愛
- refetchQueriesやfetchPolicyなど<Mutation>とかに使えるオプション

調査

src/react/hooks/useMutation.ts

export function useMutation<TData = any, TVariables = OperationVariables>(
  mutation: DocumentNode,
  options?: MutationHookOptions<TData, TVariables>
): MutationTuple<TData, TVariables> {
  ...
  return mutationData.execute(result);
}

わかったこと

返り値（結局何ができるの？）
- useMutationはなんやかんややってMutationTuple<TData, TVariables>型の値を返す
  - →MutationTupleって何や
引数（どんな柔軟性があるの？）
- DocumentNodeってクエリを受け取れる（なんの不思議もない）
- MutationHookOptionsというオプションを受け取れる
  - →MutationHookOptionsって何や

返り値

返り値の型`MutationTuple`

src/react/types/types.ts

export type MutationTuple<TData, TVariables> = [
  (
    options?: MutationFunctionOptions<TData, TVariables>
  ) => Promise<FetchResult<TData>>,
  MutationResult<TData>
];

気になること

FetchResult<TData>
MutationResult<TData>

`FetchResult`

src/react/types/types.ts

import { FetchResult } from '../../link/core/types';

src/link/core/types.ts

export interface FetchResult<
  TData = { [key: string]: any },
  C = Record<string, any>,
  E = Record<string, any>
> extends ExecutionResult {
  data?: TData | null;
  extensions?: E;
  context?: C;
};

`ExecutionResult`

src/execution/execute.js

export type ExecutionResult = {|
  errors?: $ReadOnlyArray<GraphQLError>,
  data?: ObjMap<mixed> | null,
  extensions?: ObjMap<mixed>,
|};

データやエラーの詰め場所。それもFetchResultでオーバーライドしてるやつばっかだから、調査はここで終わり

`MutationResult`

src/react/types/types.ts

export interface MutationResult<TData = any> {
  data?: TData | null;
  error?: ApolloError;
  loading: boolean;
  called: boolean;
  client?: ApolloClient<object>;
}

よく使うdataとかloadingってここに書いてあったんだ！

引数

引数で指定できるオプション`MutationHookOptions

`https://github.com/apollographql/apollo-client/blob/c2698e5fdbd109a4765ce269d345b20cfccc0ec9/src/react/types/types.ts#L202

src/react/types/types.ts

export interface MutationHookOptions<
  TData = any,
  TVariables = OperationVariables
> extends BaseMutationOptions<TData, TVariables> {
  mutation?: DocumentNode;
}

気になること

BaseMutationOptions
DocumentNode

`BaseMutationOptions`

src/react/types/types.ts

export interface BaseMutationOptions<
  TData = any,
  TVariables = OperationVariables
> {
  variables?: TVariables;
  optimisticResponse?: TData | ((vars: TVariables) => TData);
  refetchQueries?: Array<string | PureQueryOptions> | RefetchQueriesFunction;
  awaitRefetchQueries?: boolean;
  errorPolicy?: ErrorPolicy;
  update?: MutationUpdaterFn<TData>;
  client?: ApolloClient<object>;
  notifyOnNetworkStatusChange?: boolean;
  context?: Context;
  onCompleted?: (data: TData) => void;
  onError?: (error: ApolloError) => void;
  fetchPolicy?: Extract<WatchQueryFetchPolicy, 'no-cache'>;
  ignoreResults?: boolean;
}

`DocumentNode`

src/react/types/types.ts

import { DocumentNode } from 'graphql';

DocumentNodeを追ってみる
↓
https://github.com/graphql/graphql-js/blob/master/src/index.js
↓
https://github.com/graphql/graphql-js/blob/master/src/language/ast.js#L248

src/language/ast.js

export type DocumentNode = {|
  +kind: 'Document',
  +loc?: Location,
  +definitions: $ReadOnlyArray<DefinitionNode>,
|};