Что такое GraphQL? Как я могу настроить его для своего проекта? И более

TL;DR:

  • GraphQL не является языком запросов к базе данных. Это язык запросов для данных API, например REST.
  • Сделайте один запрос и получите именно то, что просили, в отличие от REST.
  • Репозиторий GitHub для этой статьи можно найти здесь: https://github.com/machariamuguku/react_apollo_graphql

Что такое GraphQL?

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

Развенчание распространенных мифов о GraphQL (чем не является GraphQL?)

Миф 1. GraphQL - это язык запросов к базе данных, подобный SQL.

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

Миф 2. GraphQL - это волшебство

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

Миф 3. GraphQL как-то связан с графиками

GraphQL - это язык запросов для данных API. График в GraphQL относится к тому, как в GraphQL вы моделируете свой бизнес-домен в виде графа, определяя схему, а внутри схемы вы определяете различные типы узлов и то, как они соединяются / соотносятся для другого.

Миф 4. GraphQL предоставляет всю мою базу данных

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

Почему GraphQL? Почему бы и нет, скажем, ОТДЫХ?

  • Это позволяет вам запрашивать именно то, что вам нужно. Не больше и не меньше. Это помогает решить проблему избыточной и недостаточной выборки в REST.
  • Предсказуемая структура полезной нагрузки. Запрос структурирован так же, как и соответствующая полезная нагрузка. Это делает полезную нагрузку очень предсказуемой.
  • Только одна конечная точка. В отличие от REST, GraphQL имеет только одну конечную точку, что значительно упрощает интерфейсную работу.
  • Агрегация данных из нескольких источников. С помощью таких инструментов, как Apollo Federation, можно сделать один запрос для нескольких федеративных сервисов. Это означает серьезное сокращение числа поездок туда и обратно.
  • GraphQL строго типизирован. На задней панели GraphQL имеет полноценный язык (язык определения схемы или SDL) с примитивными типами (String, Int, Float, Boolean и т. Д.). Это снижает вероятность ошибок.
  • Мгновенно тестируйте запросы, изменения и подписки GraphQL. Используя GraphiQL или GraphQL Playground, вы можете легко тестировать запросы, мутации и подписки GraphQL. Это в комплекте с возможностью передавать переменные и заголовки HTTP.

Почему клиент Apollo?

  • Apollo Cache. Клиент Apollo поставляется с мощным кешем с минимальными настройками по умолчанию. Это гарантирует, что ранее полученные данные кэшируются в памяти пользователя. По умолчанию клиент сначала проверяет, находятся ли уже требуемые данные в кеше, и возвращает их вместо того, чтобы снова запрашивать их.
  • Простота использования. Легкость установки клиента Apollo довольно проста, особенно в эпоху клиента Apollo v3.
  • Хуки Apollo React. С помощью Apollo React Hooks вы можете выполнять запросы и вносить изменения из функциональных компонентов. Это упрощает создание чистых функций.
  • Инструменты Apollo. Такие инструменты, как Apollo Federation, apollo-link-rest и apollo-upload-client имеют минимальную поддержку конфигурации.

Примеры мутаций и запросов GraphQL

  1. Мутация пользователя в регистре GraphQL. Мутации похожи на запросы POST в REST.

2. Запрос пользователя входа в систему GraphQL. Запросы похожи на запросы GET в REST.

Как видите, структуры полезной нагрузки (справа) отражают структуры запроса (слева). Вы получаете именно то, о чем просили. Аккуратно, а?

Настройка клиента Apollo

Мы собираемся использовать Yarn, create-react-app, CLI, Apollo Client 3 beta, Ant Design и Star Wars GraphQL API. Также убедитесь, что у вас установлен Node.js.

  1. cd в папку ваших проектов и создайте новый проект React.
npx create-react-app react_apollo_graphql

2. cd в проект, откройте его в своем любимом редакторе / IDE и запустите, чтобы убедиться, что все работает.

cd react_apollo_graphql && code . && yarn start 
#I use vscode. Replace code . with your fav text editor
#e.g subl . for sublime text

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

4. Добавьте клиентский пакет Apollo и GraphQL в качестве зависимости разработчика.

yarn add @apollo/client && yarn add graphql --dev

4. Отредактируйте index.js, как показано ниже, чтобы добавить Ant Design CSS и предоставить клиент Apollo глобально в вашем приложении.

5. Создайте папку компонентов внутри src/. Внутри него создайте два файла с именами People.js и Person.js, как показано ниже.

6. Отредактируйте App.js, как показано ниже.

7. Сохраните, запустите и наслаждайтесь.

Примечание: просто замените useQuery, useMutation или useSubscription на useLazyQuery, и вы хорошо освоите GraphQL.

Вот и все! Я надеюсь, что это было полезно. Спасибо за прочтение!