Вы полюбите GraphQL в React, если прочитаете этот пост

Что такое GraphQL? 🤔

GraphQL — это язык запросов для вашего API и среда выполнения на стороне сервера для выполнения запросов с использованием системы типов, которую вы определяете для своих данных.

Проще говоря, graphQL — это синтаксис, описывающий, как запрашивать данные. Он был выпущен Facebook публично в 2015 году, и с тех пор многие компании внедрили GraphQL в свой стек.

Из официальных документов:

После запуска службы GraphQL (обычно по URL-адресу веб-службы) ей можно отправлять запросы GraphQL для проверки и выполнения. Полученный запрос сначала проверяется, чтобы убедиться, что он относится только к определенным типам и полям, а затем выполняет предоставленные функции для получения результата.

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

Зачем использовать GraphQL? 💪🏼

Многие считают GraphQL заменой REST, что совершенно неверно.
REST (передача репрезентативного состояния) — это архитектура проектирования API, используемая в сетевом программном обеспечении для передачи данных.

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

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

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

Самые большие преимущества:

Будет только одна конечная точка (в большинстве случаев), что упрощает жизнь.
Клиент сам решает, какие данные запрашивать

Давайте рассмотрим пример, чтобы сделать это более понятным. Предположим, вы создаете приложение, отображающее сведения о книгах. Книга имеет следующие поля — id, название, автор, жанр.

На одной странице вы хотите отобразить идентификатор и заголовок. На другой странице вы хотите отобразить название и автора, а на третьей странице вы хотите отобразить название и жанр.

Если вы хотите оптимально реализовать это с помощью архитектуры REST API, вам потребуются три разные конечные точки. Используя graphQL, вы можете использовать единую конечную точку, которая предоставляет все данные, и запрашивать только необходимые данные из клиентского приложения.

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

GraphQL в Реакции 💻

Давайте углубимся в тему поста, посвященного началу работы с graphQL в React. Хотя мы прошли базовое введение в graphQL, в этом руководстве предполагается, что вы уже знакомы с React и реализуете простое приложение React. Теперь мы рассмотрим, как использовать graphQL в React.

React имеет очень активную экосистему, окружающую его, и уже имеет множество инструментов, которые упрощают использование GraphQL.

Давайте взглянем на все пакеты, необходимые для начала работы.

apollo-boost — это способ начать работу с GraphQL без настройки в React.
react-apollo — клиент Apollo — лучший способ использовать GraphQL в клиентских приложениях. React-apollo обеспечивает интеграцию между GraphQL и клиентом Apollo.
graphql-tag — литеральный тег шаблона JavaScript, который анализирует запросы GraphQL.

и, конечно же, GraphQL.

Давайте посмотрим на реальную реализацию кода.

Первый шаг — импортировать apollo-client из apollo-boost.

import ApolloClient from ‘apollo-boost’
import { ApolloProvider } from ‘react-apollo’

Получив объект apollo, мы создадим экземпляр клиента apollo со свойством uri. Это фактическая конечная точка, которая предоставит нам данные, которые будут отображаться в нашем клиентском приложении. Это можно сделать с помощью следующей строки кода.

const client = new ApolloClient({
    uri: ‘
})

В демонстрационных целях мы настроили конечную точку, которая предоставит нам данные книги — идентификатор, имя и автора. Панель запуска Apollo помогает вам настроить конечные точки псевдографа QL, что очень просто для демонстрационных целей. Как мы упоминали ранее, клиентское приложение не заботится о том, как построен сервер, пока сервер принимает запросы и возвращает данные.

Не стесняйтесь играть с ним и создавать свои собственные конечные точки.

Следующий шаг — соединить Apollo и React. Для этого мы можем использовать ApolloProvider из react-apollo. Мы должны обернуть весь компонент с помощью ApolloProvider, как показано ниже.

import React from 'react'
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'
import Books from './Books'

const client = new ApolloClient({
  uri: '
})

const App = () => (
  <ApolloProvider client={client}>
    <nav className="navbar">
      <a className="navbar-brand" href="">
        GraphQL in React - Demo application
      </a>
    </nav>
    <div className="container">
      <Books />
    </div>
  </ApolloProvider>
)

export default App

Теперь давайте создадим настоящее приложение. Поскольку это демонстрационное приложение, мы будем делать его простым и глупым. Получите данные и отобразите их. Давайте создадим компонент под названием «Книги» для отображения всех книг.

import React from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'

import Book from './Book'

const Books = () => (
  <Query
    query={gql`
      {
        allBooks {
          id
          title
          author
        }
      }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Good things take time....</p>
      if (error) return <p>Something went wrong...</p>

      return <div className="row">{data.allBooks.map(book => <Book book={book} />)}</div>
    }}
  </Query>
)

export default Books

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

Компонент запроса используется для выполнения запроса из бэкэнда. Это вернет данные с тремя параметрами.

loading — чтобы показать, что данные все еще загружаются
error — чтобы указать, что произошла какая-то ошибка
data — фактические данные в виде массива (или как указано в бэкенде)

Мы можем использовать функцию карты над объектом данных и просто отобразить его в браузере.

Как упоминалось ранее, интересная особенность построения запроса в клиентском приложении заключается в том, что вы можете управлять нужными вам полями. Например, если вам нужно только название книги, запрос может быть таким:

query={gql`
  {
    allBooks {
      id
      title
    }
  }
`}

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

Теперь мы успешно получили данные с сервера graphQL и отобразили данные в реагирующем клиентском приложении.

Если вам нравится то, что вы прочитали, следуйте за мной в этом.
С наилучшими пожеланиями