react-apollo-cache-example-1.js

const TaskDetails = ({ id }) => {
  const [updateTask] = useMutation(UPDATE_TASK);
  const { data = {} } = useQuery(GET_TASK, { variables: { id } });
  const { task = { comments: [] } }: { task: ITask } = data;
  const onUpdate = (key) => (value) => {
    updateTask({ variables: { task: { [key]: value }, id } });
  };
  return (
    <div>
      <Typography.Text strong editable={{ onChange: onUpdate('name') }}>
        {task.name}
      </Typography.Text>
      <Typography.Text editable={{ onChange: onUpdate('notes') }}>
        {task.notes}
      </Typography.Text>
    </div>
  );
};

const TaskListItem = ({ notes, name }: ITask) => (
  <div>
    <Typography.Title level={4}>{name}</Typography.Title>
    <Typography.Text>{notes}</Typography.Text>
  </div>
);

const TaskList = () => {
  const { data = {} } = useQuery(GET_TASKS);
  const { tasks = [] } = data;
  const [activeTask, setActiveTask] = useState(null);
  return (
    <div>
      {tasks.map((task: ITask) => (
        <div
          key={task.id}
          onClick={() => {
            setActiveTask(task.id);
          }}
        >
          <TaskListItem {...task} />
        </div>
      ))}
      {activeTask && <TaskDetails id={activeTask} />}
    </div>
  );
};