Когда-то у нашего коллеги Kenneth возникла идея… идея опробовать GraphQL на хакатоне, и так родился Whats’Optis. Whats’Optis — это имя, которое мы дали нашему клону WhatsApp. Создание такого приложения — отличная идея для изучения веб-разработки, поскольку вы можете добавить такие функции, как аутентификация, загрузка файлов, обмен сообщениями в реальном времени, сделать его удобным для мобильных устройств и так далее.
Нашей целью было немного больше узнать о GraphQL. Кроме того, мы могли бы повеселиться, работая над проектом вместе, поскольку многие из нас большую часть времени работают над отдельными проектами.
Начиная
Одной из приятных особенностей GraphQL является то, что он требует от вас создания схемы, которая выступает в качестве контракта между вашим интерфейсом и серверной частью, чтобы мы могли разрабатывать обе части приложения одновременно. Итак, первое, что мы сделали, это настроили начальную версию нашей схемы и начали программировать.
Для нашего приложения мы решили написать интерфейс с Apollo, React (включая новые React hooks) и Emotion для наших стилизованных компонентов. На серверной части мы также использовали Apollo в сочетании с Knex.js и Bookshelf.js для связи с нашей базой данных.
Работа с Аполлоном.
Поскольку мы пробовали GraphQL, имело смысл работать со стеком Apollo. Для нашего бэкэнда это позволило нам легко запустить GraphQL API, используя:
Во внешнем интерфейсе мы изначально работали с Apollo Boost. Apollo Boost позволяет легко настроить клиент Apollo, не беспокоясь о кэшировании, ссылках и т. д. Однако, узнав, что мы не можем настроить ссылки, которые будет использовать фреймворк, мы решили вручную создать клиент Apollo.
Чтобы делать запросы с помощью React, мы сначала использовали компоненты <Query> и <Mutation>:
Но поскольку мы собирались использовать хуки React везде, мы также опробовали новые хуки React, предлагаемые бета-версией Apollo:
Работа с Bookshelf.js
На серверной части мы использовали ORM Bookshelf.js вместе с Knex, который абстрагирует специфичные для базы данных данные при запросах и позволяет нам легко расширять нашу схему с помощью миграции базы данных.
Одна из проблем, с которыми мы столкнулись при работе с Bookshelf.js, заключалась в создании ссылок на модели. Мы определяли каждую модель в отдельном файле, но их импорт и использование таким образом не дали желаемых результатов. Вместо этого нам пришлось использовать реестр Bookshelf.js и ссылаться на наши модели с помощью строки.
Результат
Пока нам не удалось завершить проект, мы достигли поставленных целей, так как узнали много нового на этом пути. Итак, если вы когда-нибудь планируете организовать хакатон самостоятельно и вам нужна идея, попробуйте сделать клон WhatsApp!
Наш первоначальный HTML-макет также доступен на Codepen, так что не стесняйтесь проверить и его!
