How to use the @apollo/react-common.parser function in @apollo/react-common

export function withQuery<
  TProps extends TGraphQLVariables | {} = {},
  TData = {},
  TGraphQLVariables = {},
  TChildProps = DataProps
>(
  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,
    skip = defaultMapPropsToSkip,
    alias = 'Apollo'
  } = operationOptions;

  let mapPropsToOptions = options as (props: any) => BaseQueryOptions;
  if (typeof mapPropsToOptions !== 'function') {
    mapPropsToOptions = () => options as BaseQueryOptions;
  }

  let mapPropsToSkip = skip as (props: any) => boolean;
  if (typeof mapPropsToSkip !== 'function') {
    mapPropsToSkip = () => skip as any;
  }

export function withMutation<
  TProps extends TGraphQLVariables | {} = {},
  TData = {},
  TGraphQLVariables = {},
  TChildProps = MutateProps
>(
  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
  ): React.ComponentClass => {
    const graphQLDisplayName = `${alias}(${getDisplayName(WrappedComponent)})`;
    class GraphQL extends GraphQLBase {

export function withSubscription<
  TProps extends TGraphQLVariables | {} = {},
  TData = {},
  TGraphQLVariables = {},
  TChildProps = DataProps
>(
  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,
    skip = defaultMapPropsToSkip,
    alias = 'Apollo',
    shouldResubscribe
  } = operationOptions;

  let mapPropsToOptions = options as (props: any) => BaseQueryOptions;
  if (typeof mapPropsToOptions !== 'function')
    mapPropsToOptions = () => options as BaseQueryOptions;

  let mapPropsToSkip = skip as (props: any) => boolean;
  if (typeof mapPropsToSkip !== 'function') mapPropsToSkip = () => skip as any;

  // allow for advanced referential equality checks

_this.verifyDocumentIsMutation = function (mutation) {
            var operation = parser(mutation);
            process.env.NODE_ENV === "production" ? invariant(operation.type === DocumentType.Mutation) : invariant(operation.type === DocumentType.Mutation, "The  component requires a graphql mutation, but got a " + (operation.type === DocumentType.Query ? 'query' : 'subscription') + ".");
        };
        _this.verifyDocumentIsMutation(props.mutation);

_this.verifyDocumentIsMutation = function (mutation) {
            var operation = reactCommon.parser(mutation);
            process.env.NODE_ENV === "production" ? tsInvariant.invariant(operation.type === reactCommon.DocumentType.Mutation) : tsInvariant.invariant(operation.type === reactCommon.DocumentType.Mutation, "The  component requires a graphql mutation, but got a " + (operation.type === reactCommon.DocumentType.Query ? 'query' : 'subscription') + ".");
        };
        _this.verifyDocumentIsMutation(props.mutation);

Query.prototype.extractOptsFromProps = function (props) {
        this.operation = parser(props.query);
        process.env.NODE_ENV === "production" ? invariant(this.operation.type === DocumentType.Query) : invariant(this.operation.type === DocumentType.Query, "The  component requires a graphql query, but got a " + (this.operation.type === DocumentType.Mutation
            ? 'mutation'
            : 'subscription') + ".");
        var displayName = props.displayName || 'Query';
        return __assign({}, props, { displayName: displayName, context: props.context || {}, metadata: { reactComponent: { displayName: displayName } } });
    };
    Query.prototype.initializeObservableQuery = function (client, props, context) {

Query.prototype.extractOptsFromProps = function (props) {
        this.operation = parser(props.query);
        invariant(this.operation.type === DocumentType.Query, "The  component requires a graphql query, but got a " + (this.operation.type === DocumentType.Mutation
            ? 'mutation'
            : 'subscription') + ".");
        var displayName = props.displayName || 'Query';
        return tslib_1.__assign({}, props, { displayName: displayName, context: props.context || {}, metadata: { reactComponent: { displayName: displayName } } });
    };
    Query.prototype.initializeObservableQuery = function (client, props, context) {

Query.prototype.extractOptsFromProps = function (props) {
        this.operation = reactCommon.parser(props.query);
        process.env.NODE_ENV === "production" ? tsInvariant.invariant(this.operation.type === reactCommon.DocumentType.Query) : tsInvariant.invariant(this.operation.type === reactCommon.DocumentType.Query, "The  component requires a graphql query, but got a " + (this.operation.type === reactCommon.DocumentType.Mutation
            ? 'mutation'
            : 'subscription') + ".");
        var displayName = props.displayName || 'Query';
        return tslib.__assign({}, props, { displayName: displayName, context: props.context || {}, metadata: { reactComponent: { displayName: displayName } } });
    };
    Query.prototype.initializeObservableQuery = function (client, props, context) {

export function graphql<
  TProps extends TGraphQLVariables | {} = {},
  TData = {},
  TGraphQLVariables = {},
  TChildProps = Partial> &
    Partial>
>(
  document: DocumentNode,
  operationOptions: OperationOption<
    TProps,
    TData,
    TGraphQLVariables,
    TChildProps
  > = {}
) {
  switch (parser(document).type) {
    case DocumentType.Mutation:
      return withMutation(document, operationOptions);
    case DocumentType.Subscription:
      return withSubscription(document, operationOptions);
    case DocumentType.Query:
    default:
      return withQuery(document, operationOptions);
  }
}