Учебник Atlas GraphQL API MongoDB, объясняющий, как реализовать операцию обновления в приложении React.js.
Почему GraphQL?
Добавление возможности выполнять CRUD: операции Create, Rread, Update и Ddelete в вашем приложении. data требует от вас создания и предоставления API-интерфейсов, которые ваш клиент будет использовать для взаимодействия с данными, хранящимися в вашей базе данных.
GraphQL дает клиентам (мобильным/настольным/веб-приложениям) возможность запрашивать именно те данные, которые им нужны, не больше и не меньше. GraphQL — это альтернатива REST API, и основное отличие заключается в том, как клиенты и серверы взаимодействуют друг с другом.
GraphQL на бэкэнде определяет схему, описывающую все возможные данные, которые клиент может запросить, а с другой стороны, фронтенд-клиенты могут специально запрашивать данные в соответствии со своими потребностями.
Что предоставляет Atlas GraphQL API?
Обычно, чтобы предоставить клиентам такую гибкость, серверная часть становится очень сложной. Нам нужно создать и поддерживать множество распознавателей, чтобы мы могли получать запрошенные данные из базы данных на нашем сервере, а затем отвечать клиенту данными, полученными из базы данных.
Но сегодня мы не будем писать ни одной строки кода на стороне сервера, и все же мы создадим полнофункциональный GraphQL CRUD API с использованием Atlas GraphQL API MongoDB.
В этой части серии блогов мы будем реализовывать функцию обновления расходов в нашем приложении с помощью GraphQL.
Изменить страницу расходов
Здесь мы сначала получим сведения об этом конкретном расходе, который мы хотим обновить, а затем мы будем обновлять расход, используя идентификатор расхода и изменения, внесенные пользователем в форму. Создайте новый файл: ./src/pages/NavBar.page.js
Многоразовый компонент формы расходов
Поскольку страницы «Создать расход» и «Обновить расход» будут иметь одни и те же поля, мы создаем повторно используемый компонент «Форма расхода», который может использоваться обеими страницами. Создадим новый файл: ./src/components/ExpenseForm.component.js
Многоразовый настраиваемый компонент выбора даты
Создание многократно используемого пользовательского средства выбора даты было бы для нас действительно выгодным, мы можем использовать его в ExpenseForm, а также в нашей панели аналитики, которую мы собираемся создать позже в этой серии блогов. Создайте новый файл: ./src/components/CustomDatePicker.component.js
Панель навигации
Для навигации между разными страницами и функциями нам нужно единое меню навигации, чтобы убедиться, что каждая часть приложения доступна из любого места. Создайте новый файл: ./src/components/NavBar.component.js
Собираем все вместе в App.js
Давайте добавим все новые страницы, которые мы недавно представили, в основной маршрутизатор, чтобы мы могли плавно перемещаться по разным страницам в нашем приложении React.
Заключение
Потрясающий! Это все, что нам нужно было сделать, чтобы внедрить функциональность CRUD в наше приложение.
Если у вас есть какие-либо сомнения или опасения, пожалуйста, не стесняйтесь обращаться к нам на форумах сообщества. Я создал специальную тему на форуме для этого блога, где мы можем обсудить все, что связано с этой серией блогов.
И прежде чем вы спросите, вот Репозиторий GitHub (ветвь graphql-crud) для этой серии руководств.
