react-apollo-cache-example-4.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) => {
    const task = { [key]: value };
    updateTask({
      variables: { task, id },
      update: (proxy, { data = {} }) => {
        proxy.writeData({ id: `Task:${id}`, data: task });
      },
      optimisticResponse: task,
    });
  };
  return (
    <div>
      <Typography.Title
        level={4}
        strong
        editable={{ onChange: onUpdate('name') }}
      >
        {task.name}
      </Typography.Title>
      <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 style={{ padding: '50px', width: '500px' }}>
      {tasks.map((task: ITask) => (
        <div
          key={task.id}
          onClick={() => {
            setActiveTask(task.id);
          }}
          style={{ marginBottom: '10px' }}
        >
          <TaskListItem {...task} />
        </div>
      ))}
      <Divider />
      {activeTask && <TaskDetails id={activeTask} />}
    </div>
  );
};