Создаем своё первое веб-приложение с помощью Django
Авторизуйтесь
Создаем своё первое веб-приложение с помощью Django
Django — это Open Source фреймворк для создания веб-приложений различной сложности. Одним из основных преимуществ Django является то, что вам нужно позаботиться только о логике вашего будущего приложения, остальное сделает Django.
Мы создадим веб-приложение, у которого будет панель администратора и возможность загружать загадки, а у пользователей, соответственно, возможность отвечать на них. Во время разработки будут использоваться Python 3.4.3 и Django 1.9.1.
Устанавливаем Django
Создаем проект
Как только создание проекта будет завершено, взглянем на директорию нашего проекта:
Создаем приложение
Определим различие между проектом и приложением. Приложение — это программа, которая что-то делает, а проект — это группа приложений.
В urls.py мы должны написать следующее:
Установка базы данных
По умолчанию в Django используется SQLite, если она вас не устраивает, то вы можете ознакомиться с нашей статьей, в которой мы рассказываем, как безболезненно перейти с SQLite на MySQL.
Данная модель обеспечивает Django информацией, необходимой для создания схемы базы данных и database-access API для доступа к объектам. Теперь нам нужно привязать наше приложение к нашему проекту, делается это следующим образом:
Так мы говорим Django, что в моделях были сделаны некоторые изменения, и их нужно сохранить в качестве миграции.
Проверить, что сделает миграция, можно так: python manage.py sqlmigrate riddles 0001 (0001 — версия миграции, которую мы хотим проверить). На выходе мы получим:
Заметьте, что команда sqlmigrate нужна только для проверки, каждый раз ее запускать необязательно.
Теперь дадим админу возможность изменять наши модели. Делается это так:
Вот что получится в итоге:
Возьмите небольшую паузу и поиграйтесь с панелью администратора. Вы будете приятно удивлены тем, что умеет Django.
Главная страница
Что нам нужно для создания главной страницы?
Теперь создадим макет для ответов:
Давайте пройдемся по каждой функции отдельно:
Теперь добавим наши функции в urls.py :
Добавим немного стилей
Немного изменим наши шаблоны:
Первая строка загружает статические файлы, потом мы используем <% static '#' %>, где # — путь к вашему файлу. Аналогичная процедура проводится и для JavaScript.
Теперь вы можете создавать свои собственные приложения на Django. В качестве подсказки на старте работы с фреймворком воспользуйтесь одной из наших шпаргалок по Python.
Исходный код нашего приложения можно скачать по этой ссылке.
Если этот проект показался сложным, попробуйте пройти двухчасовой видеокурс. На нём вы пошагово создадите 3 веб-приложения: сокращатель ссылок, ToDo List и словарь английских слов.
Создаём веб-приложение с бэкендом на Django и фронтендом на React
В этом материале вы узнаете:
Подготовка
Создаём проект Django в виртуальном окружении Python
Создайте новую папку и перейдите в неё:
Потом активируйте виртуальное окружение Python:
Примечание все следующие команды нужно выполнять из папки django-react и с активированным виртуальным окружением.
Установите зависимости Django и Django REST Framework:
pip install django djangorestframework
После установки создайте новый проект Django:
django-admin startproject django_react
Теперь сделаем простое API на Django для создания и хранения контактов.
Создаём приложение на Django
В каждом проекте Django может быть много приложений. Приложения можно делать переиспользуемыми: такими, что их можно добавить в менеджер пакетов Python и установить через него в другой проект, в котором нужно такое приложение.
Для создания нового приложения Django используется команда:
django-admin startapp app_name
где app_name — название приложения.
В нашем случае команда будет выглядеть так:
django-admin startapp leads
Теперь сделаем так, чтобы Django проект использовал новое приложение. Откройте файл django_react/settings.py и добавьте приложение в INSTALLED_APPS :
INSTALLED_APPS = [ ‘django.contrib.admin’, ‘django.contrib.auth’, ‘django.contrib.contenttypes’, ‘django.contrib.sessions’, ‘django.contrib.messages’, ‘django.contrib.staticfiles’, ‘leads.apps.LeadsConfig’, # activate the new app ]
Создаём модель в базе данных с помощью Django
Модель — это объект, представляющий собой данные из таблицы. Почти каждый веб-фреймворк использует модели, и Django — не исключение.
Модель Django может иметь одно или больше полей. Каждое поле соответствует полю в таблице.
Мы собираемся хранить контакты, поэтому модель Lead может состоять из этих полей:
(Можно добавлять и другие поля, например телефон). Добавим ещё поле с временем создания модели, потому что по умолчанию Django этого не делает.
Откроем leads/models.py и опишем модель Lead :
from django.db import models class Lead(models.Model): name = models.CharField(max_length=100) email = models.EmailField() message = models.CharField(max_length=300) created_at = models.DateTimeField(auto_now_add=True)
Примечание изучите документацию Django о полях. Когда придумываете структуру модели, выбирайте самые подходящие для вашего случая поля.
Создадим миграции командой:
python manage.py makemigrations leads
и применим их к базе данных:
python manage.py migrate
Займёмся тестированием
Вы могли подумать «А как же тестирование?».
Существует масса туториалов по Django, начинающихся примерно так:
class SomeModelModelTest(TestCase): def setUp(self): SomeModel.objects.create( name=fake.name(), email=fake.email(), phone=fake.phone_number(), message=fake.text(), source=fake.url() ) def test_save_model(self): saved_models = SomeModel.objects.count() self.assertEqual(saved_models, 2)
Не надо так. Нет никакого смысла ни в тестировании стандартной модели Django, ни в тестировании Django ORM. Что точно не нужно тестировать при создании приложения на Django:
Не тестируйте то, что уже протестировано! Так что же тогда тестировать?
Добавили свой метод в модель Django — протестируйте его. Дополнили стандартное представление — протестируйте его. Но как узнать, что именно нужно протестировать?
Узнать это поможет библиотека coverage. Установите её:
pip install coverage
Теперь после каждого добавления или изменения кода запускайте coverage :
и создавайте отчёт:
Вы увидите, что именно нужно протестировать. Если предпочитаете увидеть отчёт в командной строке, запустите команду:
Сериализаторы Django
Сериализация — это конвертация объекта Python в другой формат. После сериализации можно сохранить объект в файл или послать его через сеть.
Почему сериализация необходима? Модель Django — это класс Python. Чтобы превратить её в данные в формате JSON, нужна сериализация.
Сериализаторы работают и в обратном направлении: они конвертируют JSON в объекты. Это позволяет:
Суммируя: сериализаторы в Django можно использовать для совершения операций с моделями Django через API.
Создаём представления
Если вы раньше работали с другими фреймворками, то можете удивиться, что в Django нет контроллеров.
Контроллеры содержат логику обработки запросов и возвращения ответов. В традиционной архитектуре MVC есть модель (Model), представление (View) и контроллер (Controller). Примеры MVC фреймворков: Rails (Ruby), Phoenix (Elixir), Laravel (PHP).
Django — это фреймворк MVT. MVT — это модель, представление и шаблон (Template). В Django есть много типов представлений: функции-представления, представления, основанные на классах, и обобщённые представления.
Используйте функции-представления только если изменение обобщенных представлений займет больше, чем написание представления заново.
Мы будем использовать обобщённые представления. Наше простое приложение будет:
С помощью трёх строк кода мы создали представление для обработки GET и POST запросов.
Чего ещё не хватает? Маршрутизации URL. Другими словами, нам нужно соединить URL и представления.
Настраиваем маршрутизацию url
from django.urls import path, include urlpatterns = [ path(», include(‘leads.urls’)), ]
# Application definition INSTALLED_APPS = [ # omitted for brevity ‘leads.apps.LeadsConfig’, ‘rest_framework’ ]
Запустим сервер Django:
python manage.py runserver
Перейдите по url http://127.0.0.1:8000/api/lead/ и вы увидите API:
Примечание в продакшене лучше отключить возможность просмотра API. Это можно сделать в конфигурации:
Соединяем Django и React
У многих разработчиков возникают вопросы по поводу того, как правильно соединить Django и React.
Должен ли роутер React взять на себя маршрутизацию? Нужно ли монтировать компоненты React в каждом шаблоне Django?
Ответ зависит от случая.
Есть следующие способы создания проекта на Django и React (они похожи почти для любого веб-фреймворка):
Если вы только начали работать с Django REST и React, избегайте варианта 2. Вместо этого выберите 1 (React в собственном приложении Django для фронтенда), если:
Если будете держать React близко к Django, то будет проще с авторизацией. Можно будет использовать встроенную систему авторизации Django для регистрации и входа пользователей. Используйте старую добрую авторизацию с помощью сессий и не беспокойтесь о токенах и JWT.
Выберите вариант 3 (смешанный вариант: мини-приложения React в шаблонах Django), если:
В данной статье мы будем использовать вариант 1.
Устанавливаем React и webpack
Создадим новое приложение Django для фронтенда:
django-admin startapp frontend
Вы увидите новую папку с названием frontend в вашей структуре папок:
Подготовим папки для хранения компонентов React:
Дальше установим React, webpack и babel. Перейдите в папку frontend и создайте окружение:
Установите webpack и webpack CLI:
Откройте package.json и запишите 2 скрипта для продакшна и для разработки:
Сохраните и закройте файл.
Установим babel, чтобы код был совместим со старыми браузерами, которые не поддерживают последние стандарты JavaScript:
Настроим Babel (по-прежнему находясь в папке frontend ):
Создаём веб-приложение с бэкендом на Django и фронтендом на React
Автор перевода Полина Ревякина, копирайтер в Skillbox
В этом материале вы узнаете:
Подготовка
Создаём проект Django в виртуальном окружении Python
Создайте новую папку и перейдите в неё:
Потом активируйте виртуальное окружение Python:
Примечание все следующие команды нужно выполнять из папки django-react и с активированным виртуальным окружением.
Установите зависимости Django и Django REST Framework:
pip install django djangorestframework
После установки создайте новый проект Django:
django-admin startproject django_react
Теперь сделаем простое API на Django для создания и хранения контактов.
Создаём приложение на Django
В каждом проекте Django может быть много приложений. Приложения можно делать переиспользуемыми: такими, что их можно добавить в менеджер пакетов Python и установить через него в другой проект, в котором нужно такое приложение.
Для создания нового приложения Django используется команда:
django-admin startapp app_name
где app_name — название приложения.
В нашем случае команда будет выглядеть так:
django-admin startapp leads
Теперь сделаем так, чтобы Django проект использовал новое приложение. Откройте файл django_react/settings.py и добавьте приложение в INSTALLED_APPS :
Создаём модель в базе данных с помощью Django
Модель — это объект, представляющий собой данные из таблицы. Почти каждый веб-фреймворк использует модели, и Django — не исключение.
Модель Django может иметь одно или больше полей. Каждое поле соответствует полю в таблице.
Мы собираемся хранить контакты, поэтому модель Lead может состоять из этих полей:
(Можно добавлять и другие поля, например телефон). Добавим ещё поле с временем создания модели, потому что по умолчанию Django этого не делает.
Откроем leads/models.py и опишем модель Lead :
Примечание изучите документацию Django о полях. Когда придумываете структуру модели, выбирайте самые подходящие для вашего случая поля.
Создадим миграции командой:
python manage.py makemigrations leads
и применим их к базе данных:
python manage.py migrate
Займёмся тестированием
Вы могли подумать «А как же тестирование?».
Существует масса туториалов по Django, начинающихся примерно так:
Не надо так. Нет никакого смысла ни в тестировании стандартной модели Django, ни в тестировании Django ORM. Что точно не нужно тестировать при создании приложения на Django:
Не тестируйте то, что уже протестировано! Так что же тогда тестировать?
Добавили свой метод в модель Django — протестируйте его. Дополнили стандартное представление — протестируйте его. Но как узнать, что именно нужно протестировать?
Узнать это поможет библиотека coverage. Установите её:
pip install coverage
Теперь после каждого добавления или изменения кода запускайте coverage :
и создавайте отчёт:
Вы увидите, что именно нужно протестировать. Если предпочитаете увидеть отчёт в командной строке, запустите команду:
Сериализаторы Django
Сериализация — это конвертация объекта Python в другой формат. После сериализации можно сохранить объект в файл или послать его через сеть.
Почему сериализация необходима? Модель Django — это класс Python. Чтобы превратить её в данные в формате JSON, нужна сериализация.
Сериализаторы работают и в обратном направлении: они конвертируют JSON в объекты. Это позволяет:
Суммируя: сериализаторы в Django можно использовать для совершения операций с моделями Django через API.
Создаём представления
Если вы раньше работали с другими фреймворками, то можете удивиться, что в Django нет контроллеров.
Контроллеры содержат логику обработки запросов и возвращения ответов. В традиционной архитектуре MVC есть модель (Model), представление (View) и контроллер (Controller). Примеры MVC фреймворков: Rails (Ruby), Phoenix (Elixir), Laravel (PHP).
Django — это фреймворк MVT. MVT — это модель, представление и шаблон (Template). В Django есть много типов представлений: функции-представления, представления, основанные на классах, и обобщённые представления.
Используйте функции-представления только если изменение обобщенных представлений займет больше, чем написание представления заново.
Мы будем использовать обобщённые представления. Наше простое приложение будет:
С помощью трёх строк кода мы создали представление для обработки GET и POST запросов.
Чего ещё не хватает? Маршрутизации URL. Другими словами, нам нужно соединить URL и представления.
Настраиваем маршрутизацию url
Запустим сервер Django:
python manage.py runserver
Перейдите по url http://127.0.0.1:8000/api/lead/ и вы увидите API:
Примечание в продакшене лучше отключить возможность просмотра API. Это можно сделать в конфигурации:
Соединяем Django и React
У многих разработчиков возникают вопросы по поводу того, как правильно соединить Django и React.
Должен ли роутер React взять на себя маршрутизацию? Нужно ли монтировать компоненты React в каждом шаблоне Django?
Ответ зависит от случая.
Есть следующие способы создания проекта на Django и React (они похожи почти для любого веб-фреймворка):
Если вы только начали работать с Django REST и React, избегайте варианта 2. Вместо этого выберите 1 (React в собственном приложении Django для фронтенда), если:
Если будете держать React близко к Django, то будет проще с авторизацией. Можно будет использовать встроенную систему авторизации Django для регистрации и входа пользователей. Используйте старую добрую авторизацию с помощью сессий и не беспокойтесь о токенах и JWT.
Выберите вариант 3 (смешанный вариант: мини-приложения React в шаблонах Django), если:
В данной статье мы будем использовать вариант 1.
Устанавливаем React и webpack
Создадим новое приложение Django для фронтенда:
django-admin startapp frontend
Вы увидите новую папку с названием frontend в вашей структуре папок:
Подготовим папки для хранения компонентов React:
Дальше установим React, webpack и babel. Перейдите в папку frontend и создайте окружение:
Установите webpack и webpack CLI:
Откройте package.json и запишите 2 скрипта для продакшна и для разработки:
Сохраните и закройте файл.
Установим babel, чтобы код был совместим со старыми браузерами, которые не поддерживают последние стандарты JavaScript:
Настроим Babel (по-прежнему находясь в папке frontend ):
Создадим файл webpack.config.js для настройки загрузчика babel:
Готовим приложение Django для фронтенда
Зайдя на http://127.0.0.1:8000/, вы увидите пока что просто пустую страницу (для этого сервер Django должен продолжать работать).
Фронтенд на React
Сделаем простой компонент React, который будет отображать наши данные. Если ваша база данных пуста, то самое время наполнить приложение какими-нибудь данными.
Запустите сервер Django и перейдите на http://127.0.0.1:8000/api/lead/ чтобы добавить контакты.
import App from «./components/App» ;
Теперь можно протестировать результат. Запустите webpack:
Запустите сервер Django:
python manage.py runserver
Перейдите на http://127.0.0.1:8000/. Если вы видите сообщение «Что-то пошло не так», то убедитесь, что применили миграции и заполнили базу данных. Вы должны увидеть данные, отображенные компонентом React.
Выглядит просто. И работает!
Заключение
В этом материале мы сделали простой проект на Django REST API и React. Мы научились:
Nuxt + Django + GraphQL на примере
Предисловие
Nuxt — «фреймворк над фреймворком Vue» или популярная конфигурация Vue-based приложений с использованием лучших практик разработки на Vue. Среди них: организация каталогов приложения; включение и преконфигурация самых популярных инструментов в виде Nuxt модулей; включение Vuex по-умолчанию в любую конфигурацию; готовый и преднастроенный SSR с hot-reloading’ом
Django — самый популярный веб-фреймворк на почти самом популярном языке программирования на сегодняшний день — Python. Сами разработчики позиционируют проект как «Веб-фреймворк для перфекционистов с дедлайнами». Представляет из себя решение «всё в одном» и позволяет в кратчайшие сроки построить MVP вашего веб-приложения.
GraphQL — язык запросов изначально созданный компанией Facebook. В статье будет говориться о конкретных реализациях протокола этого языка, а именно библиотек Apollo для фронтенда и graphene для бэкенда.
О чем и для кого эта статья
В этой статье вы сможете узнать как можно собрать dev-окружение современного SPA приложения с server side рендерингом, на основе фреймворков Django и Nuxt, а также их сообщения посредством GraphQL API.
На примере простейшего приложения со списком задач, я попытался рассказать об основных проблемах с которыми я столкнулся в процессе построения приложения на выбранном стеке.
Описание старался делать как можно более понятным, в том числе и новичкам в программировании (коим, буду честен, я считаю и себя), и приводить как можно больше ссылок.
Исходя из того, что эту статью вы читаете на русском языке, я делаю смелое предположение, что и остальные материалы по программированию вы также предпочитаете читать на русском, поэтому все ссылки я старался подбирать в соответствии с этим предположением насколько это возможно.
Искрене надеюсь, что статья поможет сэкономить хоть немного времени тем энтузиастам, кто решит создать свое приложения на базе приведенных выше технологий, а также дать быстрый старт всем интересующимся без необходимости проводить часы и дни в поисках причин возникающих проблем, а затем и их решений на просторах интернета.
Построение приложения будет вестись поэтапно, чтобы на каждом этапе можно было удостовериться что всё работает правильно.
Перед началом
Убедитесь, что у вас уже установлен node.js и интерпретатор python. В примере используются версии: 13.9 и 3.7 соответственно.
В качестве менеджера виртуального окружения python в статье будет использоваться pipenv.
В качестве базы данных для простоты будет использоваться Sqlite, которая не требует дополнительной конфигурации.
Версии всех пакетов вы всегда можете посмотреть в репозитории статьи. Ниже я приведу те, что мы будем устанавливать вручную.
Python библиотеки
Javascript библиотеки
Приступим
Django
Создание проекта и окружения
Для начала необходимо установить менеджер виртуального окружения. В примере я буду использовать pipenv. Для установки:
В некоторых операционных системах для этого действия могут потребоваться права суперпользователя. Также pipenv можно установить из репозитория вашей операционной системы.
Создаем виртуальное окружение и одновременно устанавливаем django и graphene_django :
Библиотека graphene_django позволяет описывать схему GraphQL API на основе моделей Django ORM. Очень удобно, но как по мне, со связыванием таблиц БД и фронтом напрямую нужно быть очень осторожным.
Для начала активируем виртуальное окружение pipenv. Далее в статье будет предполагаться, что все комманды будут выполняться внутри окружения.
Создаем проект Django.
Настройка
Перенос manage.py
Для этого, из корневой директории проекта:
Также в файле backend/backend/settings.py приведем следующие переменные к виду:
Добавление graphene_django
В файле backend/backend/settings.py в переменную INSTALLED_APPS добавляем установленный ранее graphene_django :
Проверяем работоспособность
Настройка graphene
После изменений ниже http://localhost:8000/ уже не будет встречать нас ракетой. В файле backend/backend/urls.py
Создадим пустую схему, например, в файле backend/backend/api.py
Проверяем работоспособность. Запускаем сервер уже известной командой runserver :
и переходим на http://localhost:8000/graphql/. Там нас должна встретить та самая мини «IDE» GrapiQL:
Ничего страшного в том, что нас встречает ошибка. Она появляется из-за того, что наша схема пуста. Мы исправим это при реализации дальше.
Приложение todo_list
Создание приложения
Создадим приложение todo_list и модели к нему. Не забывайте, что все команды должны выполняться внутри окружения pipenv:
Добавим модели Todo и Category в файл backend/todo_list/models.py :
Для того, чтобы наши модели превратились в таблицы в БД, нужно выполнить следующее:
Создать файлы миграций, в которых будет описываться наша текущая схема:
С примерно таким выводом:
Создание GraphQL API
После создания классов мутации и запроса, их нужно добавить в нашу схему. Как вы, возможно, помните схему мы описывали в файле api.py :
Если хотите лучше понять происходящее, можете прочитать эту статью на Хабре, или обратиться к документации Graphene (англ.).
Проверка API
ID записей в примерах ниже могут различаться с ID ваших записей.
Запускаем сервер привычной командой runserver :
Давайте проверим получившиеся запросы и мутации.
Запрос
Переменные
Результат
В результате этой мутации у нас создалось две записи:
Запрос
Результат:
Мутация
Переменные
Результат:
Мутация
Переменные можно оставить из предыдущей мутации.
Результат
Чтобы ближе познакомиться с синтаксисом и терминологией GraphQL, можете ознакомиться с этой статьей на Хабре.
Создание Nuxt приложения
Откройте консоль внутри корневой директории проекта и запустите скрипт установки Nuxt :
Запустится очень простой и понятный скрипт установки, который предложит указать описание проекта и предоставит на выбор для установки несколько библиотек. Можете выбрать, что захотите, но из рекомендуемых пунктов я бы посоветовал выбрать «Custom UI Framework: vuetify», т.к. в примере используется именно он, и «Rendering mode: Universal», т.к. в статье рассматривается пример именно с SSR.
Пример моей конфигурации:
На установку зависимостей может потребоваться некоторое время. После завершения работы скрипта вам предложат проверить его работоспособность. Давайте сделаем это:
и перейдем на http://localhost:3000. Там нас должна ждать страница приветствия Nuxt + Vuetify:
Перенос конфигурационных файлов
Как я говорил ранее, фронтенд и бэкенд будут находиться у нас в одной директории, поэтому было бы неплохо перенести конфигурационные файлы и зависимости на уровень повыше. Для этого из корневой папки проекта выполните:
Затем в файле nuxt.config.js указываем корневую директорию приложения:
После этого желательно еще раз убедиться в работоспособности проекта, выполнив запуск dev-сервера уже из корневой директории:
Верстка функционального макета
Любой компонент с префиксом v- это компонент UI-toolkit’a Vuetify. У этой библиотеки отличная и подробная документация.
Приводим файл frontend/layouts/default.vue к виду:
Создадим компонент нового Todo по пути frontend/components/NewTodoForm.vue :
После проделанной работы рекомендую проверить работоспособность получившегося макета. Запустите dev сервер и перейдите на http://localhost:3000/, там вы должны увидеть следующую картину:
Объединение фронтенда и бэкенда
Настройка CSRF-защиты Django + Apollo
В Django по-умолчанию используется CSRF защита.
Принцип его работы очень прост: у любого POST-запроса к Django в заголовках должен иметься CSRF-токен. Если этот токен отсутствует, то сервер просто отклоняет этот запрос.
CSRF-токен в классическом django приложении приходит вместе с любым GET-запросом, после чего при необходимости добавляется в формы при рендеринге шаблона.
В нашем случае проблема в том, что вне зависимости от того, выполняется в Apollo мутация или запрос, метод их по-умолчанию всегда будет POST. Apollo позволяет изменить это поведение таким образом, чтобы для Query метод запроса был GET, а для Mutation — POST, но насколько я знаю, graphene на данный момент не поддерживает подобный режим работы.
Я поступил следующим образом: немного расширил логику стандартного CsrfViewMiddleware таким образом, чтобы он проверял тип GraphQL запроса, и уже на основе этого принимал или сбрасывал соединение.
Для этого добавим кастомную проверку CSRF, например, в уже знакомый нам файл api.py
Если уважаемый читатель знает более надежные и правильные способы CSRF-защиты в связке Django + Nuxt + Apollo, то призываю поделиться своим знанием в комментариях.
Django CORS Headers
Т.к. dev сервера бэкенда и фронтента у нас стоят на разных портах, то Django нужно оповестить, с каких хостов могут совершаться запросы, и какие заголовки ему разрешено обрабатывать. А поможет нам в этом библиотека django-cors-headers :
В settings.py добавим:
Установка и настройка Apollo
Настройка Apollo дело невсегда тривиальное. Постараемся обойтись минимальной конфигурацией. Создадим файл по указанному выше пути:
На этом этапе лучше еще раз удостовериться, что Nuxt собирается без ошибок, запустив dev сервер.
Оживляем приложение
И вот наконец настало время соединить фронт и бэк.
Для начала где-нибудь создадим файл, в котором будут храниться все запросы и мутации к бэкенду. В моем случае этот файл расположился по пути frontend/graphql.js с уже знакомым нам содержимым:
Теперь нужно немного изменить уже существующий функционал фронтенда. Наконец пришло время добавить туда взаимодействие с бэкендом.
