62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { ApolloError } from "apollo-client";
|
|
import { DocumentNode } from "graphql";
|
|
import * as React from "react";
|
|
import {
|
|
Mutation,
|
|
MutationFn,
|
|
MutationResult,
|
|
MutationUpdaterFn
|
|
} from "react-apollo";
|
|
|
|
import useNotifier from "./hooks/useNotifier";
|
|
import i18n from "./i18n";
|
|
|
|
export interface TypedMutationInnerProps<TData, TVariables> {
|
|
children: (
|
|
mutateFn: MutationFn<TData, TVariables>,
|
|
result: MutationResult<TData>
|
|
) => React.ReactNode;
|
|
onCompleted?: (data: TData) => void;
|
|
onError?: (error: ApolloError) => void;
|
|
variables?: TVariables;
|
|
}
|
|
|
|
export function TypedMutation<TData, TVariables>(
|
|
mutation: DocumentNode,
|
|
update?: MutationUpdaterFn<TData>
|
|
) {
|
|
class StrictTypedMutation extends Mutation<TData, TVariables> {}
|
|
return (props: TypedMutationInnerProps<TData, TVariables>) => {
|
|
const notify = useNotifier();
|
|
// Obviously, this is workaround to the problem described here:
|
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32588
|
|
const {
|
|
children,
|
|
onCompleted,
|
|
onError,
|
|
variables
|
|
} = props as JSX.LibraryManagedAttributes<
|
|
typeof StrictTypedMutation,
|
|
typeof props
|
|
>;
|
|
return (
|
|
<StrictTypedMutation
|
|
mutation={mutation}
|
|
onCompleted={onCompleted}
|
|
onError={err => {
|
|
const msg = i18n.t("Something went wrong: {{ message }}", {
|
|
message: err.message
|
|
});
|
|
notify({ text: msg });
|
|
if (onError) {
|
|
onError(err);
|
|
}
|
|
}}
|
|
variables={variables}
|
|
update={update}
|
|
>
|
|
{children}
|
|
</StrictTypedMutation>
|
|
);
|
|
};
|
|
}
|