GraphQL API مع Swift: دليل تعليمي خطوة بخطوة لنظامي iOS وmacOS

GraphQL API مع Swift: دليل تعليمي خطوة بخطوة

أصبح GraphQL معيارًا لواجهات برمجة التطبيقات الحديثة بفضل مرونته وكفاءته. على عكس REST، حيث تحصل على بنية بيانات ثابتة، يتيح لك GraphQL طلب ما تحتاجه فقط. في هذا الدليل التعليمي، سنشرح كيفية دمج GraphQL API في تطبيقات Swift لنظامي iOS و macOS، باستخدام مكتبة Apollo iOS. ستتعلم كيفية تنفيذ الاستعلامات (queries)، والتحويرات (mutations)، ومعالجة الأخطاء.

1. إعداد المشروع وتثبيت Apollo iOS

الخطوة الأولى هي إنشاء مشروع Xcode جديد وإضافة تبعية Apollo iOS عبر Swift Package Manager (SPM).

الخطوة 1.1: إنشاء المشروع

افتح Xcode وأنشئ مشروعًا جديدًا (تطبيق iOS أو تطبيق macOS). اختر SwiftUI أو UIKit — سيعمل مثالنا مع كلا المنصتين.

الخطوة 1.2: تثبيت Apollo iOS عبر SPM

1. في Xcode، انتقل إلى File → Add Packages...
2. الصق رابط المستودع: https://github.com/apollographql/apollo-ios.git
3. اختر أحدث إصدار مستقر (مثل 1.15.0) واضغط على Add Package.
4. في النافذة التي تظهر، اختر مشروعك وأضف الحزمة Apollo.

الخطوة 1.3: توليد المخطط (schema) والكود

يستخدم Apollo iOS توليد الكود بناءً على مخطط GraphQL. أولاً، قم بتنزيل مخطط API الخاص بك (عادةً عبر introspection query). للاختبار، سنستخدم API العامة Countries GraphQL (https://countries.trevorblades.com).

أنشئ ملفًا باسم schema.graphqls في جذر المشروع وضع فيه المخطط (يمكنك الحصول عليه عبر GraphQL Playground). ثم أضف سكريبت التوليد في Build Phases:

// مثال على سكريبت في Build Phasesif which apollo-ios-cli >/dev/null; then    apollo-ios-cli generateelse    echo "Apollo CLI غير مثبت. قم بتثبيته عبر: brew install apollo-ios-cli"fi

قم بتثبيت CLI عبر Homebrew: brew install apollo-ios-cli.

2. تنفيذ استعلام GraphQL أساسي

الآن بعد إعداد المشروع، سنكتب كودًا لتنفيذ استعلام. سنحصل على قائمة بالدول مع رموزها وأسمائها.

الخطوة 2.1: إنشاء استعلام GraphQL

في مجلد المشروع، أنشئ ملفًا باسم Countries.graphql وأضف الاستعلام:

query GetCountries {    countries {        code        name    }}

بعد ذلك، قم بتشغيل توليد الكود (عبر Build أو الطرفية). سيقوم Apollo بإنشاء الهياكل GetCountriesQuery و GetCountriesQuery.Data.

الخطوة 2.2: إعداد ApolloClient

أنشئ مدير الشبكة:

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)    }()}

الخطوة 2.3: تنفيذ الاستعلام في SwiftUI

مثال لـ 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.localizedDescription)")            }        }    }}

قم بتشغيل التطبيق. إذا كان كل شيء