Comparison of Hooks and Container-based Refetching

new_hooks_based_refetching.react.jsx

type Props = {
  comment: CommentBody_comment$key,
};
function CommentBody(props: Props) {
  const [data, refetch] = useRefetchableFragment<CommentBodyRefetchQuery, _>(
    graphql`
      fragment CommentBody_comment on Comment
      @refetchable(queryName: "CommentBodyRefetchQuery") {
        body(lang: $lang) {
          text
        }
      }
    `,
    props.comment,
  );
  
  return <>
    <CommentText text={data?.text} />
    <Button
      onClick={() =>
        refetch({ lang: 'SPANISH' }, {fetchPolicy: 'store-or-network'})
      }>
    >
      Translate
    </Button>
  </>
}

old_container_based_refetching.react.jsx

// TodoItem.js
import {createRefetchContainer, graphql} from 'react-relay';

class TodoItem extends React.Component {
  render() {
    const data = this.props.comment;
    return (
      <>
        <CommentText text={data?.text} />
        <Button
          onClick={() =>
            this._refetch({ lang: 'SPANISH' })
          }>
        >
          Translate
        </Button>
      </>
    );
  }

  _refetch = (variables) => {
    this.props.relay.refetch(
      {
        ...variables,
        commentId: this.props.comment.id, // Our refetchQuery needs to know the `itemID`
      },
      null,  // We can use the refetchVariables as renderVariables
      () => { console.log('Refetch done') },
      {force: true},  // Assuming we've configured a network layer cache, we want to ensure we fetch the latest data.
    );
  }
}

export default createRefetchContainer(
  TodoItem,
  {
    comment: graphql`
      fragment CommentBody_comment on Comment {
        body(lang: $lang) {
          text
        }
      }
    `
  },
  graphql`
    # Refetch query to be fetched upon calling `refetch`.
    # Notice that we re-use our fragment and the shape of this query matches our fragment spec.
    query CommentBodyRefetchQuery($lang: String!, $commentId: ID!) {
      comment: node(id: $commentID) {
        ...CommentBody_comment
      }
    }
  `
);