@apollo/client#MutationHookOptions TypeScript Examples

useUnfollowChannel = (opts?: MutationHookOptions<UnfollowChannelMutation>) => {
  const [unfollowChannel, rest] = useUnfollowChannelMutation()
  return {
    unfollowChannel: (id: string) =>
      unfollowChannel({
        ...opts,
        variables: {
          channelId: id,
        },
        update: (cache, mutationResult) => {
          cache.modify({
            id: cache.identify({
              __typename: 'Channel',
              id,
            }),
            fields: {
              follows: () => mutationResult.data?.unfollowChannel.follows,
            },
          })
        },
      }),
    ...rest,
  }
}

useFormCreateMutation = (
  options: MutationHookOptions<Data, Variables> = {}
): MutationTuple<Data, Variables> => {
  const oldUpdate = options.update

  options.update = (cache, result, options) => {
    cache.evict({
      fieldName: 'listForms',
    })
    cache.gc()

    if (oldUpdate) {
      oldUpdate(cache, result, options)
    }
  }

  return useMutation<Data, Variables>(MUTATION, options)
}

export function useMutation<TData, TVariables = OperationVariables>(
  query: DocumentNode,
  options?: MutationHookOptions<TData, TVariables>,
  errorAlert: ErrorAlertOptionType = 'SHOW_ALERT',
): MutationTuple<TData, TVariables> {
  const { navigate } = useNavigation<TabNavProp<'Home'>>();

  const onErrorDefault = (error: ApolloError) => {
    errorHandlerAlert(error, navigate);
  };

  const { ...others } = options ?? {};

  const {
    onError = errorAlert === 'SHOW_ALERT' ? onErrorDefault : undefined,
    ...otherOptions
  } = others;

  let [mutationFunction, mutationResult] = useMutationBase<TData, TVariables>(
    query,
    {
      onError,
      ...otherOptions,
    },
  );

  return [mutationFunction, mutationResult];
}

export function useStatefulUpload(
  imagesArray: Array<Image>,
  currentToken: number,
  options?: MutationHookOptions<UploadType, UploadVariables>,
) {
  const [completedToken, setCompletedToken] = useState(1);
  const [tempArray, setTempArray] = useState<Array<Image>>(imagesArray);
  let newArray = imagesArray;

  let [upload] = useMutation<UploadType, UploadVariables>(UPLOAD, {
    ...options,
    onCompleted: ({ upload: result }) => {
      const {
        originalFilename: name,
        width,
        height,
        shortUrl: url,
        token,
      } = result;
      if (token) {
        const imageUrl = formatImageLink(name, width, height, url);
        newArray[token - 1] = { link: imageUrl, done: true };
        setTempArray(newArray);
        setCompletedToken(token);
      }
    },
    onError: (error) => {
      newArray[currentToken - 2] = { link: '', done: true };
      setTempArray(newArray);
      errorHandlerAlert(error);
    },
  });

  return { upload, tempArray, completedToken };
}

export function useStatelessUpload(
  options?: MutationHookOptions<UploadType, UploadVariables>,
) {
  const [upload, { loading }] = useMutation<UploadType, UploadVariables>(
    UPLOAD,
    {
      ...options,
    },
  );
  return { upload, loading };
}

export function useEditProfile(
  options?: MutationHookOptions<EditProfileType, EditProfileVariables>,
) {
  const [editProfile, { loading }] = useMutation<
    EditProfileType,
    EditProfileVariables
  >(EDIT_PROFILE, {
    ...options,
  });

  return { editProfile, loading };
}

export function useMarkRead(
  options?: MutationHookOptions<MarkReadType, MarkReadVariables>,
) {
  const [markAsRead, { loading }] = useMutation<
    MarkReadType,
    MarkReadVariables
  >(MARK_READ, {
    ...options,
  });

  return { markAsRead, loading };
}

export function useSetPrimaryEmail(
  options?: MutationHookOptions<SetPrimaryEmailType, SetPrimaryEmailVariables>,
) {
  const [setPrimaryEmail, { loading }] = useMutation<
    SetPrimaryEmailType,
    SetPrimaryEmailVariables
  >(SET_PRIMARY_EMAIL, {
    ...options,
  });

  return { setPrimaryEmail, loading };
}

export function useDeleteEmail(
  options?: MutationHookOptions<DeleteEmailType, DeleteEmailVariables>,
) {
  const [deleteEmail, { loading }] = useMutation<
    DeleteEmailType,
    DeleteEmailVariables
  >(DELETE_EMAIL, {
    ...options,
  });

  return { deleteEmail, loading };
}

export function useAddEmail(
  options?: MutationHookOptions<AddEmailAddressType, AddEmailAddressVariables>,
) {
  const [addEmailAddress, { loading, error }] = useMutation<
    AddEmailAddressType,
    AddEmailAddressVariables
  >(ADD_EMAIL_ADDRESS, {
    ...options,
  });

  return { addEmailAddress, loading, error };
}

export function useChangePassword(
  options?: MutationHookOptions<
    ChangeNewPasswordType,
    ChangeNewPasswordVariables
  >,
) {
  const [changeNewPassword, { loading, error }] = useMutation<
    ChangeNewPasswordType,
    ChangeNewPasswordVariables
  >(CHANGE_PASSWORD, {
    ...options,
  });

  return { changeNewPassword, loading, error };
}

export function useReplyTopic(
  options?: MutationHookOptions<ReplyTopicType, ReplyTopicVariables>,
) {
  const [reply, { loading }] = useMutation<ReplyTopicType, ReplyTopicVariables>(
    REPLY_TOPIC,
    { ...options },
  );

  return { reply, loading };
}

export function useReplyPost(
  options?: MutationHookOptions<ReplyPostType, ReplyPostVariables>,
) {
  const [reply, { loading }] = useMutation<ReplyPostType, ReplyPostVariables>(
    REPLY,
    { ...options },
  );

  return { reply, loading };
}

export function useNewTopic(
  options?: MutationHookOptions<NewTopicType, NewTopicVariables>,
) {
  const [newTopic, { loading }] = useMutation<NewTopicType, NewTopicVariables>(
    NEW_TOPIC,
    { ...options },
  );

  return { newTopic, loading };
}

useFollowChannel = (opts?: MutationHookOptions<FollowChannelMutation>) => {
  const [followChannel, rest] = useFollowChannelMutation()
  return {
    followChannel: (id: string) =>
      followChannel({
        ...opts,
        variables: {
          channelId: id,
        },
        update: (cache, mutationResult) => {
          cache.modify({
            id: cache.identify({
              __typename: 'Channel',
              id,
            }),
            fields: {
              follows: () => mutationResult.data?.followChannel.follows,
            },
          })
        },
      }),
    ...rest,
  }
}

useAddVideoView = (opts?: Omit<MutationHookOptions<AddVideoViewMutation>, 'variables'>) => {
  const [addVideoView, rest] = useAddVideoViewMutation({
    update: (cache, mutationResult) => {
      cache.modify({
        id: cache.identify({
          __typename: 'Video',
          id: mutationResult.data?.addVideoView.id,
        }),
        fields: {
          views: () => mutationResult.data?.addVideoView.views,
        },
      })
    },
    ...opts,
  })
  return {
    addVideoView,
    ...rest,
  }
}

export function useTypedMutation<
    TData extends object,
    TVariables extends object,
    TContext = DefaultContext, 
	TCache extends ApolloCache<any> = ApolloCache<any>
>(
    fetcher: Fetcher<"Mutation", TData, TVariables>,
    options?: MutationHookOptions<TData, TVariables, TContext> & {
        readonly operationName?: string
	}
): MutationTuple<
    TData, 
    TVariables, 
    TContext, 
    TCache
> {
    const body = requestBody(fetcher);

    const request = useMemo<DocumentNode>(() => {
		const operationName = options?.operationName ?? `mutation_${util.toMd5(body)}`;
		return gql`mutation ${operationName}${body}`;
	}, [body, options?.operationName]);

	const response = useMutation<
		TData, 
		TVariables, 
		TContext, 
		TCache
	>(request, options);
	const responseData = response[1].data;
	const newResponseData = useMemo(() => util.exceptNullValues(responseData), [responseData]);
	return newResponseData === responseData ? response : [
        response[0],
        { ...response[1], data: newResponseData }
    ];
}

export function useLogin(
  options?: MutationHookOptions<LoginType, LoginVariables>,
) {
  const [login, { loading, error }] = useMutation<LoginType, LoginVariables>(
    LOGIN,
    {
      ...options,
    },
  );

  return { login, loading, error };
}

export function useLogout(
  options?: MutationHookOptions<LogoutType, LogoutVariables>,
) {
  const [logout, { loading }] = useMutation<LogoutType, LogoutVariables>(
    LOGOUT,
    { ...options },
  );

  return { logout, loading };
}

export function useRegister(
  options?: MutationHookOptions<RegisterType, RegisterVariables>,
) {
  const [register, { loading }] = useMutation<RegisterType, RegisterVariables>(
    REGISTER,
    { ...options },
  );

  return { register, loading };
}

export function useEditPost(
  options?: MutationHookOptions<EditPostType, EditPostVariables>,
) {
  const [editPost, { loading }] = useMutation<EditPostType, EditPostVariables>(
    EDIT_POST,
    { ...options },
  );

  return { editPost, loading };
}

export function useEditTopic(
  options?: MutationHookOptions<EditTopicType, EditTopicVariables>,
) {
  const [editTopic, { loading }] = useMutation<
    EditTopicType,
    EditTopicVariables
  >(EDIT_TOPIC, {
    ...options,
  });

  return { editTopic, loading };
}

export function useFlagPost(
  options?: MutationHookOptions<FlagPostType, FlagPostVariables>,
) {
  const [flag, { loading }] = useMutation<FlagPostType, FlagPostVariables>(
    FLAG_POST,
    {
      ...options,
    },
  );

  return { flag, loading };
}

export function useNewMessage(
  options?: MutationHookOptions<NewMessageType, NewMessageVariables>,
) {
  const [newMessage, { loading }] = useMutation<
    NewMessageType,
    NewMessageVariables
  >(NEW_PRIVATE_MESSAGE, { ...options });

  return { newMessage, loading };
}

export function usePostRaw(
  options?: MutationHookOptions<PostRawType, PostRawVariables>,
) {
  const [postRaw, { loading }] = useLazyQuery<PostRawType, PostRawVariables>(
    POST_RAW,
    { ...options },
  );

  return { postRaw, loading };
}

useFormDeleteMutation = (
  data?: MutationHookOptions<Data, Variables>
): MutationTuple<Data, Variables> => useMutation<Data, Variables>(MUTATION, data)

useFormUpdateMutation = (
  data?: MutationHookOptions<Data, Variables>
): MutationTuple<Data, Variables> => useMutation<Data, Variables>(MUTATION, data)

useProfileUpdateMutation = (
  data?: MutationHookOptions<Data, Variables>
): MutationTuple<Data, Variables> => useMutation<Data, Variables>(MUTATION, data)

useRegisterMutation = (
  data?: MutationHookOptions<Data, Variables>
): MutationTuple<Data, Variables> => useMutation<Data, Variables>(MUTATION, data)