ZarahioN Presents

Answering why

Express

GraphQL + Apollo + Express = ? [Pt. 1 — Installation adventure]

Заглянув таки пару минут назад на страницу с установкой аполло, я слегка ужаснулся..
тому, насколько давно я с ним не сталкивался.

Я как-то работал на проекте, у которого уже был базовый функционал и работал граф(кюэль? я продолжу называть GraphQL — граф а GraphiQL — графи, так проще, не спрашивай). Это был недолгий опыт, но именно тогда я по-настоящему влюбился в граф (и аполло) и все ждал возможности поиграть с ними еще немного.

Такая возможность наконец пришла и я оказался на удивление смел и решил создать пустенький проект самостоятельно, вместо привычного поиска готового шаблона.
(Спойлер: это оказалось приятной ошибкой и теперь я пишу эту запись, чтобы не повторять ее)

Конечно же я помнил все необходимые библиотеки (express, apollo-server, duh) и быстро установив их задумался, «А как его вообще подключать?». По дороге я вспомнил, что мне слишком лень настраивать еще и клиента и будет неплохо подумать над будущей моделью имея интерактив графи без необходимости начинать корячить само приложение. Оказавшись в тупике я ушел в гугл и быстро вернулся со страничкой гитхаба, где было описано, как подключить графи (с самим аполло я же влегкую справлюсь, да?)

Первая проблема бросилась в глаза быстро — аполло ставится под конкретный фреймворк (surprise!) а чистый apollo-server скорее всего предназначен для чистого Node.js сервера либо кастомной настройки. Откатываем установку apollo-server, ставим apollo-server-express…

И вспоминаем что синтаксис запуска экспресса я с коленки тоже не помню… Ладно, гугл, сайт экспресса, ctrl+c, ctrl+v.

Так, экспресс поставили, графи подключили, кажется все?

Нет.. нужно запустить сам граф, чтобы было что проверять (surprise! x2). Процесс знаешь? Не угадал, страница гитхаба про аполло и графи лежит в репо самого аполло и.. прямо на главной странице для самых умелых они разместили полный шаблон для старта экспресс-сервера с аполло, графи и граф-ом (оригинал можно найти по ссылке). Моя полноценная копия:

[cc lang=»javascript»]
import express from ‘express’;
import bodyParser from ‘body-parser’;
import { graphqlExpress, graphiqlExpress } from ‘apollo-server-express’;

const app = express();

app.get(‘/’, (req, res) => res.send(‘Bye-bye World!’))

app.use(‘/graphql’, bodyParser.json(), graphqlExpress({ schema: myGraphQLSchema }));
app.get(‘/graphiql’, graphiqlExpress({ endpointURL: ‘/graphql’ }));

const port = 81;
app.listen(port, () => console.log(‘Example app listening on port ‘ + port))
[/cc]

yarn start — and fail.
Мораль сей басни? Мы (я) забыли схему, точнее просто отвлеклись на погоню за облаками.

Импортируем будущую схему и собираем ее через небольшую утилиту (или пишем ручками, кому как нравится):

[cc lang=»javascript»]
@index.js
..
import myGraphQLSchema from ‘./schema’;

@schema.js
import { makeExecutableSchema } from ‘graphql-tools’;

import typeDefs from ‘./types’;
import resolvers from ‘./resolvers’;

const schema = makeExecutableSchema({
typeDefs,
resolvers,
});

export default schema;

@types.js
const Recipe = `
type Recipe {
id: Int!
message: String
author: String
}
`;

const Query = `
type Query {
recipies: [Recipe]
}
`

export default [Query, Recipe];

@resolvers.js
export default {
Query: {
recipies: () => [’empty’,’empty’,’empty’,]
}
}

[/cc]

Все? Все, не учитывая ленивый и пустой обработчик (resolver), но это на будущее.

Что мы сегодня узнали? Дети, используйте готовые шаблоны или придется писать технически бесполезные блог-посты. Ситуация не так уж и пичальна, впрочем — экспресс запущен, аполло «настроен» и все практически работает.

Ссылки на документацию для самых интересующихся (и тех, кто использует koa, hapi, restify, lambda, micro, azure-functions, adonis и хочет особенного отношения):
Apollo main doc
Apollo GraphiQL
How to Apollo GraphQL Schema
Express blank (Bye World) app