How to use relay-hooks - 10 common examples

function commit(
  environment: Environment,
  todos: Todos,
  user: TodoListFooter_user,
): Disposable {
  const input: RemoveCompletedTodosInput = {
    userId: user.userId,
  };

  return useMutation(mutation, {
    variables: {
      input,
    },
    updater: (store: RecordSourceSelectorProxy) => {
      const payload = store.getRootField('removeCompletedTodos');
      const deletedIds = payload.getValue('deletedTodoIds');

      // $FlowFixMe `payload.getValue` returns mixed, not sure how to check refinement to $ReadOnlyArray
      sharedUpdater(store, user, deletedIds);
    },
    optimisticUpdater: (store: RecordSourceSelectorProxy) => {
      // Relay returns Maybe types a lot of times in a connection that we need to cater for
      const completedNodeIds: $ReadOnlyArray = todos.edges
        ? todos.edges
            .filter(Boolean)
            .map((edge: Edge): ?Node => edge.node)

const LayoutTodo = ({userId}) => {
  console.log('LayoutTodo', userId, isServer);
  const {props, error, retry, cached} = useQuery(
    QueryApp,
    {userId},
    {
      fetchPolicy: 'store-and-network',
    },
  );
  /*const { props, error, retry, cached } = useQuery({
    query: QueryApp,
    variables: {
      // Mock authenticated ID that matches database
      userId,
    },
    dataFrom: "STORE_THEN_NETWORK"
  });*/

  console.log('renderer', props, cached);

...ref.current,
          rehydrated: true,
          error: null
        };
        const { props } = ref.current;
        ref.current = current;
        if (!props) forceUpdate(current);
      })
      .catch(error => {
        throw error; //
      });
  }

  const query = useMemoOperationDescriptor(gqlQuery, variables);

  const queryFetcher = useQueryFetcher();

  const { fetchPolicy, networkCacheConfig, ttl } = options;

  const { props, error, ...others } = queryFetcher.execute(
    environment,
    query,
    {
      networkCacheConfig,
      fetchPolicy:
        rehydrated && environment.isOnline() ? fetchPolicy : STORE_ONLY
    },
    (environment, query) => environment.retain(query.root, { ttl }) // TODO new directive
  );

  const current = {
    ...others,

.then(() => {
        const current = {
          ...ref.current,
          rehydrated: true,
          error: null
        };
        const { props } = ref.current;
        ref.current = current;
        if (!props) forceUpdate(current);
      })
      .catch(error => {
        throw error; //
      });
  }

  const query = useMemoOperationDescriptor(gqlQuery, variables);

  const queryFetcher = useQueryFetcher();

  const { fetchPolicy, networkCacheConfig, ttl } = options;

  const { props, error, ...others } = queryFetcher.execute(
    environment,
    query,
    {
      networkCacheConfig,
      fetchPolicy:
        rehydrated && environment.isOnline() ? fetchPolicy : STORE_ONLY
    },
    (environment, query) => environment.retain(query.root, { ttl }) // TODO new directive
  );

const TodoList = (props) => {
  const { refetch, user } = props;
  //const { refetch } = props;
  //const user = useFragment(fragmentSpec, props.user);
  const  { todos, completedCount, totalCount, userId } = user;
  const [mutate] = useMutation(mutation);
  const handleMarkAllChange = (e: SyntheticEvent) => {
    const complete = e.currentTarget.checked;

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

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

const TodoListFooter = props => {
  const [user, functions] = useOssFragment(fragmentSpec, props.user);
  const {todos, completedCount, totalCount} = user;
  const completedEdges: $ReadOnlyArray =
    todos && todos.edges
      ? todos.edges.filter(
          (edge: ?Edge) => edge && edge.node && edge.node.complete,
        )
      : [];

  const [mutate] = useMutation(mutation);
  const handleRemoveCompletedTodosClick = () => {
    RemoveCompletedTodosMutation.commit(
      mutate,
      {
        edges: completedEdges,
      },
      user,
    );
  };

  const numRemainingTodos = totalCount - completedCount;

  console.log('completedCount', completedCount);

  return (
    <footer></footer>

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)
      : [];

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);