Николай Ланец
22 авг. 2021 г., 18:35

Обновление проекта freecode.academy

Всем привет!

Давно не было никаких новостей, но это не значит, что ничего не делалось:) На самом деле сайт уже неделю как обновлен, а про грядущее обновление я писал 11 дней назад в одном из комментариев. И хотя наверняка мало кто заметил какие-либо изменения в работе сайта, архитектурно проект сильно изменился, а именно: полностью переписан бэк сайта. То есть, как я и писал в комментарии, до этого момента фронт сайта работал сам по себе, взаимодействуя со старым АПИ-сервером посредство Ajax-запросов, но все-таки никак не был связан с ним. То есть если вы до этого скачивали и разворачивали у себя локально проект из гитхаба, то вам надо было или отдельно запускать старый бэк, или указывать в качестве АПИ-сервера наш боевой. Сейчас же проект в себе содержит и фронт, и бэк, то есть по сути это проект под ключ. Если у вас локально установлены MySQL и node-js, вы можете запустить этот проект у себя локально без установки чего-либо дополнительно.

Вообще, те, кто давно здесь зарегистрирован и боле менее следит за новостями, помнят, что здесь на сайте полное обновление технологий происходило совсем не один раз. Так вот, в этот раз процесс обновления прошел в самом приятном режиме. Дело в том, что в прошлом году я переписал фронт на новые технологии, где главное нововведение было - использование TypeScript. Тогда я еще написал статью Как переписать 400 000 строк кода и почти ничего не сломать. И хотя бОльшая часть этого кода - сгенерированная, все же это используемый проектом код и возвникновение ошибок где-либо может повлиять на работу всего проекта. Напомню, что это всего-лишь фронт, здесь еще не было бэка:)

В этот же раз задача стояла в том, чтобы написать новый бэк с нуля. Так в чем же заключается приятность? А заключается она в том, что фронт-то у нас уже на новых технологиях и весь в типизации. То есть в прошлый раз не было типизации нигде (ни на фронте, ни на бэке). Мне пришлось фронт перелопатить полностью, прописывая типы и т.п., то есть пришлось полностью вникать в весь код проекта вообще. Главный же механизм проверки соответствия фронта бэку заключался в том, что скриптом вытягивалась схема из GraphQL-сервера, код-генератором генерились все АПИ-типы для фронта и TypeScript проверял все связи. И вот сейчас, когда встала задача написать бэк с нуля, у нас уже есть фронт, в котором типизация прописана. То есть логично, что переключив фронт на новую схему, я получил кучу ошибок.


Для начала, кодеген просто не мог сгенерировать типы, потому что во фронтовых GraphQL-запросах было прописано то, чего АПИ-сервер нам не давал. К примеру, вот здесь кодеген говорит, кто в объекте Query нет такого поля как usersConnection. Поэтому у нас папка src/modules/gql/generated была практически пустая, а из нее практически все фронтовые запросы берутся.


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

После того, как с АПИ-схемой разобрались, можно было уже перейти и к возникшим ошибкам внутри самих компонентов.


Эти ошибки возникли из-за того, что нельзя было в полной мере воссоздать идентичное АПИ, потому что в нашем старом АПИ использователась первая призма, а здесь используется уже вторая, и у них АПИ с сгенерированный код отличаются. То есть на этом уровне уже не АПИ надо править, а сами компоненты.

А когда все ошибки типизации были исправлены, оставалось только дописать рабочие резолверы, чтобы работать с реальными данными. И хотя я не все еще резолверы написал (и где-то вы можете получить ошибку "Not implemented", что будет сообщать о том, что данный запрос не реализован еще), все-таки весь самый важный функционал я реализовал.

Может все это и выглядит очень сумбурно и страшно, все-таки как по мне, вот в таком формате гораздо проще работать: то есть когда есть средства, проверяющие простую техническую часть вашего кода.

Ну а бонусом будет то, что теперь различные фишки будут внедряться гораздо активней, и будет больше простых задач по этому проекту, с которыми можно будет попрактиковаться обучающимся программистам:)