أزاى تبدأ مع GraphQL وتتعامل معاه بكل أحترافية

[x32x01]

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

يعني إيه GraphQL.. ؟​

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

نبدأ خطوة خطوة:

1. الـ Schema:​

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

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

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

2. إزاي تعمل Query بقا ؟​

في GraphQL، انت بتحدد البيانات اللي محتاجها بالظبط.
طب ازاي ..؟ ركز كدا في المثال دا :

query {
  getUser(id: "1") {
    name
    email
  }
}
الرد هيكون بالشكل ده:
{
  "data": {
    "getUser": {
      "name": "Ahmed",
      "email": "[email protected]"
    }
  }
}

كدا خدنا اللي عايزينه بالظبط بدون أي بيانات زيادة. (اظن مفيش ابسط من كدا )

3. التعامل مع الـ Mutations​

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

mutation {
  updateUser(id: "1", name: "Mohamed") {
    id
    name
    email
  }
}
الرد هيكون كده:
{
  "data": {
    "updateUser": {
      "id": "1",
      "name": "Mohamed",
      "email": "[email protected]"
    }
  }
}

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

4. من اهم الحاجات اللي لازم تكون فاهمها كويس هي Apollo Client​

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

npm install @apollo/client graphql

بعد كده بتعمل Config لـ Apollo Client:

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
  uri: 'https://example.com/graphql',
  cache: new InMemoryCache()
});
function App() {
  return (
    <ApolloProvider client={client}>
      <MyComponent />
    </ApolloProvider>
  );
}

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

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 واحد.
- في REST، لو محتاج تجيب بيانات من أكتر من Endpoint، في GraphQL بتجيب كل حاجة في طلب واحد، وده بيوفر وقت
لو عندك أي سؤال أو محتاج توضيح أكتر، اكتبلي في الكومنتات ومتنساش تقولي رايك في الكومنتات