Ваш стартовый комплект GraphQL

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

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

В этом очень простом мини-учебнике я буду использовать javascript, но также поддерживаются все основные языки программирования.

Что нам нужно для запуска запроса graphql? Давайте выясним это с помощью этого очень простого запроса с одним единственным полем:

{
  ping
}

Ответ также будет одним полем:

{
  "data": {
    "ping": "pong"
  }
}

Первое, что нам нужно сделать, это настроить веб-сервер, здесь я буду использовать экспресс фреймворк.

Чтобы сервер мог обрабатывать запросы graphql, нам нужно определить типы, преобразователи и, конечно же, установить некоторые библиотеки graphql.

1. Определения типов

Каждое поле в ваших запросах должно соответствовать полю в определениях типов. Объект Тип запроса содержит все поля верхнего уровня, это «корневой» объект, который мы должны определить первым.

const typeDefs = gql`
type Query {
  ping:String
}
`;

Теперь Graphql знает, что запрос «ping» должен возвращать строку, следующим шагом является определение значения этой строки с помощью преобразователя.

2. Резолверы

Преобразователь — это функция, которая возвращает значение, которое будет присвоено определенному полю:

const resolvers = {
  Query: {
    ping: () => 'pong'
  }
};

Функция разрешения может принимать до 4 параметров, но в нашем простом примере они не нужны, поэтому мы просто используем стрелочную функцию.

3. Графический сервер

Нам нужно установить пакеты npm apollo-server-express вместе с graphql.

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const gpserver = new ApolloServer({ typeDefs, resolvers });
await gpserver.start();

const app = express();
gpserver.applyMiddleware({ app });

await new Promise(resolve => app.listen({ port: 4000 }, resolve));
console.log(`🚀 Server ready at http://localhost:4000${gpserver.graphqlPath}`);

После запуска сервера вы можете использовать инструмент studio.apollographql.com, чтобы начать отправлять запросы.

Объекты и скаляры

Скаляры — это данные с одним полем: String, Boolean, ID, Int и Float.

const typeDefs = gql`

  type ShoppingBag {
    shop: String
    items:[ShopItem]
  }
  type ShopItem {
    name: String
    price: Float
  }
  type Query {
    ping: String
    receipt: ShoppingBag
  }
`;

const resolvers = {

  Query: {
    ping: () => 'pong',
    receipt: () => {
      return { shop:"Wallmart" };
    }
  },

  ShoppingBag: {
    shop(obj){
      return obj.shop;
    },
    items(obj){
      return [ { name:"Water", price:20.5 },
               { name:"Milk", price:30.5 } ] ;
    }
  }
};

{
  receipt{
    shop
    items{
      name
      price
    }
  }
}

{   
  "data": {     
    "receipt": {       
      "shop": "Wallmart",       
      "items": [         
                 { "name": "Water", "price": 20.5 },
                 { "name": "Milk", "price": 30.5 }       
               ]    
    }   
  } 
}

const gpserver = new ApolloServer({ typeDefs, resolvers, context: async ()=>({ db: dbcli }) });