useMutationって何やってんの？ 型から追うuseMutationの挙動・オプション・引数

概要

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>,
|};