GraphQL API con Swift: tutorial práctico paso a paso

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Introducción a GraphQL y Swift

\n

GraphQL es un lenguaje de consultas para API que permite a los clientes obtener exactamente los datos que necesitan, y nada más. Para los desarrolladores de iOS y macOS, la integración de GraphQL abre nuevas posibilidades para crear aplicaciones móviles eficientes y flexibles. En este tutorial, analizaremos en la práctica cómo conectar GraphQL API a un proyecto Swift, realizar consultas y mutaciones básicas, así como manejar posibles errores.

\n

A diferencia del REST tradicional, GraphQL permite solicitar múltiples recursos en una sola consulta, lo cual es especialmente importante para dispositivos móviles con tráfico limitado. Usaremos la popular biblioteca Apollo iOS, la solución más estable y documentada para trabajar con GraphQL en Swift.

\n\n

Preparación del proyecto e instalación de Apollo iOS

\n

Paso 1: Creación del proyecto e instalación de dependencias

\n

Abra Xcode y cree un nuevo proyecto iOS (o macOS). Para trabajar con GraphQL, instalaremos Apollo iOS a través de Swift Package Manager (SPM).

\n
    \n
  1. En Xcode, seleccione File → Add Packages
  2. \n
  3. Pegue la URL del repositorio: https://github.com/apollographql/apollo-ios.git
  4. \n
  5. Seleccione la última versión estable (en el momento de escribir esto, 1.15+)
  6. \n
  7. Agregue el paquete a su target
  8. \n
\n\n

Paso 2: Generación de código según el esquema GraphQL

\n

Apollo iOS utiliza generación de código: usted describe las consultas en archivos .graphql, y la utilidad crea código Swift tipado. Para ello, es necesario:

\n
    \n
  1. Cree una carpeta GraphQL en el proyecto
  2. \n
  3. Coloque allí el archivo schema.graphqls (el esquema de su API); generalmente se puede obtener mediante introspection
  4. \n
  5. Cree un archivo de consulta, por ejemplo GetUser.graphql:
  6. \n
\n\n
query GetUser($id: ID!) {\n  user(id: $id) {\n    id\n    name\n    email\n    posts {\n      title\n    }\n  }\n}
\n\n

Luego, agregue una Build Phase con la ejecución del generador de código. La forma más sencilla es instalar Apollo CLI a través de Homebrew:

\n
brew install apollo-ios-cli
\n\n

Y ejecutar el comando en la raíz del proyecto:

\n
./apollo-ios-cli generate
\n\n

Después de esto, en la carpeta Sources/API aparecerán archivos Swift generados con los modelos de datos.

\n\n

Ejecución de consultas GraphQL básicas

\n

Configuración del cliente Apollo

\n

Cree una instancia del cliente Apollo, especificando la URL de su endpoint GraphQL. Generalmente, esto se hace en AppDelegate o en una clase de servicio separada:

\n\n
import Apollo\n\nclass NetworkService {\n    static let shared = NetworkService()\n    private(set) lazy var apollo: ApolloClient = {\n        let url = URL(string: "https://your-api.com/graphql")!\n        return ApolloClient(url: url)\n    }()\n}
\n\n

Consulta de datos (Query)

\n

Ahora realizaremos una consulta para obtener un usuario. El código generado creará la estructura GetUserQuery:

\n\n
import Foundation\n\nclass UserViewModel: ObservableObject {\n    @Published var user: User?\n    @Published var errorMessage: String?\n    \n    func fetchUser(id: String) {\n        NetworkService.shared.apollo.fetch(query: GetUserQuery(id: id)) { [weak self] result in\n            DispatchQueue.main.async {\n                switch result {\n                case .success(let graphQLResult):\n                    if let userData = graphQLResult.data?.user {\n                        self?.user = User(\n                            id: userData.id,\n                            name: userData.name,\n                            email: userData.email\n                        )\n                    }\n                case .failure(let error):\n                    self?.errorMessage = "Error: \\(error.localizedDescription)"\n                }\n            }\n        }\n    }\n}
\n\n

Tenga en cuenta: usamos @Published para la actualización reactiva de la UI en

Blogs

Book Recommendations