گراف کیو ال چیست و چطور از GraphQL در ری اکت استفاده کنیم ؟

گراف کیو ال یک زبان پرس و جو یا همون Query Language برای API ها محسوب میشه. مزیت GraphQL این هست که ما به عنوان Front-End Developer میتونیم مشخص کنیم که دقیقا به چه اطلاعاتی از یک API نیاز داریم! همین موضوع باعث میشه که اطلاعات غیرضروری بین سرور و کلاینت رد و بدل نشه 🙂

البته این کل مزیت GraphQL نیست!

اگه Front-End Developer هستی ولی هنوز نمیدونی GraphQL چیست و چه کاربردی در ری اکت و فرانت اند داره، تو این مقاله با فِرانت اِندی همراه باش 🙂

گراف کیو ال چیست ؟ GraphQL چیست ؟

گراف کیو ال یک Query Language ( زبان پرس و جو ) برای API در فرانت اند به حساب میاد که به ما اجازه میده مشخص کنیم که دقیقا به چه اطلاعاتی از هر API نیاز داریم، با انجام اینکار اطلاعات اضافه و بلااستفاده برای ما ارسال نخواهد شد.

در حقیقت GraphQL میتونه عملیات دریافت داده ( fetching data ) و دستکاری اون اطلاعات رو برای ما انجام بده و مدیریت کنه.

گراف کیو ال به صورتی طراحی شده که API ها خیلی خیلی سریعتر و انعطاف پذیرتر باشن.

این یعنی ما به عنوان یک Developer تجربه و حس خیلی بهتری درنتیجه کار با GraphQL در فرانت اند خواهیم داشت.

یکی از نکات مثبت GraphQL متن باز بودن ( open source بودنش ) هست.

گراف کیو ال در ری اکت

درواقع GraphQL در ری اکت قابلیت استفاده داره و اتفاقا کمک میکنه اپیکیشن ری اکتی ما کارایی و انعطاف پذیری خیلی خیلی بیشتری از خودش نشون بده.

اما باید در جریان این موضوع باشیم که از GraphQL با هر زبان، کتابخانه یا فریمورکی میتونیم استفاده کنیم.

کتابخانه Apollo Client چیست ؟

کتابخانه Apollo Client یک کتابخانه مدیریت وضعیت ( State Management ) هست که برای اپیکیشن های جاوااسکریپتی که از GraphQL استفاده میکنن، کاربرد داره. تو این مقاله ما از Apollo Client + GraphQL استفاده خواهیم کرد 🙂

حالا شاید بپرسیم مزایای Apollo Client چیه ؟

• یک Data Fetcher قدرتمند هست :
  

آپولو کلاینت قابلیت دریافت اطلاعات از سرور رو داره. در حقیقت این کار رو خیلی ساده و بهینه برای ما انجام میده

• قابلیت کش ( cash ) اطلاعات دریافتی رو داره :
  

آپولو کلاینت قابلیت کش و ذخیره سازی اطلاعات دریافت شده از سرور رو داره.

این یعنی بصورت خودکار اطلاعات دریافت شده رو ذخیره میکنه تا در دفعات بعد، از همون اطلاعات کش شده استفاده کنه.

• یک State Management به حساب میاد و قابلیت مدیریت داده های لوکال رو داره :
  

خود Apollo Client یک Local State Management داره و درصورت نیاز میتونیم از این ویژگی کلیدیش هم استفاده کنیم.

• قابلیت شخصی سازی خیلی زیادی داره :
  

ما میتونیم بر اساس نیاز پروژه خودمون، Apollo Client رو شخصی سازی کنیم تا انتظار بهترین عملکرد ممکن رو ازش داشته باشیم.

مثل شخصی سازی نحوه درخواست به سرور، شخصی سازی سیستم کش، شخصی سازی ارور ها و ..

• ابزار های دیباگ داره :
  

اگه از Apollo Client استفاده کنیم، میتونیم از ابزار های Debugging اون مثل Apollo Studio استفاده کنیم که ویژگی هایی مثل بررسی عملکرد کش، مانیتور وضعیت شبکه و .. رو اختیار ما میزاره.

• جامعه آماری خوب و فعالی داره:
  

آپولو کلاینت یک جامعه آماری خوب و قوی داره که باعث شده برای این ابزار آموزش ها، مستندات، پرسش و پاسخ ها و افزودنی های خیلی زیادی وجود داشته باشه.

استفاده از GraphQL در ری اکت

برای اینکه بتونیم از GraphQL در ری اکت استفاده کنیم، باید یک پروژه ری اکتی بسازیم و 2 پکیج زیر که مربوط به خود GraphQL در ری اکت هستن رو نصب کنیم :

1. graphql
2. @appolo/client

نصب این 2 پکیج رو با دستور زیر میتونیم انجام بدیم :

npm install @apollo/client graphql

حالا باید یک سرور GraphQL داشته باشیم که بتونه با کلاینت ارتباط برقرار کنه و API های مارو مدیریت کنه. اگه Back-End Developer این سرور رو در اختیار شما گذاشت که هیچ. در غیر اینصورت میتونیم به کمک ابزار هایی مثل Apollo Server یا Express GraphQL یک سرور GraphQL بسازیم.

سپس باید یک فایل با نام ApolloProvider.js بسازیم تا بتونیم Appolo Client خودمون رو کانفیگ کنیم.

تو تیکه کد زیر، من این فایل رو ساختم :

import React from 'react';

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

const client = new ApolloClient({

  uri: 'http://our-graphql-api-endpoint', // اینجا باید آدرس اِند پوینت خودمون رو بنویسیم

  cache: new InMemoryCache(),

});

const ApolloAppProvider = ({ children }) => {

  return <ApolloProvider client={client}>{children}</ApolloProvider>;

};

export default ApolloAppProvider;

حالا که فایل ApolloProvider.js رو ساختیم، باید وارد فایل App.js بشیم و ApolloProvider رو به عنوان Wrapper کل اپیکیشن خودمون در نظر بگیریم :

import React from 'react';

import ApolloAppProvider from './ApolloProvider';

const App = () => {

  return (

    <ApolloAppProvider>

      {/*

      هرچی کامپوننت، روتینگ یا .. داریم

      */}

    </ApolloAppProvider>

  );

};

export default App;

و تمام 🙂

حالا میتونیم از قابلیت ها و ویژگی های GraphQL در ری اکت استفاده کنیم.

مثلا تو مثال زیر، من از سرور خودم Data دریافت کردم:

import React from 'react';

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

const GET_USERS = gql`

  query GetUsers {

    users {

      id

      name

      email

    }

  }

`;

const UserList = () => {

  const { loading, error, data } = useQuery(GET_USERS);

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

  if (error) return <p>Error :(</p>;

  return (

    <ul>

      {data.users.map((user) => (

        <li key={user.id}>

          {user.name} - {user.email}

        </li>

      ))}

    </ul>

  );

};

export default UserList;

مثال بالا خیلی ساده، چگونگی دریافت اطلاعات از سرور به کمک GraphQL رو به ما آموزش میده.

تو مثال بالا تونستیم از GraphQL در ریکت استفاده کنیم. ( به کمک Apollo Client )

حالا لازمه که چند نکته مهم در مورد GraphQL در فرانت اند رو باهمدیگه بررسی کنیم و یاد بگیریم ..

مزایای GaphQL

لطفا برای مطالعه ادامه این مقاله روی لینک زیر کلیک کنید :

آموزش GraphQL در ری اکت