Недавно я начал личный побочный проект, в котором мне нужно было создать БД и потреблять их данные.
Мне нравится экспериментировать со своими сторонними проектами, поэтому я решил использовать как знакомые, так и новые технологии.
Полный стек будет:
- React.JS и клиент Apollo
- GraphQL [https://graphql.org]
- MongoDB (с использованием бессерверных сервисов Mongo Atlas + MongoDB Realm) [https://realm.mongodb.com]
Я знаком с React, а Mongo и новые части - это GraphQL и вся «бессерверная» штука с Mongo Atlas.
В этой серии постов я постараюсь собрать те вещи, которые были нетривиальными или вызвали у меня некоторую путаницу в процессе.
О чем эта серия?
В следующей серии сообщений я объясню:
- Вставьте один. Получите один или несколько документов, используя params.
- Обновить один и удалить один документ
- Вставьте многие и получите ВСЕ ошибки дублирования. (Пользовательские функции)
- Расширение отправки полезной нагрузки от клиента (пользовательские функции)
- В качестве альтернативы Apollo Client я буду использовать vanilla JS и fetch () для аутентификации, входа в систему и выполнения одного запроса к нашей базе данных.
Не пойдет
Объясните, как создать проект ReactJs.
Объясните, как создать BD в области MongoDB.
Объясните основы GraphQL.
В этом сообщении объясняется, как просто выполнить мутацию (insertOne) и два простых запроса (Get One и Get Many) с помощью параметров.
Изменения произойдут в обоих местах.
- На платформе Realm MongoDB
- В нашем коде ReactJS
Прежде всего, вам нужно определить схему для вашей коллекции, чтобы избежать ошибок для undefined props. Наша коллекция - о спортивных выступлениях.
Вы можете сделать это в своих приложениях Realm.
Ниже приводится (упрощенная) схема нашей коллекции.
{
"title": "performance",
"properties": {
"_id": {
"bsonType": "objectId"
},
"athleteName": {
"bsonType": "string"
},
"competition": {
"bsonType": "string"
},
"date": {
"bsonType": "date"
}
"discipline": {
"bsonType": "string"
},
"id": {
"bsonType": "string"
}
}
}
Создать один документ
После определения схемы вы можете использовать «Документы» справа от «Проводника» GraphQL, чтобы увидеть все доступные запросы и изменения. В проводнике вы можете экспериментировать и создавать запросы и ответы, необходимые для вашего приложения. В нашем случае одна из версий мутации:
Теперь, когда у нас есть готовая мутация, нам нужно сделать вызов из нашего приложения React.
Мы добавляем нашу мутацию в наш файл operations.graphql,
mutation createPerformance($data: PerformanceInsertInput!) {
insertOnePerformance(data: $data) { _id }
}
и выполняем в консоли следующую команду.
$ npm run generate
(Подробнее: Установка | Генератор кода GraphQL)
Приведенная выше команда автоматически создаст правильные типы (в types.ts) и перехватчики (в graphql-operations.ts), которые нам нужны для наших изменений и запросов.
Теперь, когда у нас есть готовые хуки, мы можем вызывать их в наших компонентах.
Получить документы
Большой. Теперь, когда мы можем создавать выступления, мы можем сделать запрос и получить некоторые из них. Здесь у нас есть 2 варианта. Либо извлеките один конкретный документ на основе его свойств, либо выполните вызов «подобного поиска» и извлеките все документы, соответствующие нашим критериям.
В обоих случаях шаги (снова) одинаковы.
- Разбираемся с нашим запросом в MongoDB Explorer.
- Мы копируем запрос в наш файл operations.graphql и выполняем команду $ npm run generate.
- Мы перемещаем логику в наши компоненты точно так же, как в нашем сценарии создания.
Получить один документ
Начиная с первого случая, мы хотим получить определенный документ. Конечно, мы можем сделать это, используя очень конкретный и узкий поиск, но наиболее распространенным сценарием является использование его конкретного _id,, который определяется самой MongoDB и является уникальный.
Будьте осторожны с именами назначенных параметров в нашем примере. В нашем приложении есть 2 разных идентификатора. Id и _id. Первый определяется нашим бизнесом, и вам следует игнорировать его. _Id - единственный. Если вы не знакомы с определением параметров в GraphQL, вы можете проверить их документацию (https://graphql.org).
И теперь, когда у нас есть запрос и сгенерированы хуки (через npm run generate), мы можем использовать его в нашем компоненте. Здесь мы решили пойти по другому пути. Мы использовали ловушку напрямую и деструктурировали {loading} из ответа, чтобы использовать его в нашем методе рендеринга в качестве проверки того, когда ответ был получен. Затем мы обрабатываем onComplete () и onError () обещания, чтобы действовать соответствующим образом.
Получить много документов
Если мы хотим получить больше документов, соответствующих определенным критериям, мы будем использовать почти идентичный запрос.
Как видите, теперь мы используем запрос во множественном числе (производительности) вместо производительности. Это различие также сопровождается некоторыми другими изменениями.
- Мы ожидаем ответа типа [Performance] (массив с характеристиками) вместо одного документа Performance.
- В этом случае у нас есть два дополнительных входных параметра. limit, который ограничивает размер результатов, и sortBy, который позволяет нам сортировать по конкретная опора.
GraphQL Explorer очень полезен при автозаполнении и предлагает вам доступные значения для сортировки, но имейте в виду, что все они у вас есть внутри файла types.ts, который создается автоматически в результате вашей операции.
Использование внутри наших компонентов точно такое же, как и в запросе для отдельного документа.
Заключение
Отправить документ в Mongo DB Atlas относительно просто. Также возможен поиск одиночных или групповых результатов.
В следующем посте я объясню, как обновить или удалить один существующий документ.
Будьте на связи
