Руководство по созданию нового приложения сверху вниз

Я решил использовать время карантина, чтобы написать статью о создании небольшого, но важного приложения с React, GraphQL, Apollo и MongoDB. Когда я изучал этот стек, мне приходилось читать из нескольких источников, поэтому я постараюсь собрать всю информацию в одном месте.

Прежде чем мы начнем, я бы посоветовал проверить цели GraphQL и Apollo, потому что мы будем использовать их напрямую.

Но почему GraphQL вместо REST?
Хорошо, давайте поговорим немного о GraphQL, потому что это наш главный герой в этой истории.
Итак, GraphQL, созданный в 2012 году Facebook, с открытым исходным кодом в 2015 году. Это язык запросов для вашего API. В отличие от REST, GraphQL использует одну конечную точку, отвечающую за прием запросов. У GraphQL есть несколько преимуществ и недостатков.

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

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

Подождите! Что может быть лучше с GraphQL?
GraphQL возвращает код состояния HTTP 200 для всех своих запросов, независимо от того, был ли этот запрос успешным. Хотя, если запрос был неудачным, JSON будет иметь ключ ошибки с сообщением об ошибке. Иногда становится сложно выполнять обработку ошибок.
Еще одним недостатком GraphQL является локальное кеширование, в отличие от REST, где у нас есть несколько конечных точек, и они могут использовать собственное HTTP-кеширование, чтобы избежать предварительной выборки ресурсов. Но у нас есть кеш Apollo, чтобы помочь здесь.
Вам понравятся производительность и преимущества GraphQL, давайте рассмотрим.

В этом приложении мы построим два раздела: серверный и клиентский.

На стороне сервера мы будем создавать GraphQL API с тремя запросами и одной мутацией GraphQL, который будет взаимодействовать с нашей размещенной базой данных MongoDB для обеспечения устойчивости. На стороне клиента мы будем использовать React и Apollo для взаимодействия с нашим GraphQL API и запросами GraphQL.

Приступим к разработке.

Я создал папку (full-stack-react-apollo-graphql-mongodb) и две дополнительные папки внутри нее (client и server). Давайте сначала создадим серверную часть.

Зайдите в каталог server и запустите:

npm init -y

С этой командой ваш package.json готов. Создайте еще один файл с именем app.js .

Предполагая, что вы уже настроили Node.js и MongoDB (мы используем размещенный MongoDB mlab, но вы можете использовать свой локальный MongoDB) в своей системе, давайте загрузим несколько важных пакетов:

npm install express express-graphql mongoose

И не забудьте установить nodemon в зависимости от разработчика и добавить сценарий запуска в свой package.json:

“scripts”: { 
 “test”: “echo \”Error: no test specified\” && exit 1",
 “start”: “nodemon app.js”
}

Теперь давайте настроим вашу MongoDB. Воспользовался млаб. Вот снимок моей конфигурации:

Откройте app.js (я использую VS Code) и напишите следующий код:

Для строки подключения к MongoDB я использую mlab.

Создайте Model. Эта модель в app.js должна соответствовать вашей структуре MongoDB. В моем случае я создаю простой PersonModel с двумя полями: firstName и lastName.

Для этих полей объекта модели мы должны определить их типы свойств способом GraphQL. Помните импорт, который мы сделали ранее (GraphQLObjectType)? Мы это используем.

На данный момент нет ничего критического - всего несколько сопоставлений. Теперь мы собираемся создать запросы и мутации GraphQL, которые представляют собой не что иное, как схему GraphQL.

Давайте расшифруем запрос GraphQL:

Таким же образом я создал еще два запроса. Запрос people вернет всех людей из таблицы MongoDB, другой вернет человека по идентификатору, а третий вернет человека по его имени:

Пришло время создать мутацию для добавления новой записи в БД:

Наконец, детали порта (где будет работать наше приложение):

Зайдите в терминал и запустите:

npm start

Откройте Chrome и введите http: // localhost: 3001 / person.

Вы увидите интерфейс GraphQL, чтобы поиграть со своими запросами и изменениями.

На левой панели отображается запрос, а на правой - вывод. Используйте кнопку воспроизведения, чтобы запустить то, что вы пишете.

Отлично, давайте попробуем другой запрос, который мы написали: findById.

Третий вы можете попробовать сами.

Теперь давайте проверим нашу мутацию:

Обратите внимание на переменные запроса.

Поздравляю! Мы настроили наш внутренний GraphQL API.

Для разработки на стороне клиента создайте новое приложение React:

npx create-react-app client

Пришло время установить необходимые пакеты:

npm install apollo-boost react-apollo

Откройте свой клиентский проект React и напишите следующий код в свой index.js файл:

Если вы уже знакомы с Context API в React, вы понимаете, что это ApolloProvider делает - просто упаковывает ваши компоненты, как магазин Redux. Теперь все дочерние компоненты могут получить доступ к данным. В моем случае дочерний компонент выглядит странно, но вы можете использовать свой App.js/ts компонент.

По сути, я не помещаю свой родительский компонент между ними (в общем App.js). Я напрямую удаляю свой дочерний компонент GettingGraphQLData.
В приведенном выше коде вы можете видеть, что я создал объект ApolloClient, у которого есть только Uri. Позже ApolloProvider обертывает компоненты приложения.

Давайте посмотрим, что находится внутри этого компонента. Вы можете не поверить, насколько это просто:

Вот результат этого приложения:

Заключение

Напомним, что у нас есть:

  • Разработал GraphQL API, который может запрашивать базу данных и добавлять записи в базу данных.
  • Использовал пакет express-graphql.
  • Использовал Apollo Client для подключения нашего внешнего приложения для взаимодействия с нашим внутренним API.
  • И многое другое.

Вам следует:

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

Вот репо GitHub для справки.

Если это ваш первый раз, я бы посоветовал прочитать статью еще раз через 3-4 дня, а затем практиковаться.

Оставайся внутри и оставайся в безопасности.