Революция от GraphQL к внешнему управлению данными — заметки о сухих товарах GraphQL

вы знаете? Крупные компании, такие как FaceBook, GitHub, Pinterest, Twitter, Sky, The New York Times, Shopify, Yelp, уже используют спецификацию интерфейса спецификации GraphQL. Если ты не будешь учиться, ты отстанешь.

Ссылка на код GitHub

Справочная статья

• Декларативный экземпляр полного стека GraphQL, написанный иностранцем
• Если вы делаете хороший дизайн API
• Реализация Java Spring Boot
• Дизайн сервиса GraphQL от Medium

Навыки, которые вы получите

• Концепции GraphQL
• Практический GraphQL — запрос/мутация/подписка
• Сравнительный анализ Rest и GraphQL
• Как создать серверную службу GraphQL
• Как использовать хуки React, Provider для инкапсуляции клиента GraphQL
• Как подписаться на изменения данных через GraphQL

Проблемы с появлением фреймворков SPA

Сталкиваетесь ли вы с такими проблемами во фронтенд-разработке?

1. Детализация API перед лицом сложных сценариев

• Чтобы уменьшить количество запросов, вам нужно объединить запросы
• Многотерминальные приложения Представления в Интернете, приложениях и апплетах различаются, поэтому требуемые интерфейсы также различаются.
• Степень детализации интерфейса API трудно определить
  • Подробно: ненужное потребление трафика на мобильных устройствах
  • Мелкозернистый: взрыв, вызванный функцией (Function Explosion)

1. Проблема разделения версий API

• Необходимо часто иметь дело с эволюцией версий API

2. Стиль интерфейса неоднороден при реализации двусторонней связи.

Если вам нужно получить статус платежа или совместную работу нескольких человек, а также синхронизацию информации о запасах в режиме реального времени для передачи данных клиенту, вам часто нужно использовать связь через WebSocket или другие методы связи. В это время вы обнаружите, что если вы попросите сервер использовать стиль Restful, стиль интерфейса не может быть гарантированно однородным.

3. Компоненты должны управлять своим состоянием

• Компоненты должны распределять состояние асинхронного запроса
• Взаимодействие компонентов родитель-потомок усложняет структуру
• Подписанный ответ данных сделает поток данных загроможденным и менее читаемым.

Обзор GraphQL

Английский:graphql.org/

Китайский язык:graphql.cn/

Github GraphQL Explorer developer.GitHub.com/V4/explorer…

концепция

• GraphQL — это язык запросов для API, созданный Facebook.

• Спецификация внешних и внутренних методов запроса данных.

GraphQL — это и язык запросов для API, и среда выполнения, которая удовлетворяет вашим запросам данных. GraphQL предоставляет полное и простое для понимания описание данных в вашем API, позволяя клиентам получать именно те данные, которые им нужны, без какой-либо избыточности, упрощая развитие API с течением времени, и может использоваться для создания мощных инструментов разработчика. .

Преимущество

• Возможность точно определить, какие данные необходимы (GraphQL имеет строгую типизацию)

# 查询
query {
  book(id: "1") {
    id,
    author,
  }
}
# 结果
{
  "data": {
    "book": {
      "id": "1",
      "author": "Author1"
    }
  }
}

• GraphQL позволяет заменить несколько запросов REST одним вызовом для получения указанных данных.
• описать все возможные типы систем

# 查询
query {
  book(id: "1") {
    id,
    author,
  },
  book2 : book(id:"3"){
    id
  }
}
# 结果
{
  "data": {
    "book": {
      "id": "1",
      "author": "Author1"
    },
    "book2": {
      "id": "3"
    }
  }
}

• Эволюция API не должна разделить версию

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

GraphQL VS Restful

Дальнейшее чтение REST, GraphQL, Webhooks и gRPC, как выбрать

	GraphQL	Restful
Запрос нескольких ресурсов одновременно	✔️	❌
Настройка полей API	✔️	❌
Точно определить тип возвращаемого значения	✔️	❌
Нет необходимости разделять версии	✔️	❌
Механизм проверки типа	✔️	❌
Поддержка двусторонней связи	✔️	❌

Основная операция

Синтаксис ОписаниеГрафик вверх Способность /обучение/но день...

[Функция директив фрагментов сложной грамматики для расширенного чтения]nuggets.capable/post/684490…

Query

общий запрос

query {
	books {
    title,
    author
  }
}

### Result
{
  "data": {
    "books": [
      {
        "title": "abc",
        "author": "xxxx"
      }
    ]
  }
}

Запрос с параметрами, переменными и псевдонимами

# 查询
 query($id:String) {
  book(id: $id) {
    id,
    author,
  },
  book2 : book(id:"3"){
    id
  }
}

# 变量
{
  "id":"1"
}

# 结果
{
  "data": {
    "book": {
      "id": "1",
      "author": "Author1"
    },
    "book2": {
      "id": "3"
    }
  }
}

Mutation

Мутация используется для описания неидемпотентной операции изменения данных.

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

# 查询
mutation {
  createBook(title:"TTTT",author: "AAA") {
    id
  }
}

Subscription

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

subscription  {
	subsBooks
}

Серверная часть ApolloServer

ApolloServer — это фреймворк GraphQL с открытым исходным кодом. ApolloServer можно использовать как отдельный сервер, а ApolloServer также можно использовать в качестве подключаемого модуля для сред Node, таких как Express и Koa.

HelloWorld

const { ApolloServer, gql } = require('apollo-server');

// Schema定义
const typeDefs = gql`
  type Query {
    hello: String,
  }
`;

// 解释器实现
const resolvers = {
    Query: {
        hello: () => 'Hello world!',
    }
};

// 创建服务器实例
const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
    console.log(`🚀  Server ready at ${url}`);
});

Сводка определения схемы

тип данных

GraphQL также имеет несколько основных типов, которые в совокупности называются скалярными типами в GraphQL.

• Целое (целое)
• Плавать
• Строка (строка)
• Булево (логическое)
• ID (уникальный тип идентификатора)
• Пользовательский тип Например: тип даты, просто реализуйте соответствующие функции сериализации, десериализации и проверки

тип объекта

При необходимости мы можем комбинировать типы данных в объекты, которые вместе называются объектными типами.

type Book {
    id:String
    title: String
    author: String
  }

другие типы

Чтобы улучшить повторное использование кода, GraphQl также предоставляет более сложные типы интерфейсов, которые здесь повторяться не будут.

• Типы перечисления
• Типы союзов
• Интерфейс

Query

// index.js
// 添加Schema
const typeDefs = gql`
  type Query {
    books: [Book],
    book(id : String) : Book
  }

  type Book {
    id:String
    title: String
    author: String
  }
`;


// 创建数据
const books = (
    () => Array(5).fill().map((v, i) => ({
        id: '' + i,
        title: 'Title' + i,
        author: 'Author' + i
    }))
)()

// 添加resolve
const resolvers = {
    Query: {
        
        books: () => books,
        book: (parent, { id }) => {
            return books.find(v => v.id === id)
        }
    },
}

Mutation

const typeDefs = gql`

  type Mutation {
    
    createBook(title: String, author: String): Book!,

    clearBook : Boolean
  }
`
resolvers.Mutation = {
    createBook: (parent, args) => {
        const book = { ...args, id: books.length + 1 + '' }
        books.push(book)
        return book
    },
    clearBook: () => {
        books.length = 0
        return true
    }
 }

Subscription

const { ApolloServer, gql, PubSub, withFilter } = require('apollo-server');
const typeDefs = gql`
  type Subscription {
    subsBooks : Boolean,
  }

`;
const pubsub = new PubSub()
resolvers.Mutation = {
    createBook: (parent, args) => {
        const book = { ...args, id: books.length + 1 + '' }
        books.push(book)
        // 发布订阅消息
        pubsub.publish('UPDATE_BOOK', {
            subsBooks: true
        })
        return book
    },
    clearBook: () => {
        books.length = 0
        // 发布订阅消息
        pubsub.publish('UPDATE_BOOK', {
            subsBooks: true
        })
        return true
    }
}
resolvers.Subscription = {
    subsBooks: {
        // 过滤不需要订阅的消息
        subscribe: withFilter(
            (parent, variables) => pubsub.asyncIterator('UPDATE_BOOK'),
            (payload, variables) => true
        )
    },
}

Связь с клиентом GraphQL (Axios)

Query

<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>
  axios
    .post("http://localhost:4000/graphql", {
      query: `query {
        books {
          id
          title
          author
        }
      }`
    })
    .then(res => {
      console.log("res: ", res);
      document.writeln(JSON.stringify(res.data))
    });
</script>

Mutataion

<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>
  axios
    .post("http://localhost:4000/graphql", {
      query: `mutation($title:String,$author:String) {
        createBook(title:$title,author:$author){
          id
        }
      }`,
      variables: {
        title: "TTTTT",
        author: "AAAAA"
      }
    })
    .then(res => {
      console.log("res: ", res);
      document.writeln(JSON.stringify(res.data))
    });
</script>

Реактивные приложения данных GraphQL

[Реактивные структуры GraphQL

](GitHub.com/rare earth/gold-no…)

ApolloClient (React) реализует глобальное управление состоянием

Справочная статьяУуху. Сын унаследовал бизнес отца. Цао Цао/статья/Он и...

Интерфейсное управление данными Redux (инструкции) и Apollo (декларативное)

При использовании Apollo мы можем попробовать совершенно другой способ управления внешними данными, то есть декларативное управление данными. В традиционных проектах мы обычно храним данные в едином модуле управления состоянием, таком как Redux. Используйте ApolloClient для управления данными через объявление данных GraphQL. Каждый модуль может настраивать данные, которые ему нужны, в соответствии со своими потребностями.

Поставщик подключения к данным

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode >,
  document.getElementById('root')
);

Когда вам нужно использовать подписку, вы должны соответствовать соединению

// Subscription
// Create an http link:
const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql'
});

// Create a WebSocket link:
const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000/graphql`,
  options: {
    reconnect: true
  }
});

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);


// Subscription
const cache = new InMemoryCache();
const client = new ApolloClient({
  link,
  cache
});

Query

import React, { useEffect } from 'react';
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const QUERY = gql`
    query {
        books {
            id,
            author,
            title
        }
    }
`;


function Query() {
    const { loading, error, data, refetch } = useQuery(QUERY)

    useEffect(() => {
        refetch()
    })

    if (loading) return <p>Loading...</p>
    if (error) return <p>Error :(</p>
    console.log('book', data)
    const list = data.books.map(v => (
    <div>{v.author}: {v.title}</div>
    ))

    return list
}

export default Query;

Mutation

import React from 'react';
import { useMutation } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const CREATE_BOOK = gql`
    mutation CreateBook($title:String!,$author:String!){
        createBook(title:$title,author:$author){
            id,
            title,
            author
        }
    }
`;

const CLEAR_BOOK = gql`
    mutation {
        clearBook
    }
`;

function Mutation() {
    const [create, { data }] = useMutation(CREATE_BOOK);

    const [clear] = useMutation(CLEAR_BOOK)

    return (
        <div>
            <form
                onSubmit={e => {
                    e.preventDefault();
                    create({
                        variables: {
                            "title": 'Title' + (Math.random() * 100).toFixed(),
                            "author": 'Author'+ (Math.random() * 100).toFixed()
                        }
                    });
                    console.log('mutation:',data)
                }}
            >
                
                <button type="submit">Create</button>
            </form>
            <button onClick={ clear }>Clear</button>
        </div>
    );
}

export default Mutation;

Subscription

import React from 'react';
import { useSubscription } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
import Query from './Query'

const subs = gql`
    subscription {
        subsBooks
    }
`;

function Subscription() {
    useSubscription(subs)
    return <Query/>
}

export default Subscription;

приложение

Ресурсы Apollo относятся к этой статьеnuggets.capable/post/684490…

• Сервер

  • [GraphQL-JS] Node(GitHub.com/graph up/Конечно...) Первоначальная реализация
  • graph-packСервисная среда GraphQL с нулевой конфигурацией, которая поддерживает горячие обновления.

• клиент

  • RelayИнструмент Facebook GraphQL.

• Prisma устраняет разрыв между базами данных и преобразователями GraphQL, упрощая внедрение серверов GraphQL производственного уровня. Помимо мощного механизма запросов и API, Prisma отличается опытом разработки.www.prisma.io/

• typeorm напрямую использует модель, созданную в typegraphql.