Курс NextJS. 12. Изменение данных в БД / Mutating Data

Курс NextJS. 12. Изменение данных в БД / Mutating Data

1. Используем серверные действия (Server Actions) для создания, изменения и удаления данных в БД на примере инвойсов
2. Обсуждаем особенности передачи данных из формы на сервер адресату - серверной функции
3. Доопределяем функцию SA с помощью bind и пересылаем с ней дополнительные переменные (например, Invoice ID), не содержащиеся в явном виде в полях формы и не попадающие поэтому в объект formData - стандартный входной параметр SA
4. Применяем revalidatePath для очистки и обновления кэша и redirect для безусловного перенаправления пользователя на другую страницу
5. Проверяем и преобразовываем типы данных с помощью структур пакета zod
6. Создаем и используем динамические маршруты

Презентацию можно скачать здесь:
https://dmpsy.club/references/NextJS/...

Ссылка на GitHub:
https://github.com/DmitryMakar/nextjs...

Поддержать автора: https://www.donationalerts.com/r/dmit...

Хронометраж

0:00:00 Введение
0:00:30 Целевая аудитория
0:00:54 План работы
0:03:33 Серверные действия по изменению данных в БД. Постановка задачи
0:05:30 Вызов server action из компонента form. Обновление кэша
0:08:40 Создание инвойса. Последовательность реализации
0:10:15 Создание инвойса. Страница генерации счета в сегменте create
0:16:22 Создание инвойса. Создаем SA (createInvoice) и извлекаем данные
0:23:45 Создание инвойса. Проверяем и преобразуем данные для БД
0:29:29 Создание инвойса. Загружаем счет в БД
0:34:23 Создание инвойса. Очищаем кэш и возвращаемся к странице инвойсов
0:37:50 Схема взаимодействия компонентов при создании инвойса
0:39:40 Редактирование инвойса. Последовательность реализации
0:42:26 Редактирование инвойса. Создаем динамический сегмент маршрута
0:45:16 Редактирование инвойса. Делаем запрос в БД по Invoice id и заполняем форму
0:52:05 Редактирование инвойса. Передаем UUID инвойса в SA updateInvoice
0:55:57 Редактирование инвойса. Добавляем функцию SA updateInvoice
1:03:40 Схема взаимодействия компонентов при изменении инвойса
1:06:00 Удаление инвойса
1:13:50 Схема взаимодействия компонентов при удалении инвойса
1:14:55 Демонстрация работы в production
1:18:00 Подведем итоги
1:19:21 Заключительные замечания

Timing

0:00:00 Introduction
0:00:30 Target audience
0:00:54 Agenda
0:03:33 Server actions (SA) to mutate DB data. Statement of the problem
0:05:30 Invoking SA from an HTML form. Revalidating cache
0:08:40 Creating an invoice. Implementation steps
0:10:15 Creating an invoice. Invoice generation page in the create route segment
0:16:22 Creating an invoice. Code the createInvoice SA and extract data
0:23:45 Creating an invoice. Validate and prepare the data to be inserted into DB
0:29:29 Creating an invoice. Commit the invoice to DB
0:34:23 Creating an invoice. Revalidate cache and get back to invoices
0:37:50 The diagram of component interaction when creating an invoice
0:39:40 Updating an invoice. Implementation steps
0:42:26 Updating an invoice. Create a dynamic route segment with the Invoice id
0:45:16 Updating an invoice. Fetch the invoice by its id and populate the form
0:52:05 Updating an invoice. Pass the Invoice id to the updateInvoice SA
0:55:57 Updating an invoice. Implementing the updateInvoice SA function
1:03:40 The diagram of component interaction when updating an invoice
1:06:00 Deleting an invoice
1:13:50 The diagram of component interaction when deleting an invoice
1:14:55 Production build demo
1:18:00 Summary
1:19:21 Closing comments

1. Using server actions to create, change and delete DB data exemplified by invoices
2. Discussing the specifics of transferring data from a form to the server addressee, the server action function
3. Extending the SA function using bind and sending additional variables with it (for example, Invoice ID) that are not explicitly contained in the form fields and therefore falls no into the formData object, the standard SA input parameter
4. Using revalidatePath to clear the cache and unconditionally redirect the user to another page
5. Validating and converting data types using zod package structures
6. Creating and using dynamic routes

The presentation can be downloaded here:
https://dmpsy.club/references/NextJS/...

GitHub Link:
https://github.com/DmitryMakar/nextjs...

Donate the author: https://www.donationalerts.com/r/dmit...