Обзор GraphQL: создание API списка дел с React-интерфейсом

Эта статья была рецензирована Panayiotis «pvgr» Velisarakos . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

Представьте, что вы хотите испечь торт, следуя рецепту. Вам понадобится несколько ингредиентов и правильное количество для каждого из них. Что если бы вы могли получить коробку со всеми ингредиентами, необходимыми для вашего рецепта, уже измеренными и взвешенными в соответствии с вашим рецептом? Это наверняка сделает выпекание намного легче. Это то, для чего предназначен GraphQL, если вы представляете интерфейс пользователя как торт.

В этом уроке мы напишем небольшой сервер GraphQL, чтобы отвечать на запросы из приложения Todo List . Вы можете выбрать одно из множества приложений, но так как я сейчас работаю над проектом React, я выберу React в качестве интерфейсной среды. Однако не стесняйтесь выбирать любой другой фреймворк JavaScript, с которым вам удобно.

GraphQL

GraphQL позволяет нам определять запрос, который обеспечивает общий интерфейс между клиентом и сервером для выборки данных и манипуляций. Он имеет дело с языком запросов, который позволяет клиенту описывать необходимые ему данные и их форму, который предназначен для создания клиентских приложений с помощью интуитивно понятного и гибкого синтаксиса .

Это делает получение данных с сервера более эффективным для клиента. Например, представьте, что клиенту ничего не нужно, кроме title и id из реализации GraphQL , тогда он должен сделать что-то вроде этого:

 query Query { todos { id, title } } 

Который производит результирующие данные (в формате JSON):

 { "data": { "todos": [ { "id": 1446412739542, "title": "Read emails" }, { "id": 1446412740883, "title": "Buy orange" }, { "id": 1446412741215, "title": "Fix garbage" } ] } } 

Возможно, в нашей демоверсии еще нет данных. Причина этого в том, что каждый раз, когда мы запускаем сервер, массив в памяти, в котором хранятся данные Todo, становится пустым. Мы увидим, как добавить данные в этот массив в следующих разделах.

Как видно, формат ответа описывается в запросе и определяется клиентом, а не сервером. Как указано в статье под названием «Обзор GraphQL — Начало работы с GraphQL и Node.js» ,

Запросы GraphQL похожи на объекты JSON без свойств. Важно отметить, что GraphQL не зависит от языка , это просто спецификация между клиентом и сервером. Любой клиент должен иметь возможность общаться с любым сервером, если он говорит на общем языке.

Представляем GraphQL.js

GraphQL.js является эталонной реализацией GraphQL для JavaScript и предоставляет две важные возможности:

1. Построение схемы типа.
2. Обслуживание запросов к этой схеме типа.

Необходимо построить схему типа GraphQL, которая сопоставляется с базой кода. В следующем коде мы определяем простую схему. Он имеет один тип и список Todo(s) (где каждый элемент имеет три поля), который разрешается до фиксированного значения. Кроме того, необходимо обработать результат запроса для этой схемы типов.

 var graphql = require ('graphql'); // Here is some dummy data to make this piece of code simpler. // It will be changeable after introducing mutation. var TODOs = [ { "id": 1446412739542, "title": "Read emails", "completed": false }, { "id": 1446412740883, "title": "Buy orange", "completed": true } ]; var TodoType = new graphql.GraphQLObjectType({ name: 'todo', fields: function () { return { id: { type: graphql.GraphQLInt }, title: { type: graphql.GraphQLString }, completed: { type: graphql.GraphQLBoolean } } } }); var queryType = new graphql.GraphQLObjectType({ name: 'Query', fields: function () { return { todos: { type: new graphql.GraphQLList(TodoType), resolve: function () { return TODOs; } } } } }); module.exports = new graphql.GraphQLSchema({ query: queryType }); 

Давайте теперь посмотрим на код файла JavaScript, который дает нам данные результата в JSON:

 var graphql = require ('graphql').graphql var express = require('express') var graphQLHTTP = require('express-graphql') var Schema = require('./schema') var query = 'query { todos { id, title, completed } }' graphql(Schema, query).then( function(result) { console.log(JSON.stringify(result)); // Prints // { // "data":{ // "todos":[ // { // "id":1446412739542, // "title":"Read emails", // "completed":false // }, // { // "id":1446412740883, // "title":"Buy orange", // "completed":true // } // ] // } // } }); var app = express() .use('/', graphQLHTTP({ schema: Schema, pretty: true })) .listen(8080, function (err) { console.log('GraphQL Server is now running on localhost:8080'); }); 

Тот же результат, который дает приведенный выше код, можно получить, запустив следующий код. cURL не обязателен для получения дополнительных преимуществ в этом примере. Это просто более простой способ извлечения данных без использования нашего примера в браузере. Обратите внимание, что если вы пользователь Windows, вы можете использовать командную строку Windows для запуска примеров cURL . Более того, здесь вы можете найти хороший ресурс, чтобы узнать, как установить cURL в вашей системе .

 $ curl -XPOST -H "Content-Type:application/graphql" -d 'query { todos { title } }' http://localhost:8080 { "data": { "todos": [ { "title": "Read emails" }, { "title": "Buy orange" } ] } } 

Важной особенностью схемы является то, что она не делает никаких предположений о том, как хранятся данные, поскольку она описывает только то, что может использовать потребитель API. Способ хранения и представления данных — это деталь реализации.

 var Application = React.createClass({ render: function() { return 

       {this.props.text}
       {this.props.id}
    
  ;
   }
 }); 

 "use strict"; var Application = React.createClass({ displayName: "Application", render: function render() { return React.createElement( "div", null, this.props.text, this.props.id ); } }); 

 $ git clone https://github.com/sitepoint-editors/todo-graphql-server.git $ cd todo-graphql-server $ npm install $ npm start 

 $ curl -XPOST -H "Content-Type:application/graphql" -d 'query { todos { title } }' http://localhost:8080 { "data": { "todos": [] } } 

 var MutationAdd = { type: new GraphQLList(TodoType), description: 'Add a Todo', args: { title: { name: 'Todo title', type: new GraphQLNonNull(GraphQLString) } }, resolve: (root, {title}) => { TODOs.push({ id: (new Date()).getTime(), title: title, completed: false }); return TODOs; } }; var MutationType = new GraphQLObjectType({ name: 'Mutation', fields: { add: MutationAdd } }); export var Schema = new GraphQLSchema({ query: QueryType, mutation: MutationType }); 

 { first: changeTheNumber(newNumber: 1) { theNumber }, second: changeTheNumber(newNumber: 3) { theNumber }, third: changeTheNumber(newNumber: 2) { theNumber } } 

 $ curl -XPOST -H "Content-Type:application/graphql" -d 'mutation { add (title: "Clean garage") { id, title } }' http://localhost:8080 { "data": { "add": [ { "id": 1446443172937, "title": "Clean garage" } ] } } 

 $ git clone -b react-graphql https://github.com/sitepoint-editors/todomvc.git $ cd todomvc $ npm install $ node server.js