瀏覽代碼

graphql alpha

Ivan Asmer 6 年之前
父節點
當前提交
66230b71ac
共有 1 個文件被更改,包括 47 次插入28 次删除
  1. 47 28
      graphql.md

+ 47 - 28
graphql.md

@@ -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/)