ابدأ مع GraphQL وتعلم API بسهولة

لو انت شغال بـ REST API وأكيد قابلتك المشكلة دي: مرات تحب تجيب بيانات معينة بس بترجعلك بيانات كتير مالهاش لازمة . هنا بييجي دور GraphQL اللي بيخليك تحدد بالظبط إيه اللي محتاجه من غير أي حاجات زيادة.
تعالى نشوف خطوة خطوة إزاي تبدأ معاه وتتعامل معاه بكل احترافية

يعني إيه GraphQL؟​

ببساطة GraphQL دي Query Language بتخليك تختار الحقول اللي محتاجها بس من الـ API. مش زي REST اللي بيجيبلك كل حاجة. مع GraphQL، Request بتاعتك أخف وأسرع، وكمان بيقلل الحمل على السيرفر .

أول حاجة: الـ Schema​

الـ Schema هو قلب GraphQL. هو اللي بيحدد أنواع البيانات اللي ممكن تطلبها وكمان العمليات المتاحة زي الـ Queries والـ Mutations.
مثال بسيط:

type User {
id: ID!
name: String!
email: String!
}

type Query {
getUser(id: ID!): User
}

كده عرفنا نوع بيانات اسمه User وخصائصه name و email، وكمان فيه Query تجيب بيانات المستخدم حسب الـ ID .

تعمل Query إزاي؟​

في GraphQL، انت بتختار بالظبط الحقول اللي محتاجها. شوف المثال ده:

query {
getUser(id: "1") {
name
email
}
}

والرد هيكون بالشكل ده:

{
"data": {
"getUser": {
"name": "Ahmed",
"email": "[ahmed@example.com](mailto:ahmed@example.com)"
}
}
}

كده خدنا اللي محتاجينه بالظبط من غير أي بيانات زيادة .

التعامل مع Mutations​

لو عايز تعدل بيانات زي ما في REST بنستخدم POST أو PUT، هنا في GraphQL بنستخدم Mutations.
مثال:

mutation {
updateUser(id: "1", name: "Mohamed") {
id
name
email
}
}

والرد هيكون:

{
"data": {
"updateUser": {
"id": "1",
"name": "Mohamed",
"email": "[ahmed@example.com](mailto:ahmed@example.com)"
}
}
}

كده عدلنا البيانات وجبنا الرد اللي محتاجينه .

أهم حاجة: Apollo Client مع React​

لو شغال بـ React، أكتر حاجة هتسهل الشغل مع GraphQL هي Apollo Client .
أول حاجة تنزل المكتبات:

npm install @apollo/client graphql

بعد كده تعمل Config:

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
uri: '[https://example.com/graphql](https://example.com/graphql)',
cache: new InMemoryCache()
});

function App() {
return ( <ApolloProvider client={client}> <MyComponent /> </ApolloProvider>
);
}

وبعدين تستخدم Query في أي مكان:

import { useQuery, gql } from '@apollo/client';

const GET_USER = gql`  query GetUser($id: ID!) {
    getUser(id: $id) {
      name
      email
    }
  }`;

function MyComponent() {
const { loading, error, data } = useQuery(GET_USER, {
variables: { id: "1" }
});

if (loading) return <p>Loading...</p>;
if (error) return <p>Error 😢</p>;

return ( <div> <h1>{data.getUser.name}</h1> <p>{data.getUser.email}</p> </div>
);
}

GraphQL ولا REST؟ مين الأقوى؟​

• REST بيرجع بيانات ثابتة، ساعات فيها حاجات زيادة مالهاش لازمة
• GraphQL بيجيب لك اللي محتاجه بالظبط وبـ Request واحد
• لو عايز بيانات من أكتر من Endpoint، REST هيعملك طلبات كتير، GraphQL بيعمل كل حاجة في طلب واحد

الخلاصة: لو عايز سرعة، كفاءة، ومرونة أكتر في APIs، GraphQL هو الحل الأمثل .

نصايح لبدء شغل GraphQL صح​

• اتعلم أساسيات الـ Schema كويس
• جرب Queries و Mutations عملي
• استخدم Apollo Client لو شغال بـ React
• ركز على اختيار الحقول اللي محتاجها بس لتوفير الوقت والموارد
• اقرأ عن الـ Fragments والـ Subscriptions لتوسيع شغلك مع البيانات

ابدأ دلوقتي وجرب GraphQL بنفسك، وشاركنا تجربتك في الكومنتات