Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
07e404b089
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
110 lines (101 sloc) 3.51 KB
import React from 'react';
import { DocumentNode } from 'graphql';
import hoistNonReactStatics from 'hoist-non-react-statics';
import {
parser,
BaseMutationOptions,
MutationFunction,
MutationResult
} from '@apollo/react-common';
import { Mutation } from '@apollo/react-components';
import {
defaultMapPropsToOptions,
getDisplayName,
calculateVariablesFromProps,
GraphQLBase
} from './hoc-utils';
import { OperationOption, OptionProps, MutateProps } from './types';
export function withMutation<
TProps extends TGraphQLVariables | {} = {},
TData = {},
TGraphQLVariables = {},
TChildProps = MutateProps<TData, TGraphQLVariables>
>(
document: DocumentNode,
operationOptions: OperationOption<
TProps,
TData,
TGraphQLVariables,
TChildProps
> = {}
) {
// this is memoized so if coming from `graphql` there is nearly no extra cost
const operation = parser(document);
// extract options
const {
options = defaultMapPropsToOptions,
alias = 'Apollo'
} = operationOptions;
let mapPropsToOptions = options as (props: any) => BaseMutationOptions;
if (typeof mapPropsToOptions !== 'function')
mapPropsToOptions = () => options as BaseMutationOptions;
return (
WrappedComponent: React.ComponentType<TProps & TChildProps>
): React.ComponentClass<TProps> => {
const graphQLDisplayName = `${alias}(${getDisplayName(WrappedComponent)})`;
class GraphQL extends GraphQLBase<TProps, TChildProps> {
static displayName = graphQLDisplayName;
static WrappedComponent = WrappedComponent;
render() {
let props = this.props as TProps;
const opts = mapPropsToOptions(props);
if (operationOptions.withRef) {
this.withRef = true;
props = Object.assign({}, props, {
ref: this.setWrappedInstance
});
}
if (!opts.variables && operation.variables.length > 0) {
opts.variables = calculateVariablesFromProps(operation, props);
}
return (
<Mutation ignoreResults {...opts} mutation={document}>
{(
mutate: MutationFunction<TData, TGraphQLVariables>,
{ data, ...r }: MutationResult<TData>
) => {
// the HOC's historically hoisted the data from the execution result
// up onto the result since it was passed as a nested prop
// we massage the Mutation component's shape here to replicate that
// this matches the query HoC
const result = Object.assign(r, data || {});
const name = operationOptions.name || 'mutate';
const resultName = operationOptions.name
? `${name}Result`
: 'result';
let childProps = ({
[name]: mutate,
[resultName]: result
} as any) as TChildProps;
if (operationOptions.props) {
const newResult: OptionProps<
TProps,
TData,
TGraphQLVariables
> = {
[name]: mutate,
[resultName]: result,
ownProps: props
};
childProps = operationOptions.props(newResult) as any;
}
return <WrappedComponent {...props} {...childProps} />;
}}
</Mutation>
);
}
}
// Make sure we preserve any custom statics on the original component.
return hoistNonReactStatics(GraphQL, WrappedComponent, {});
};
}