مكتبات GraphQL في TypeScript: دليل شامل للاختيار والاستخدام

مكتبات GraphQL في TypeScript: دليل شامل

GraphQL هي لغة استعلام لواجهات API، تتيح للعملاء طلب البيانات التي يحتاجونها فقط. وبالاقتران مع TypeScript، وهي لغة مكتوبة بشكل ثابت، تصبح GraphQL أداة قوية لبناء تطبيقات ويب موثوقة وقابلة للتوسع. في هذه المقالة، سنستعرض المكتبات الرئيسية في TypeScript للعمل مع GraphQL، وميزاتها، وفوائدها، وأمثلة على استخدامها.

لماذا نستخدم GraphQL مع TypeScript؟

يكمل TypeScript وGraphQL بعضهما البعض بشكل مثالي. توفر GraphQL كتابة صارمة على مستوى API، بينما يوفرها TypeScript على مستوى كود العميل. وهذا يسمح بـ:

• توليد الأنواع تلقائيًا بناءً على مخطط GraphQL، مما يقلل من عدد الأخطاء.
• الحصول على تلميحات في بيئة التطوير المتكاملة (IDE) لحقول الاستعلامات والتحويرات.
• تجنب عدم التزامن بين الواجهة الخلفية والواجهة الأمامية.

مكتبات GraphQL الرئيسية لـ TypeScript

هناك العديد من المكتبات الشائعة للعمل مع GraphQL في TypeScript. دعنا نستعرض كل منها بالتفصيل.

1. Apollo Client

Apollo Client هي المكتبة الأكثر شيوعًا للعمل مع GraphQL. وهي تدعم React وVue وAngular وأطر عمل أخرى. يوفر Apollo Client أدوات قوية للتخزين المؤقت ومعالجة الأخطاء وإدارة الحالة.

التثبيت:

npm install @apollo/client graphql

مثال على الاستخدام مع React:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';import React from 'react';

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

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

function UserProfile({ userId }: { userId: string }) {    const { loading, error, data } = useQuery(GET_USER, {        variables: { id: userId },    });

    if (loading) return <p>جاري التحميل...</p>;    if (error) return <p>خطأ: {error.message}</p>;

    return (        <div>            <h2>{data.user.name}</h2>            <p>البريد الإلكتروني: {data.user.email}</p>        </div>    );}

2. Relay

Relay هي مكتبة من Facebook، محسّنة للأداء. تستخدم بنية بيانات صارمة وأجزاء (fragments) للإعلان عن تبعيات المكونات للبيانات. تعتبر Relay مثالية للمشاريع الكبيرة ذات الأحمال العالية.

التثبيت:

npm install react-relay relay-runtime

مثال على الاستخدام:

import { graphql, useFragment } from 'react-relay';import React from 'react';

const UserFragment = graphql`    fragment UserProfile_user on User {        id        name        email    }`;

function UserProfile({ user }: { user: any }) {    const data = useFragment(UserFragment, user);

    return (        <div>            <h2>{data.name}</h2>            <p>البريد الإلكتروني: {data.email}</p>        </div>    );}

3. urql

urql هي مكتبة خفيفة الوزن ومرنة، تدعم React وVue وSvelte. توفر واجهة برمجة تطبيقات بسيطة ونظام تخزين مؤقت متقدم. تعتبر urql مثالية للمشاريع الصغيرة والمتوسطة.

التثبيت:

npm install urql graphql

مثال على الاستخدام:

import { createClient, Provider, useQuery, gql } from 'urql';import React from 'react';

const client = createClient({    url: 'https://api.example.com/graphql',});

const GET_USER = gql`    query GetUser($