GraphQL API con Swift: tutorial paso a paso para iOS y macOS

GraphQL API con Swift: tutorial paso a paso

GraphQL se está convirtiendo en un estándar para las API modernas gracias a su flexibilidad y eficiencia. A diferencia de REST, donde se obtiene una estructura de datos fija, GraphQL permite solicitar solo lo que se necesita. En este tutorial, analizaremos cómo integrar GraphQL API en aplicaciones Swift para iOS y macOS, utilizando la biblioteca Apollo iOS. Aprenderá a ejecutar consultas, mutaciones y manejar errores.

1. Configuración del proyecto e instalación de Apollo iOS

El primer paso es crear un nuevo proyecto de Xcode y agregar la dependencia Apollo iOS a través de Swift Package Manager (SPM).

Paso 1.1: Creación del proyecto

Abra Xcode y cree un nuevo proyecto (iOS App o macOS App). Elija SwiftUI o UIKit: nuestro ejemplo funcionará con ambas plataformas.

Paso 1.2: Instalación de Apollo iOS a través de SPM

1. En Xcode, vaya a File → Add Packages...
2. Pegue la URL del repositorio: https://github.com/apollographql/apollo-ios.git
3. Seleccione la última versión estable (por ejemplo, 1.15.0) y haga clic en Add Package.
4. En la ventana que aparece, seleccione su proyecto y agregue el paquete Apollo.

Paso 1.3: Generación del esquema y código

Apollo iOS utiliza generación de código basada en el esquema GraphQL. Primero, descargue el esquema de su API (generalmente a través de introspection query). Para la prueba, usaremos la API pública Countries GraphQL (https://countries.trevorblades.com).

Cree un archivo schema.graphqls en la raíz del proyecto y coloque el esquema en él (se puede obtener a través de GraphQL Playground). Luego, agregue el script de generación en Build Phases:

// Ejemplo de script en Build Phasesif which apollo-ios-cli >/dev/null; then    apollo-ios-cli generateelse    echo "Apollo CLI no está instalado. Instálelo mediante: brew install apollo-ios-cli"fi

Instale el CLI a través de Homebrew: brew install apollo-ios-cli.

2. Ejecución de una consulta GraphQL básica

Ahora que el proyecto está configurado, escribamos el código para ejecutar una consulta. Obtendremos una lista de países con sus códigos y nombres.

Paso 2.1: Creación de la consulta GraphQL

En la carpeta del proyecto, cree un archivo Countries.graphql y agregue la consulta:

query GetCountries {    countries {        code        name    }}

Después de esto, ejecute la generación de código (a través de Build o terminal). Apollo creará las estructuras GetCountriesQuery y GetCountriesQuery.Data.

Paso 2.2: Configuración de ApolloClient

Cree un administrador de red:

import Apollo

class NetworkManager {    static let shared = NetworkManager()    private(set) lazy var apollo: ApolloClient = {        let url = URL(string: "https://countries.trevorblades.com")!        return ApolloClient(url: url)    }()}

Paso 2.3: Ejecución de la consulta en SwiftUI

Ejemplo para SwiftUI:

import SwiftUI

struct ContentView: View {    @State private var countries: [GetCountriesQuery.Data.Country] = []        var body: some View {        List(countries, id: \\.code) { country in            Text("\\(country.name) (\\(country.code))")        }        .onAppear {            loadCountries()        }    }        func loadCountries() {        NetworkManager.shared.apollo.fetch(query: GetCountriesQuery()) { result in            switch result {            case .success(let graphQLResult):                if let countries = graphQLResult.data?.countries {                    self.countries = countries                }            case .failure(let error):                print("Error de consulta: \\(error.localizedDescription)")            }        }    }}

Ejecute la aplicación. Si todo está