Пошаговое руководство от установки и создания базы данных до вашего первого приложения на Swift и GraphQL с использованием Apollo.

GraphQL - мощный инструмент, в этой статье вы узнаете, как использовать его на iOS с нуля, используя Swift.

Некоторая предыстория

Как пишет Википедия

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

У меня нет полномочий утверждать, что GraphQL лучше, чем Restful API, но он дает много преимуществ и гибкости, которых мы не можем найти в последних версиях, например:

  • Вместо вызова нескольких конечных точек для получения данных у нас есть одна конечная точка.
  • Он предлагает сильную систему типов, как мы увидим позже в статье.
  • Мы получаем точные данные, которые нам нужны, без какой-либо дополнительной бесполезной информации или необходимости выполнять несколько вызовов на несколько конечных точек, чтобы получить всю необходимую нам информацию.

Создание простой базы данных PostgreSQL

Давайте создадим простую базу данных с помощью Postgres.

Установка

Мы можем установить Postgres двумя способами:

  • Скачивание Postgres.app
  • Вручную с помощью Homebrew и терминала

С Postgres.app

Это довольно просто:

  1. Скачайте приложение по следующей ссылке
  2. Переместите его в папку приложения
  3. Откройте его и нажмите «инициализировать».

Выполнено! Теперь у вас есть сервер PostgreSQL, работающий на вашем Mac, со следующими настройками по умолчанию:

Ручная установка

Если вы выбрали ручное решение, давайте начнем с установки Homebrew, мы будем следовать этому руководству.

  1. Выполните следующую команду в своем терминале
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Затем мы можем установить Postgres

brew install postgresql

3. Выполните следующую команду

ln -sfv /usr/local/opt/postgresql/*.plist ~/Library/LaunchAgents

4. Давайте создадим два псевдонима для запуска и остановки службы postgres.

alias pgstart="launchctl load ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist"

alias pgstop="launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist"

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

pgstart

Если ошибок нет, значит, все работает правильно.

6.Создайте простую базу данных

createdb

7. Подключитесь к postgres, выполнив команду

psql

8. Если вы видите следующую ошибку

role "postgres" does not exist

Вы можете исправить это, запустив

createuser -s postgres

Если все работает нормально, вы должны увидеть это

Подключение Postgres к GraphQL

Есть несколько способов сделать это, которые требуют предварительных знаний с node.js. Я хочу, чтобы это руководство было дружественным для новичков, поэтому мы собираемся использовать Hasura, движок, который генерирует полный бэкэнд GraphQL из нашей базы данных.

Он может работать на Docker или Heroku, поскольку в этом руководстве мы настраиваем локальную базу данных, мы будем использовать подход Docker.

Приступим, нам нужно установить Docker.
Вы можете скачать установщик Docker отсюда.

Получите файл docker-compose

Давайте создадим файл с именем docker-compose.yaml, который будет содержать конфигурацию нашей базы данных и заполнить его информацией о нашей базе данных.

version: '3.6'
services:
  postgres:
    image: postgres:12
    restart: always
    volumes:
    - db_data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgrespassword
  graphql-engine:
    image: hasura/graphql-engine:v1.2.1
    ports:
    - "8080:8080"
    depends_on:
    - "postgres"
    restart: always
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
      ## uncomment next line to set an admin secret
      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
volumes:
  db_data:

Измените следующую строку

postgres://postgres:postgrespassword@postgres:5432/postgres

To

postgres://yourUsername:@host.docker.internal:5432/postgres

Если вы не знаете, какое у вас имя пользователя, просто запустите

psql
\du

И вставьте название вашей роли

поместите его в каталог нашего проекта и запустите в терминале

cd yourProjectDirectory

Запустите движок Hasura GraphQL и Postgres

$ docker-compose up -d

Проверяем, запущены ли контейнеры:

$ docker ps
CONTAINER ID IMAGE                 ... CREATED STATUS PORTS          ...
097f58433a2b hasura/graphql-engine ... 1m ago  Up 1m  8080->8080/tcp ...
b0b1aac0508d postgres              ... 1m ago  Up 1m  5432/tcp       ...

И ваш докер должен выглядеть так

Если все заработало, вы можете получить доступ к консоли Hasura

http://localhost:8080/console/

Настроить нашу базу данных

Если вы все сделали правильно, вы должны увидеть консоль Hasura

Нажмите «Данные», а затем «Создать таблицу», чтобы создать нашу первую таблицу базы данных.

Мы собираемся создать действительно простую таблицу «Пользователь», которая позволит нам хранить пользователей, поэтому она будет содержать следующие поля:

  • id: у него будет тип uuid, он будет самогенерируемым и уникальным

  • имя пользователя: символ различного типа (строка) и уникальный

  • пароль: символ разного типа, уникальный

  • электронная почта: символ различного типа, допускающий значение NULL, уникальный

Давайте установим id в качестве первичного ключа, и наша таблица должна выглядеть так

Нажмите на добавить таблицу, чтобы завершить создание.

Установка Apollo iOS

Как они заявляют в своей документации

Apollo iOS - это строго типизированный кэширующий клиент GraphQL для нативных приложений iOS, написанных на Swift.

Он позволяет выполнять запросы и изменения на сервере GraphQL и возвращает результаты в виде типов Swift, зависящих от запроса. Это означает, что вам не нужно заниматься парсингом JSON или передавать словари и заставлять клиентов вручную приводить значения к нужному типу. Вам также не нужно самостоятельно писать типы моделей, потому что они генерируются на основе определений GraphQL, которые использует ваш пользовательский интерфейс.

Зайдите в каталог вашего проекта с помощью терминала и введите

pod init

добавить зависимость Apollo iOS

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'ApolloExample' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
# Pods for ApolloExample
 pod "Apollo"
end

и беги

pod install

Дважды щелкните только что созданный файл .xcworkspace, проект должен выглядеть так

Скачивание схемы базы данных

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

apollo schema:download --endpoint http://0.0.0.0:8080/v1/graphql

Вы должны увидеть файл schema.json в каталоге вашего проекта, содержащий схему базы данных.

Переместите его в нашу целевую директорию

Написание нашей первой мутации

Мутация - это в основном запрос, который изменяет данные в базе данных и возвращает значение.

Мы собираемся создать мутацию «signUp» для создания пользователей; нажмите «GraphiQL» в консоли Hasura, затем в левом нижнем углу выберите «добавить новую мутацию» и нажмите «+»

Мы увидим новую пустую мутацию, которая выглядит так

Hasura позволяет нам легко создавать запросы и мутации с помощью инструмента Explorer.

Щелкните «insert_User», и затем мы сможем выбрать поля, необходимые для создания; в меню «объекты» выберите «имя пользователя», «пароль» и «электронная почта».

В меню «возврат» выберите «id», чтобы вернуть сгенерированный идентификатор пользователя; мы увидим следующее

Но нам не хватает параметра мутации, давайте добавим их

mutation signUp
($username:String!,$password:String!,$email:String) {
  insert_User(objects: {username: $username, password: $password, email: $email}) {
    returning {
      id
    }
  }
}

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

Теперь скопируйте мутацию и вставьте ее в новый файл «mutations.graphql» в целевой каталог вашего проекта, там же, где мы поместили «schema.json», и добавьте его в проект.

Шаг генерации кода

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

Щелкните цель проекта, выберите «Фазы сборки», нажмите кнопку «+», чтобы создать новый шаг, выберите «Фаза нового сценария выполнения» и перетащите ее перед «Компиляция источников».

Генерация кода использует ваши .graphql файлы для генерации кода API, который поможет вам отправлять запросы, подписки и изменения, а также анализировать и кэшировать ответы. Чтобы запустить генерацию кода как часть процесса сборки Xcode, вам необходимо создать этап сборки, который запускается перед «Компиляцией источников», чтобы вызвать сценарий оболочки.

Вставьте следующий код в текстовое поле сценария и попробуйте построить проект.

Если вы все сделали правильно, в целевом каталоге будет сгенерирован новый файл «API.swift»; давайте добавим его в наш проект, перетащив в Xcode

Давайте зарегистрируем нашего первого пользователя

Прежде всего, нам нужно реализовать клиент apollo для сетевых вызовов; давайте создадим класс Сеть, как описано здесь https://www.apollographql.com/docs/ios/initialization/#basic-client-creation

Я собираюсь создать простое представление SwiftUI, содержащее текстовые поля и кнопку регистрации.

Это будет выглядеть так

Давайте также создадим модель и добавим код мутации

Затем нам нужно отредактировать класс ContentView и поместить SignUpView () внутри тела

Давайте запустим приложение и попробуем зарегистрировать нового пользователя. если все работает, вы увидите следующий результат

И мы также можем проверить нашу таблицу

Создание запроса входа

Давайте создадим запрос на вход так же, как мы сделали для мутации

Вставьте его в файл .graphql

И снова соберите, чтобы сгенерировать запрос в файл API.swift.

Давайте теперь создадим наш LoginView

И LoginViewModel

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

Не забудьте установить LoginView в теле ContentView, как мы это делали раньше.

Давай попробуем

Это сработало.

Вы можете найти пример кода здесь:

https://github.com/ilahomesick/ApolloGraphQLExample

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