Мы обсудили один из основных строительных блоков GraphQL, теперь пора объединить знания и создать простое приложение, которое помогает пользователям создавать документы и управлять ими.
Ранее на …
Если вы пропустили предыдущие статьи, вы можете найти их здесь:
Чего мы надеемся достичь:
- Пользователи должны иметь возможность регистрироваться
- Пользователи должны иметь возможность создавать документы, используя свое имя пользователя.
В этой первой части мы сосредоточимся на настройке нашего сервера, создании схемы и преобразователей, а также на тестировании нашего приложения с использованием фиктивных данных.
Мы собираемся использовать JavaScript / Node.js для этого проекта, и я предполагаю, что он у вас уже настроен. Если нет, узнайте, как это сделать, здесь.
А теперь перейдем к делу!
Откройте командную строку, перейдите в папку, в которой вы хотите разместить этот проект, и запустите следующее:
mkdir simple-dms
Затем перейдите в только что созданную папку и инициализируйте проект узла.
cd simple-dms npm init -y
Мы использовали флаг -y
, чтобы упростить задачу, и просто использовали параметры по умолчанию для нашего проекта.
Затем мы установим некоторые необходимые нам зависимости.
npm install --save express body-parser apollo-server-express graphql-tools graphql
Мы собираемся использовать express
сервер для Node.js, apollo-server-express
, который представляет собой «интеграцию Express and Connect с сервером GraphQL» и graphql-tools
, который позволяет нам использовать язык схемы GraphQL для описания нашей схемы как строки языка типа GraphQL. Подробнее об этих пакетах мы продолжим.
Следующая наша задача - настроить нашу схему.
В папке вашего приложения создайте файл схемы по адресу src/schema/index.js
. Здесь мы определим схему нашего приложения следующим образом:
Мы используем makeExecutableSchema
из graphql-tools
для создания полного объекта GraphQLSchema
из строки в нашем определении схемы.
У нас есть основная схема; Затем мы создадим сервер для обслуживания контента нашего приложения с помощью express
.
Создайте файл сервера приложений по адресу src/index.js
и поместите в него следующее:
Запуск node ./src/index.js
в этот момент вызовет ошибку, потому что в настоящее время у нас нет созданных запросов.
В src/schema/index.js
добавьте следующее к определениям типов после типа User
:
const typeDefinitions = ` ... type Query { allDocuments: [Document!]! allUsers: [User!]! } `;
Здесь мы определяем наш запрос, чтобы включить allDocuments
и allUsers
, которые будут содержать массив документов и пользователей соответственно.
Теперь, когда у нас есть определенные запросы, нам нужно указать серверу, как обрабатывать запросы. В GraphQL это называется resolvers
- функции, которые отображаются в отдельные поля GraphQL с их поведением.
Итак, создайте файл преобразователя в src/schema/resolvers.js
и добавьте в него следующее:
Теперь, когда у нас есть преобразователь, давайте добавим его в нашу схему, чтобы наш сервер знал, как обрабатывать уже созданные запросы.
Обновите src/schema/index.js
, чтобы он выглядел так:
const resolvers = require('./resolvers'); ... module.exports = makeExecutableSchema({ typeDefs, resolvers });
Мы собираемся использовать GraphiQL для тестирования нашего приложения и для его настройки, мы по-прежнему будем использовать для этого пакет apollo-server-express
. Чтобы добавить немного контекста, GraphiQL - это графическая интерактивная IDE GraphQL в браузере.
В src/index.js
добавьте следующие строки:
app.use('/graphql', bodyParser.json(), graphqlExpress({ schema })); ... app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' })); ...
Давайте сейчас запустим наше приложение.
Запустите node ./src/index.js
, затем после запуска приложения откройте http://localhost:3200/graphiql
в своем браузере. Вы должны увидеть что-то вроде этого:
Это означает, что наше приложение подключилось к нашей конечной точке graphql, и теперь мы можем запускать наши запросы отсюда.
Вот пример результата запроса:
Попробуйте выполнить указанный выше запрос в своем приложении локально, а также попробуйте другие запросы и посмотрите результаты.
В этой статье мы смогли:
- Создайте схему для пользователей и документов
- Создание преобразователей (с фиктивными данными) для сопоставления функций с отдельными полями
- Создайте сервер для нашего приложения
- Подключите наше приложение к полигону GraphiQL
Вывод
В следующей статье мы улучшим возможности нашего приложения, чтобы:
- Создавайте новых пользователей и документы, используя мутации GraphQL
- Сохраняйте данные на нашем сервере с помощью базы данных mongodb
- Получите данные о наших пользователях и документах из базы данных mongodb
Спасибо, что дожили до конца. Ты обалденный! 👍
Если эта статья была полезной, не стесняйтесь 👏 и поделитесь ею. Есть вопросы или предложения? Напишите их в разделе комментариев, и я обязательно отвечу.