Мы обсудили один из основных строительных блоков 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

Спасибо, что дожили до конца. Ты обалденный! 👍

Если эта статья была полезной, не стесняйтесь 👏 и поделитесь ею. Есть вопросы или предложения? Напишите их в разделе комментариев, и я обязательно отвечу.