В мире современной веб-разработки создание удобного и отзывчивого пользовательского интерфейса имеет первостепенное значение. Одним из приемов, получивших значительную популярность, является Optimistic UI. В этой статье мы рассмотрим, что такое Optimistic UI в контексте GraphQL, и обсудим различные методы его реализации в ваших приложениях. Мы также предоставим примеры кода, чтобы проиллюстрировать, как этого можно достичь с помощью популярных платформ, таких как React и Apollo Client.

Что такое оптимистичный пользовательский интерфейс?
Оптимистический пользовательский интерфейс – это подход, который позволяет разработчикам обеспечивать немедленную обратную связь с пользователями путем оптимистичного обновления пользовательского интерфейса до получения ответа от сервера. Это особенно полезно в сценариях, где задержка сети или время ответа сервера могут вызвать задержки, что приводит к ухудшению пользовательского опыта. Используя оптимистичный пользовательский интерфейс, разработчики могут повысить воспринимаемую производительность и обеспечить пользователям более плавное взаимодействие.

Методы реализации оптимистичного пользовательского интерфейса в GraphQL:

1. Отмена мутации.
   Одним из распространенных методов реализации оптимистичного пользовательского интерфейса в GraphQL является выполнение обратимой мутации. Это предполагает обновление пользовательского интерфейса сразу после действия пользователя, при условии, что операция завершится успешно. Если ответ сервера указывает на ошибку, изменения пользовательского интерфейса откатываются. Вот пример использования Apollo Client и React:

import { useMutation } from "@apollo/client";
const ADD_TODO = gql`
  mutation AddTodo($title: String!) {
    addTodo(title: $title) {
      id
      title
    }
  }
`;
const TodoForm = () => {
  const [addTodo, { data }] = useMutation(ADD_TODO);
  const handleSubmit = async (e) => {
    e.preventDefault();
    const title = e.target.elements.title.value;
    // Optimistically update UI
    addTodo({
      variables: { title },
      optimisticResponse: {
        __typename: "Mutation",
        addTodo: {
          __typename: "Todo",
          id: Math.round(Math.random() * -1000000),
          title,
        },
      },
    });
    e.target.reset();
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" placeholder="Enter a todo" />
      <button type="submit">Add Todo</button>
    </form>
  );
};

2. Обновления локального состояния.
   Другой подход к достижению оптимистичного пользовательского интерфейса в GraphQL — управление обновлениями локального состояния. Поддерживая кэш на стороне клиента или систему управления состоянием, вы можете оптимистично обновлять пользовательский интерфейс, ожидая ответа сервера. Вот пример использования кеша клиента Apollo:

import { useQuery, useMutation, gql } from "@apollo/client";
const GET_TODOS = gql`
  query GetTodos {
    todos {
      id
      title
    }
  }
`;
const ADD_TODO = gql`
  mutation AddTodo($title: String!) {
    addTodo(title: $title) {
      id
      title
    }
  }
`;
const TodoList = () => {
  const { loading, data } = useQuery(GET_TODOS);
  const [addTodo] = useMutation(ADD_TODO);
  const handleAddTodo = async (title) => {
    // Optimistically update local state
    const optimisticTodo = {
      __typename: "Todo",
      id: Math.round(Math.random() * -1000000),
      title,
    };
    addTodo({
      variables: { title },
      optimisticResponse: {
        __typename: "Mutation",
        addTodo: optimisticTodo,
      },
      update: (cache) => {
        const existingTodos = cache.readQuery({ query: GET_TODOS });
        cache.writeQuery({
          query: GET_TODOS,
          data: {
            todos: [optimisticTodo, ...existingTodos.todos],
          },
        });
      },
    });
  };
  if (loading) {
    return <p>Loading...</p>;
  }
  return (
    <div>
      <ul>
        {data.todos.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
      <TodoForm onAddTodo={handleAddTodo} />
    </div>
  );
};

Оптимистичный пользовательский интерфейс — это мощный метод, который может значительно улучшить взаимодействие с пользователем приложений на основе GraphQL. Оптимистично обновляя пользовательский интерфейс, вы можете предоставить пользователям мгновенную обратную связь и более плавное взаимодействие даже в сценариях с задержками в сети или медленными ответами сервера. В этой статье мы рассмотрели два распространенных метода реализации оптимистичного пользовательского интерфейса в GraphQL, используя отмену мутаций и обновления локального состояния. Используя такие платформы, как React и Apollo Client, вы можете легко внедрить эти методы в свои проекты и создать восхитительный пользовательский опыт.

Реализуя оптимистичный пользовательский интерфейс в GraphQL, вы можете повысить воспринимаемую производительность своих приложений, что приведет к более довольным пользователям и более высокой вовлеченности.