|
@@ -2,7 +2,8 @@ GraphQL
|
|
|
==========
|
|
|
|
|
|
**[GraphQL](https://graphql.org/)** - слой приложения, который обеспечивает
|
|
|
-удобный язык запросов к бэку.
|
|
|
+удобный язык запросов к бэку. Является альтернативой для **REST**, **JSON-RPC**
|
|
|
+и прочих протоколов общения.
|
|
|
|
|
|
**GraphQL** используется:
|
|
|
- На **backend** для того, что бы запустить тот или иной код для сбора данных.
|
|
@@ -17,20 +18,22 @@ GraphQL
|
|
|
GraphQL minimal
|
|
|
----
|
|
|
|
|
|
-### Устанавка
|
|
|
+### Backend
|
|
|
+
|
|
|
+#### Установка
|
|
|
|
|
|
```bash
|
|
|
npm install --save express-graphql graphql`
|
|
|
```
|
|
|
|
|
|
-### Подключение
|
|
|
+#### Подключение
|
|
|
|
|
|
```javascript
|
|
|
const express_graphql = require('express-graphql');
|
|
|
const { buildSchema } = require('graphql');
|
|
|
```
|
|
|
|
|
|
-### Схема.
|
|
|
+#### Схема.
|
|
|
|
|
|
По аналогии с **Sequelize** и **Mongoose** вы указываете **схему** - структуру
|
|
|
ваших данных. Если в **ORM** и **ODM** это делается с помощью ассоциативных
|
|
@@ -79,14 +82,17 @@ var schema = buildSchema(`
|
|
|
- `createPost`
|
|
|
- `createComment`
|
|
|
- `type Post` описывает структуру поста, она во многом повторяет схему для **ORM**/**ODM**
|
|
|
- - `type Comment` описывает структуру поста, она во многом повторяет схему для **ORM**/**ODM**
|
|
|
+ - `type Comment` описывает структуру комментария.
|
|
|
+
|
|
|
+
|
|
|
|
|
|
-#### Типы данных
|
|
|
+
|
|
|
+##### Типы данных
|
|
|
|
|
|
С примитивами все достаточно грустно, `String` и `Int`. Массивы декларируются c помощью
|
|
|
`[]`
|
|
|
|
|
|
-### Резолверы
|
|
|
+#### Резолверы
|
|
|
|
|
|
**Резолверами** в **GraphQL** называют функции, которые запускаются движком **GraphQL**
|
|
|
для реализации тех или иных запросов или мутаций в реальной **CУБД**.
|
|
@@ -103,7 +109,7 @@ async function getPosts({id}){
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-### Подключение **express-graphql** **middleware**
|
|
|
+#### Подключение **express-graphql** **middleware**
|
|
|
|
|
|
При наличии схемы и резолверов остается отдать их в использование **GraphQL**
|
|
|
и подключить **GraphQL** к **express** для обработки входящих запросов:
|
|
@@ -132,36 +138,42 @@ app.use('/graphql', express_graphql({
|
|
|
```
|
|
|
|
|
|
В примере выше:
|
|
|
- - `root` является корневым резолвером и отвечает за связь названий запросов и мутаций из схемы с резолверами
|
|
|
- - `app.use` используется для подключения GraphQL к express:
|
|
|
- - `schema` указывает на схему
|
|
|
- - `rootValue` - корневой резолвер
|
|
|
- - `graphiql` - ключ, который включает отладочный интерфейс GraphQL. он будет доступен по адресу /graphiql вашего бэка
|
|
|
-
|
|
|
+ - `root` является _корневым резолвером_ и отвечает за связь
|
|
|
+ названий запросов и мутаций из схемы с **резолверами**
|
|
|
+ - `app.use` используется для подключения **GraphQL** к **express**:
|
|
|
+ - `schema` указывает на схему
|
|
|
+ - `rootValue` - корневой резолвер
|
|
|
+ - `graphiql` - ключ, который включает отладочный интерфейс **GraphQL**.
|
|
|
+ он будет доступен по адресу `/graphiql` вашего **бэка**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Frontend
|
|
|
-Есть разные степени завязки **фронтэнда** на **GraphQL**, однако в простейшем случае достаточно небольшой библиотеки для взаимодействия с **бэкэндом**
|
|
|
+
|
|
|
+Есть разные степени завязки **фронтэнда** на **GraphQL**, однако в простейшем случае
|
|
|
+достаточно небольшой библиотеки для взаимодействия с **бэкэндом**
|
|
|
|
|
|
#### Установка
|
|
|
|
|
|
```bash
|
|
|
-npm install --save graphql graphql-express
|
|
|
+npm install --save graphql-request
|
|
|
```
|
|
|
-
|
|
|
+
|
|
|
#### Подключение
|
|
|
+
|
|
|
```javascript
|
|
|
import { GraphQLClient } from 'graphql-request'
|
|
|
|
|
|
-const gql = new GraphQLClient("http://localhost:4000/graphql", { headers: {} })
|
|
|
+const gql = new GraphQLClient("http://localhost:4000/graphql", { headers: {} })
|
|
|
```
|
|
|
|
|
|
-
|
|
|
-Адрес должен соответствовать конфигурации **бэкэнда** - убедитесь что ваш **express** висит на нужном порту (4000 в примере) и что первый параметр в `app.use` (**endpoint**) верен.
|
|
|
-#### Запрос на бэкэнд
|
|
|
+Адрес должен соответствовать конфигурации **бэкэнда** - убедитесь что
|
|
|
+ваш **express** висит на нужном порту (4000 в примере) и что первый параметр
|
|
|
+в `app.use` (endpoint) верен.
|
|
|
+
|
|
|
+#### Запрос на **бэкэнд**
|
|
|
|
|
|
```javascript
|
|
|
gql.request(`query getPost($postID: String!){
|
|
@@ -172,16 +184,23 @@ gql.request(`query getPost($postID: String!){
|
|
|
tagz
|
|
|
}
|
|
|
}`, {postID: this.props.match.params.id})
|
|
|
- .then(data => store.dispatch({type: "DATA", data}))
|
|
|
+ .then(data => store.dispatch({type: "DATA", data}))
|
|
|
```
|
|
|
-
|
|
|
-Таким образом вы можете указывать, какие поля вам нужны или нет в результирующем запросе.
|
|
|
+
|
|
|
+Таким образом вы можете указывать, какие поля вам нужны или нет в результирующем
|
|
|
+запросе.
|
|
|
+
|
|
|
### Отладка
|
|
|
#### Backend
|
|
|
-`console.log` в резолвере позволит вам увидеть параметры запроса, сам факт запуска резолвера и, возможно, результат
|
|
|
+
|
|
|
+`console.log` в резолвере позволит вам увидеть параметры запроса, сам факт
|
|
|
+запуска резолвера и, возможно, результат
|
|
|
+
|
|
|
#### Frontend
|
|
|
-Текст запроса проще всего отладить в **GraphIQL** - тестовой консоли разработчика (доступна по ссылке `/graphiql` на вашем бэке). Потом копипастите его в код и далее **Developer Tools** и/или `console.log` в помощь.
|
|
|
|
|
|
-## Почитать
|
|
|
-- [статья на хабре](https://habr.com/post/326986/)
|
|
|
+Текст запроса проще всего отладить в **GraphIQL** - тестовой консоли разработчика.
|
|
|
+Потом копипастите его в код и далее **Developer Tools** и/или `console.log`
|
|
|
+в помощь.
|
|
|
|
|
|
+## Почитать
|
|
|
+- [статья на хабре](https://habr.com/post/326986/)
|