Автор оригинала: Teodor Malinas.
Что такое график? 🤔.
GraphQL – это язык запроса для вашего API, и среда выполнения на стороне сервера для выполнения запросов, используя систему типа, которую вы определяете для ваших данных.
В более простых терминах GraphQL является синтаксисом, который описывает, как запрашивать данные. Он был выпущен на Facebook публично в 2015 году, и с тех пор многие компании приняли Graphql в их стеке.
Из официальных документов:
Как только служба GraphQL работает (как правило, на URL на веб-сервисе), его могут быть отправлены запросы GraphQL для проверки и выполнения. Полученный запрос сначала проверяется, чтобы убедиться, что он относится только к типам, которые определяются полями, затем выполняет прилагаемые функции для получения результата.
Вы можете построить сервер, который может отвечать на запросы GraphQL на любой язык, который вы хотите. Приложение на стороне клиента не заботится об этом, пока не сможет отправить запрос GraphQL в конечную точку и получить желаемые данные.
Зачем использовать график? 💪🏼.
Многие считают graphql как замена для отдыха, что вполне неточно. Отдых (представительский государственный перевод) – это архитектура проектирования API, используемая на сетевом программном обеспечении для передачи данных.
У него много ограничений. Это может потребовать нескольких круглых поездок, чтобы получить связанные ресурсы. Другая распространенная проблема находится в недооценке (не получение всего за одно захоронение) или чрезмерной выборки (получая больше, чем то, что нужно в одном.
По мере роста приложения число конечных точек, которые необходимы, могут также увеличить и сделать техническое обслуживание кодовой базы гораздо сложнее. Сервер решает, какие данные должны быть отправлены клиенту, и клиент не контролирует его.
GraphQL предоставляет язык, спецификацию и сбор инструментов, которые помогают решить эти проблемы с лучшей производительностью и гибкостью.
Самые большие преимущества:
Там будет только одна конечная точка (большую часть времени), которая делает жизнь более простым клиентом, чтобы решить, какие данные запросить
Давайте рассмотрим пример, чтобы сделать это более понятно. Предположим, что вы строите приложение, которое показывает детали книг. Книга имеет следующие поля – ID, название, автор, жанр.
На одной странице вы хотите отобразить идентификатор и заголовок. На другой странице вы хотите отобразить заголовок и автор, а на третьей странице вы хотите отобразить заголовок и жанр.
Если вы хотите оптимально реализовать использование архитектуры API для отдыха, вам понадобятся три разных конечных точка. Используя GraphQL, вы можете использовать одну конечную точку, которая предоставляет все данные и запрашивать только необходимые данные в приложении клиента.
Служба GraphQL создается путем определения типов и полей на этих типах, а затем предоставление функций для каждого поля на каждом типе. Это делает GraphQL менее ошибкой.
Graphql в реакции 💻
Давайте копаем в тему поста, которая начинается с GraphQL в реакции. Хотя мы прошли базовое введение Graphql, в этом руководстве этого руководства предполагают, что вы уже знакомы с реагированием и реагирующей простого приложения RACT. Теперь мы посмотрим, как использовать GraphQL в реакции.
Реагирование имеет очень активную экосистему, окружающую ее, и уже есть много инструментов, которые делают с помощью GraphQL Breeze.
Давайте посмотрим на все пакеты, необходимые для начала нас.
APOLLO-BOOST – это нулевой способ начать работу с GraphQL в реакции. React-Apollo – клиент Apollo – лучший способ использовать GraphQL в клиентских приложениях. React-Apollo предоставляет интеграцию между GraphQL и Client Client Graphql-Tag – шаблон JavaScript Listal Tag, который анализирует запросы GraphQL
и конечно graphql.
Давайте посмотрим на реальную реализацию кода.
Первый шаг – импортировать Apollo-Client из Apollo-Boost.
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'
Как только у нас есть объект Apollo, мы создадим экземпляр клиента Apollo с собственностью URI. Это фактическая конечная точка, которая предоставит нам данные, которые будут отображаться на нашем приложении React React. Это можно сделать, используя следующую строку кода.
const client = new ApolloClient({
uri: 'https://r95kv5p84n.lp.gql.zone/graphql',
})
Для демонстрационных целей мы создали конечную точку, которая предоставит нам данные о книге – ID, имя и автор. Apollo LaunchPad поможет вам настроить конечные точки Pseudo GraphQL, что действительно легко для демонстрационных целей. Как мы упоминали ранее, приложение Client Side не волнует, как сервер построен до тех пор, пока сервер принимает запросы и возвратные данные.
Не стесняйтесь играть с ним и сделать свои собственные конечные точки.
Следующим шагом является подключение APOLLO и реагировать. Для этого мы можем использовать Аполлопровидер из React-Apollo. Мы должны обернуть весь компонент с аполлопровидом, как показано ниже.
import React from 'react'
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'
import Books from './Books'
const client = new ApolloClient({
uri: 'https://r95kv5p84n.lp.gql.zone/graphql',
})
const App = () => (
)
export default App
Теперь давайте построим фактическое приложение. С момента его демонстрационного приложения мы будем держать его простым и глупым. Получить данные и отобразить его. Давайте создадим компонент называемый книгами для отображения всех книг.
import React from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'
import Book from './Book'
const Books = () => (
{({ loading, error, data }) => {
if (loading) return Good things take time....
if (error) return Something went wrong...
return {data.allBooks.map(book =>
)
export default Books
Начнем, импортируя необходимые пакеты. Нам нужен GQL для выполнения фактического запроса. Чтобы получить доступ к данным, мы обертываем фактический компонент в компоненте запроса с требуемым запросом GQL, передаваемым в качестве атрибута запроса.
Компонент запроса используется для выполнения запроса от бэкэнда. Это вернет данные с тремя словами.
Загрузка – показать, что данные все еще загружают ошибку – указать, что некоторые ошибки были вызваны данными – фактические данные в качестве массива (или, как указано в Backend)
Мы можем использовать функцию карты над объектом данных и просто отображать его в браузере.
Как упоминалось ранее, прохладная вещь о построении запроса в вашем приложении к клиентам является то, что вы можете управлять необходимыми вами полями. Например, если вам нужно только имя книги, которую запрос может быть:
query={gql`
{
allBooks {
id
title
}
}
`}
Это обеспечивает большую гибкость в случае конечных точек с большим количеством полей. Вам нужно только реализовать одну конечную точку, и на основе просмотра построить запрос и получить необходимые данные.
Теперь мы успешно выявили данные с сервера GraphQL и отображаемые данные в приложении ADG-клиента.
Если вам нравится то, что вы прочитали, следуйте за мной на этом. С наилучшими пожеланиями