Мы рады сообщить, что теперь вы можете взаимодействовать со своими документами MongoDB, используя стандарт GraphQL в своих приложениях JavaScript, используя интеграцию Stitch в своем кластере MongoDB Atlas!
Итак, что это значит, почему это важно, и как именно вы это делаете?
Что такое GraphQL?
Если вы никогда не слышали о GraphQL раньше, вы можете думать о нем как о языке запросов для API. Вместо того, чтобы делать простые HTTP-запросы к конечной точке API и получать полную полезную нагрузку этого ресурса в качестве ответа, вы можете использовать GraphQL для запроса только тех полей, которые вам нужны, аналогично проекции MongoDB или запросу SQL.
Указывая поля, которые вы хотите вернуть, вы теперь уменьшаете размер полезной нагрузки ответа, повышаете производительность вашего приложения и пишете более чистый код.
Почему GraphQL в MongoDB выгоден?
До настоящего времени для возможности использования GraphQL в ваших приложениях требовался выделенный веб-сервис, который содержал информацию о схеме, выполнял функции с логикой базы данных и другой логикой промежуточного программного обеспечения, чтобы находиться между базой данных и клиентским приложением.
Создание бэкэнда GraphQL, хотя и не является невероятно сложной задачей, требует времени, требует обслуживания и сопряжено с определенными сборами, связанными с хостингом.
Устранение необходимости в бэкэнде GraphQL за счет использования Stitch для аутентификации, а также запросов и мутаций GraphQL — огромный выигрыш для MongoDB и разработчиков на платформе.
Вам также может понравиться:
Создать API GraphQL с Node, Mongoose и Express .
Взаимодействие с документами MongoDB через панель инструментов Stitch
Чтобы использовать GraphQL для запроса и изменения документов непосредственно на платформе MongoDB, необходимо выполнить несколько конфигураций.
Следующее даст вам представление о том, что должно быть сделано:
- В вашем кластере MongoDB Atlas должна быть создана база данных и хотя бы одна коллекция.
- Приложение MongoDB Stitch должно быть создано и связано с кластером.
- Правила пользователя должны быть определены для базы данных и коллекции в Stitch.
- Схема стежка должна быть определена.
Выполнение каждого из указанных выше шагов занимает не более нескольких минут. Я собираюсь сломать это для вас, чтобы сделать это легко.
Создайте кластер MongoDB Atlas с базой данных и коллекцией
Первое, что мы хотим сделать, это убедиться, что у нас есть кластер, созданный и настроенный в MongoDB Atlas . Если вы впервые знакомитесь с Atlas, это облачная версия MongoDB, и она содержит вечно бесплатный уровень «M0», чтобы вы могли начать работу.
Хотите, чтобы на ваш счет в MongoDB Atlas были добавлены премиальные кредиты? Используйте промо-код NICRABOY200, чтобы получить кредиты на создание более мощного кластера.
В Атласе нажмите кнопку КОЛЛЕКЦИИ на нужном кластере.
Для начала мы собираемся создать единую базу данных и коллекцию для использования со Stitch. Если он еще не существует, выберите « Добавить мои данные» при появлении запроса.
Выбрав создание новой базы данных и коллекции, вы попадете в раздел проводника данных и схем на панели мониторинга MongoDB Atlas. Если вы начинаете с новой базы данных и схемы, у вас не будет никаких данных на данный момент.
На данный момент MongoDB Atlas настроен достаточно, чтобы перейти к следующему шагу, который включает создание приложения Stitch и связывание его с базой данных и коллекцией.
Настройка MongoDB Stitch для интеграции с кластером Atlas
Чтобы подключить ваш кластер к Stitch, вам нужно создать приложение. Это не приложение в том смысле, как веб-приложение или мобильное приложение, а скорее в том смысле, что вы создаете что-то в Stitch для использования с приложением.
Почти в любом месте в пределах приборной панели MongoDB Atlas, нажмите стежок в Услуги секции навигации.
После перехода к сервису Stitch вам будет предложено создать новое приложение, если оно еще не существует. Здесь вы будете определять такую информацию, как имя приложения, рассматриваемый кластер и любую другую информацию о развертывании.
После создания вы попадете на панель инструментов Stitch для вашего конкретного приложения. Когда вы разрабатываете свое приложение вне Stitch, вам, вероятно, понадобится некоторая форма аутентификации, чтобы люди могли получить доступ только к тем документам, которыми они владеют.
Чтобы обеспечить максимально простую аутентификацию, выберите «Включить анонимную аутентификацию» , как это будет использовано для примера в этом руководстве.
Определение пользовательских правил для доступа к данным в Stitch
С приложением Stitch, подключенным к кластеру MongoDB Atlas, мы должны определить правила доступа для наших пользователей.
На панели навигации выберите « Правила» и выберите коллекцию, которую мы хотим настроить. В моем примере я использую демо в качестве базы данных и задачи в качестве коллекции.
Вы хотите выбрать шаблон разрешений для коллекции. В нашем примере мы хотим, чтобы пользователи могли только читать свои собственные данные. Для этого шаблона нам нужно определить, какое поле в наших документах MongoDB будет содержать идентификатор пользователя. Фактический идентификатор пользователя создается после аутентификации пользователя, но для этого примера owner_id будет представлять его.
Создание схемы в MongoDB Stitch
Чтобы Stitch автоматически генерировал возможные запросы и мутации, он должен понимать, как можно моделировать документы. Для этого необходимо определить схему в разделе « Правила » на панели инструментов Stitch.
Вот пример возможной схемы для конкретной коллекции:
JSON
1
{
2
"properties": {
3
"_id": { "bsonType": "objectId" },
4
"name": { "bsonType": "string" },
5
"description": { "bsonType": "string" },
6
"tags": {
7
"bsonType": "array",
8
"uniqueItems": true,
9
"items": {
10
"bsonType": "string"
11
}
12
},
13
"owner_id": { "bsonType": "string" },
14
"createdAt": { "bsonType": "date" }
15
}
16
}
Хотя это немного более экстравагантно, чем нам нужно, я просто хотел показать, что вы можете иметь сложность в своей схеме с помощью приведенного выше примера.
Когда вы определили свою схему, убедитесь, что вы нажимаете кнопку СОХРАНИТЬ .
Не забудьте также просмотреть и внедрить внесенные вами изменения, чтобы они были доступны и готовы к работе.
Взаимодействие с GraphQL с помощью интегрированного интерфейса GraphiQL
С кластером, связанным с приложением Stitch и имеющим информацию о правилах и схемах, мы можем перейти к части GraphQL.
На панели инструментов Stitch выберите вкладку Веб-доступ из навигации.
При определении того, как вы хотите иметь доступ к приложению через Интернет, убедитесь, что вы выбрали « Начать работу с GraphQL».
Если вы когда-нибудь баловались с GraphQL, интерфейс, который предлагает Stitch, может показаться вам знакомым. Он использует GraphiQL как способ взаимодействия и изучения коллекции с помощью запросов и мутаций GraphQL.
Чтобы получить представление о доступных запросах и мутациях, взгляните на Document Explorer в GraphiQL. Если вы нажмете на Query or Mutation , вы получите список того, что доступно для конкретного приложения. Это основано на том, что вы ввели в определение схемы для Stitch.
На данный момент у вас есть полностью работоспособная конечная точка GraphQL.
Создание простого приложения JavaScript с поддержкой GraphQL
Взаимодействие с документами MongoDB через GraphQL и панель мониторинга Stitch — это прекрасно, но в большинстве случаев вам захочется делать это из собственных веб-приложений или мобильных приложений.
Stitch SDK, наряду с обычными пакетами и средами JavaScript, упрощает этот процесс. Мы собираемся создать очень простое приложение, чтобы вы начали работать в правильном направлении.
Для этого примера мы будем использовать следующее:
- MongoDB Stitch SDK 4.6.0+
- Вардар
Stitch SDK позволит нам взаимодействовать со специфическими функциями Stitch, такими как аутентификация, в то время как Axios предоставит нам простой набор команд для отправки HTTP-запросов к конечной точке GraphQL, которую мы настроили для нашей коллекции. Axios не является обязательным требованием, но это мое личное предпочтение при выполнении HTTP-запросов с JavaScript.
Создайте файл index.html на своем компьютере со следующим стандартным кодом:
HTML
xxxxxxxxxx
1
<html>
2
<head></head>
3
<body>
4
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
5
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js"></script>
6
<script>
7
// Logic here...
8
</script>
9
</body>
10
</html>
Мысленный процесс, стоящий за этим очень простым приложением, выглядит следующим образом:
- Настройте соединение Stitch с приложением JavaScript.
- Анонимная аутентификация пользователей.
- Создайте новый документ с помощью мутации GraphQL.
- Найти документы через запрос GraphQL.
Чтобы разобраться с этим, давайте начнем добавлять логику к приложению в <script>теге.
В <script>тег добавьте следующее:
JavaScript
xxxxxxxxxx
1
const client = stitch.Stitch.initializeDefaultAppClient("example-auuce");
initializeDefaultAppClientБудет принимать идентификатор приложения для вашего приложения стежка , чтобы создать клиент.
Следующий шаг — аутентификация. Это асинхронное событие, поэтому вы должны либо использовать обещания, либо более современный подход асинхронного ожидания. Возьмем, к примеру, следующее:
JavaScript
xxxxxxxxxx
1
(async () => {
2
try {
3
const user = await client.auth.loginWithCredential(new stitch.AnonymousCredential());
4
console.info(user);
5
// GraphQL Logic Here...
6
} catch (error) {
7
console.error(error);
8
}
9
})();
Приведенный выше фрагмент попытается выполнить анонимную аутентификацию. В случае успеха информация о пользователе будет распечатана на консоли. В этом ответе важен идентификатор, который является идентификатором владельца наших документов и токена доступа, который мы отправляем вместе с будущими запросами, чтобы доказать, что мы являемся тем, кем мы являемся.
На данный момент у нас есть информация о нашем владельце, и мы хотим создавать новые документы, используя мутацию GraphQL. Мы можем сделать что-то вроде следующего:
JavaScript
xxxxxxxxxx
1
(async () => {
2
try {
3
const user = await client.auth.loginWithCredential(new stitch.AnonymousCredential());
4
console.info(user);
5
const task = {
7
"name": "Test Name",
8
"description": "Test Description",
9
"owner_id": user.id
10
}
11
const resp = await axios({
13
url: 'https://stitch.mongodb.com/api/client/v2.0/app/example-auuce/graphql',
14
method: 'post',
15
headers: {
16
'Authorization': `Bearer ${user.auth.activeUserAuthInfo.accessToken}`
17
},
18
data: {
19
query: `
20
mutation($data:TasksInsertInput!){
21
insertOneTasks(data:$data){
22
_id,
23
description,
24
name
25
}
26
}
27
`,
28
variables: {
29
data: task
30
}
31
}
32
});
33
console.log(resp);
34
} catch (error) {
35
console.error(error);
36
}
37
})();
В приведенном выше примере мы создаем taskобъект, смоделированный так же, как наша схема Stitch, за исключением нескольких полей. owner_idВытягивается из ответа на анонимной проверки подлинности.
Чтобы сделать запрос GraphQL из JavaScript, есть много способов сделать это, но, как я уже говорил, Axios - мой личный фаворит. Чтобы сделать запрос, вам понадобится конечная точка из панели инструментов Stitch. Вы хотите получить его со страницы, где мы поиграли с GraphiQL.
Токен авторизации может быть получен из успешной попытки аутентификации. Полезная нагрузка запроса - это мутация GraphQL и соответствующие переменные, которые должны быть переданы из приложения. В этом случае переменная является той, taskкоторая была создана ранее.
Поскольку insertOneTasksсписки мутации _id, descriptionи nameэто данные , которые будут возвращены , и печатные , когда запрос успешно.
Вы можете посмотреть, действительно ли эти данные существуют в Atlas, взглянув на обозреватель данных для коллекции. Мы также можем попробовать запустить другой запрос GraphQL:
JavaScript
xxxxxxxxxx
1
(async () => {
2
try {
3
const user = await client.auth.loginWithCredential(new stitch.AnonymousCredential());
4
console.info(user);
5
const resp = await axios({
6
url: 'https://stitch.mongodb.com/api/client/v2.0/app/example-auuce/graphql',
7
method: 'post',
8
headers: {
9
'Authorization': `Bearer ${user.auth.activeUserAuthInfo.accessToken}`
10
},
11
data: {
12
query: `
13
{
14
taskss{
15
name,
16
description
17
}
18
}
19
`
20
}
21
});
22
console.log(resp);
23
} catch (error) {
24
console.error(error);
25
}
26
})();
Запрос более или менее одинаков, только на этот раз другой запрос GraphQL.
Дополнительные примеры и помощь с MongoDB и GraphQL
Чтобы получить больше практического опыта использования GraphQL с MongoDB с использованием Stitch, есть еще несколько проектов, на которые вы можете обратить внимание, чтобы дать вам толчок в правильном направлении.
Хотя оба приведенных выше примера используют React, популярную среду веб-разработки, они демонстрируют взаимодействие с GraphQL с использованием различных клиентских пакетов.
Заключение
GraphQL, интегрированный в MongoDB Stitch, очень важен, так как GraphQL является широко распространенным языком запросов для API. Отсутствие необходимости создавать пользовательскую внутреннюю реализацию GraphQL может сэкономить вашим командам разработчиков много времени и ресурсов.