Пошаговое руководство от установки и создания базы данных до вашего первого приложения на Swift и GraphQL с использованием Apollo.
GraphQL - мощный инструмент, в этой статье вы узнаете, как использовать его на iOS с нуля, используя Swift.
Некоторая предыстория
Как пишет Википедия
GraphQL - это язык запросов и манипулирования данными с открытым исходным кодом для API-интерфейсов, а также среда выполнения для выполнения запросов с существующими данными.
Он обеспечивает подход к разработке веб-API, и был сравнен и противопоставлен REST и другим архитектурам веб-сервисов. Это позволяет клиентам определять структуру требуемых данных, и та же структура данных возвращается с сервера, что предотвращает возврат чрезмерно больших объемов данных, но это имеет последствия для того, насколько эффективно веб-кеширование результатов запроса. может быть. Гибкость и богатство языка запросов также добавляют сложности, которые могут не иметь смысла для простых API. Он состоит из системы типов, языка запросов и семантики выполнения, статической проверки и самоанализа типов.
У меня нет полномочий утверждать, что GraphQL лучше, чем Restful API, но он дает много преимуществ и гибкости, которых мы не можем найти в последних версиях, например:
- Вместо вызова нескольких конечных точек для получения данных у нас есть одна конечная точка.
- Он предлагает сильную систему типов, как мы увидим позже в статье.
- Мы получаем точные данные, которые нам нужны, без какой-либо дополнительной бесполезной информации или необходимости выполнять несколько вызовов на несколько конечных точек, чтобы получить всю необходимую нам информацию.
Создание простой базы данных PostgreSQL
Давайте создадим простую базу данных с помощью Postgres.
Установка
Мы можем установить Postgres двумя способами:
- Скачивание Postgres.app
- Вручную с помощью Homebrew и терминала
С Postgres.app
Это довольно просто:
- Скачайте приложение по следующей ссылке
- Переместите его в папку приложения
- Откройте его и нажмите «инициализировать».
Выполнено! Теперь у вас есть сервер PostgreSQL, работающий на вашем Mac, со следующими настройками по умолчанию:
Ручная установка
Если вы выбрали ручное решение, давайте начнем с установки Homebrew, мы будем следовать этому руководству.
- Выполните следующую команду в своем терминале
/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
Я надеялся, что статья вам понравилась, и вы смогли все правильно настроить; Если у вас возникли проблемы, свяжитесь со мной, и я буду рад помочь.