dontForget.js

import React from 'react';
import { compose, withHandlers } from 'recompose';
import { injectIntl } from 'react-intl';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

// React.Element<any> is a flowtype annotation. Author is using flow. "label"'s value is set a react element.
// Is author defining the graphql mutation type here in the file instead of in a schema?
// toggleMutation prop is set to a Function. Flow? So when we call this, Flow will check if its a function.
type MutationButtonType = {
  toggleMutation: Function,
  label: React.Element<any>,
};

// this component only refers to the properties/props available in the mutation which are passed in to the func as params.
// Everything else that happens is going to invoke the type and MutationButton()
function MutationButton({ toggleMutation, label }: MutationButtonType): React.Element<any>  {
  return (
    <button onClick={toggleMutation}>
     {label}
    </button>  
  );
}

// defines the mutation query in terms of the toggleMutation property on MutationButtonType, taking params for someId.
const mutation = gql`
  mutation toggleMutation($someId: String!) {
    toggle(someId: $someId)
  }
`;

// export the component. use compose to call gql which is in our mutation(). in toggleMutation, author uses flow to specify the types
// that each property can be. mutate is a function, _id is a string, intl is an object, the how expression is a function. 
// He is setting flow types for  type checking.
export default compose(
  injectIntl,
  graphql(mutation),
  withHandlers({
    toggleMutation: ({ mutate, _id, intl }: { mutate: Function, _id: string, intl: Object }): Function => {
      return (): Promise<any> => {
        return mutate({
            variables: {
              someId: _id,
            },
          }).then((data: string) => {
          console.log(data, 'Return value');
        }).catch((e: Object) => {
          console.error(e, 'Error');
        });
      };
    }
  })
)(MutationButton);