How to use the relay-hooks.useFragment function in relay-hooks

export const Todo = (props: Props) => {
  const [isEditing, setIsEditing] = useState(false);

  const {disabled} = props;
  const environment = useRelayEnvironment();
  const user = useFragment(fragmentSpecUser, props.user);
  const todo = useFragment(fragmentSpecTodo, props.todo);

  console.log('renderer');

  const handleCompleteChange = (e: SyntheticEvent) => {
    const complete = e.currentTarget.checked;
    ChangeTodoStatusMutation.commit(environment, complete, todo, user);
  };

  const handleDestroyClick = () => removeTodo();
  const handleLabelDoubleClick = () => {
    if (!disabled) setIsEditing(true);
  };
  const handleTextInputCancel = () => setIsEditing(false);

  const handleTextInputDelete = () => {
    setIsEditing(false);

export const Todo = (props: Props) => {
  const [isEditing, setIsEditing] = useState(false);

  const {disabled} = props;
  const environment = useRelayEnvironment();
  const user = useFragment(fragmentSpecUser, props.user);
  const todo = useFragment(fragmentSpecTodo, props.todo);

  console.log('renderer');

  const handleCompleteChange = (e: SyntheticEvent) => {
    const complete = e.currentTarget.checked;
    ChangeTodoStatusMutation.commit(environment, complete, todo, user);
  };

  const handleDestroyClick = () => removeTodo();
  const handleLabelDoubleClick = () => {
    if (!disabled) setIsEditing(true);
  };
  const handleTextInputCancel = () => setIsEditing(false);

  const handleTextInputDelete = () => {

const TodoList = (props: Props) => {
  console.log("props", props);

  const environment = useRelayEnvironment();
  const user = useFragment(TodoList_user, props.user);
  const { todos, completedCount, totalCount, userId } = user;
  const handleMarkAllChange = (e: SyntheticEvent) => {
    const complete = e.currentTarget.checked;

    if (todos) {
      MarkAllTodosMutation.commit(environment, complete, todos, user);
    }
  };

  const nodes: ReadonlyArray =
    todos && todos.edges
      ? todos.edges
          .filter(Boolean)
          .map((edge: any) => edge.node)
          .filter(Boolean)
      : [];

const TodoListPlural = (props) => {
  const { refetch } = props;
  const edges = useFragment(fragmentSpec, props.edges);

  const nodes: $ReadOnlyArray =
  edges  ? edges.map((edge: Edge) => edge.node) : [];

  const handlerRefetch = () => {
    const response = refetch(QueryApp,
      {userId: "you"},  
      null,  
      () => { console.log('Refetch done') },
      {force: true},  
    );
    //response.dispose();

  }

  return (

const Collaborator = ({
  showDescription,
  showJoblistings,
  ...props
}: Props) => {
  const company: Collaborator_company = useFragment(
    fragmentSpec,
    props.company
  );
  return (
    <div style="{{">
      <a href="{company.url}">
        <img src="{company.logo">
      </a>
      {showDescription &amp;&amp; }
    </div>
  );
};
export default Collaborator;