رابط کاربری پویای خود را با GraphQL و React بسازید

در چشم انداز توسعه وب سریع امروزی، React و GraphQL به عنوان فناوری های قدرتمندی ظاهر شده اند که می توانند کارایی و عملکرد برنامه های کاربردی وب را تا حد زیادی افزایش دهند. React، یک کتابخانه محبوب جاوا اسکریپت برای ایجاد رابط های کاربری، و GraphQL، یک زبان کوئری برای API ها، به طور یکپارچه با هم کار می کنند تا رویکردی انعطاف پذیر و کارآمد برای واکشی و دستکاری داده ها ارائه دهند. بیایید از طریق پنج بهترین راه برای واکشی داده ها با React از GraphQL API مرور کنیم.

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

من نمونه کدهایی را گنجانده ام که به شما نشان می دهد چگونه داده ها را در کوتاه ترین کد ممکن واکشی یا "کوئری" کنید و چگونه با هر یک از این روش های مختلف اتصال React با GraphQL راه اندازی و اجرا کنید.

آشنایی با React و GraphQL

قبل از پرداختن به شیوه های یکپارچه سازی، داشتن درک روشنی از React و GraphQL ضروری است.

React چیست؟

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

GraphQL چیست؟

GraphQL یک زبان کوئری و زمان اجرا منبع باز است که امکان واکشی و دستکاری کارآمد داده ها را فراهم می کند. این یک نحو منعطف و بصری برای کوئری از API ها فراهم می کند، به کلاینتان اجازه می دهد فقط داده های مورد نیاز خود را درخواست کنند و مشکل واکشی بیش از حد را از بین می برد. برای آشنایی دقیق تر با GhrapQL می توانید این مقاله را بررسی کنید.

نحوه استفاده از GraphQL در React چگونه است؟

در این مثال‌ها، ما از GraphQL API برای واکشی و نمایش 10 ماموریت گذشته که SpaceX انجام داده است استفاده می‌کنیم.

اگر می‌خواهید برنامه React خود را با API GraphQL متصل کنید، از کد زیر استفاده کنید. در این مثال‌ها، ما از پیشرفته‌ترین کتابخانه سرویس کلاینت GraphQL برای React به ساده‌ترین رویکرد برای جستجو در نقطه پایانی GraphQL می‌رویم.

1. آپولو کلاینت

محبوب ترین و جامع ترین کتابخانه GraphQL Apollo Client است.

نه تنها می‌توانید از آن برای واکشی داده‌های راه دور با GraphQL استفاده کنید، کاری که ما در اینجا انجام می‌دهیم، بلکه به ما امکان می‌دهد داده‌ها را به صورت محلی، هم از طریق یک حافظه پنهان داخلی و هم از طریق یک API مدیریت کل state، مدیریت کنیم.

برای شروع کار با Apollo Client، باید هم وابستگی اصلی Apollo Client و هم GraphQL را نصب کنید:

npm install @apollo/client graphql

ایده آپولو کلاینت این است که در کل برنامه شما مورد استفاده قرار می گیرد. برای انجام این کار، از یک جزء خاص Apollo Provider استفاده می کنید تا یک کلاینت آپولو ایجاد شده را به کل درخت جزء خود منتقل کنید.

هنگامی که آپولو کلاینت خود را ایجاد می کنید، باید یک مقدار uri، یعنی نقطه پایانی GraphQL را مشخص کنید. علاوه بر این، باید یک کش مشخص کنید.

آپولو کلاینت با حافظه نهان مخصوص خود ارائه می شود که برای ذخیره سازی یا ذخیره و مدیریت محلی درخواست های شما و داده های مرتبط با آنها استفاده می شود:

import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";

import App from "./App";

const client = new ApolloClient({
  uri: "https://api.spacex.land/graphql/",
  cache: new InMemoryCache()
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  rootElement
);

هنگامی که ارائه دهنده و کلاینت را در کامپوننت App خود راه اندازی کردید، می توانید از همه هوک های React مختلف که Apollo Client به شما می دهد برای همه عملیات های مختلف GraphQL استفاده کنید. اینها عبارتند از کوئری، جهش، و اشتراک. حتی می توانید از آپولو کلاینت ایجاد شده مستقیماً با استفاده از یک هوک سفارشی به نام useApolloClient استفاده کنید.

از آنجایی که در اینجا فقط داده ها را کوئری می کنید، از هوک useQuery استفاده خواهید کرد.

شما یک کوئری GraphQL را به عنوان اولین آرگومان آن برای نوشتن کوئری خود قرار می دهید. اگر از ابزار Prettier برای پروژه خود استفاده می کنید، از تابع gql استفاده خواهید کرد که چندین کار را انجام می دهد، مانند برجسته کردن سینتکس ویرایشگر و قابلیت قالب بندی خودکار.

پس از اجرای این کوئری، مقادیر data، loadingو error را برمی گردانید:

import React from "react";
import { useQuery, gql } from "@apollo/client";

const FILMS_QUERY = gql`
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, loading, error } = useQuery(FILMS_QUERY);

  if (loading) return "Loading...";
  if (error) return <pre>{error.message}</pre>

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

قبل از نمایش داده های خود، ماموریت های خود، می خواهید وضعیت بارگیری را مدیریت کنید. وقتی در حالت بارگیری هستید، کوئری را از یک نقطه پایانی راه دور دریافت می کنید.

شما همچنین می توانید هر گونه خطای رخ داده را مدیریت کنید. شما می توانید با ایجاد یک خطای سینکس در کوئری خود، یک خطا را شبیه سازی کنید، مانند کوئری برای فیلدی که وجود ندارد. برای رسیدگی به این خطا، می توانید به راحتی پیامی را از error.message برگردانید و نمایش دهید.

2. Urql

یکی دیگر از کتابخانه‌های با امکانات کامل که برنامه‌های React را با APIهای GraphQL متصل می‌کند، urql است.

سعی می کند بسیاری از ویژگی ها و سینکسی که Apollo دارد را در اختیار شما قرار دهد در حالی که اندازه آن کمی کوچکتر است و به کد راه اندازی کمتری نیاز دارد. اگر بخواهید قابلیت‌های ذخیره‌سازی را در اختیار شما قرار می‌دهد، اما مانند آپولو شامل کتابخانه مدیریت استیت یکپارچه نمی‌شود.

برای استفاده از urql به عنوان کتابخانه کلاینت GraphQL، باید پکیج های urql و GraphQL را نصب کنید.

npm install urql graphql

درست مانند Apollo، شما می خواهید از مولفه اختصاصی ارائه دهنده استفاده کنید و یک کلاینت با نقطه پایانی GraphQL خود ایجاد کنید. توجه داشته باشید که نیازی به تعیین حافظه پنهان خارج از جعبه ندارید.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createClient, Provider } from 'urql';

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

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider value={client}>
    <App />
  </Provider>,
  rootElement
);

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

باز هم می توانید از هوک useQuery از پکیج urql استفاده کنید. اگرچه به جای نیاز به تابع gql، می توانید آن را رها کنید و فقط از یک الگوی واقعی برای نوشتن درخواست خود استفاده کنید.

هنگام فراخوانی useQuery، آرایه‌ای را برمی‌گردانید که می‌توانید آن را به‌عنوان یک آرایه به‌جای یک شی، باز کنید. اولین عنصر در این آرایه یک شی به نام result است که تعدادی ویژگی به شما می دهد که می توانید آنها را باز کنید: data، fetchingو error.

import React from "react";
import { useQuery } from 'urql';

const FILMS_QUERY = `
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const [result] = useQuery({
    query: FILMS_QUERY,
  });

  const { data, fetching, error } = result;

  if (fetching) return "Loading...";
  if (error) return <pre>{error.message}</pre>

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

به روشی مشابه نمایش داده‌هایی که با آپولو واکشی می‌کنید، می‌توانید در حین واکشی داده‌های راه دور، هم استیت error و هم استیت بارگیری خود را مدیریت کنید.

3. React Query + GraphQL Request

در این مرحله مهم است که توجه داشته باشید که برای تعامل با GraphQL API خود، همانطور که در ادامه خواهیم دید، به یک کتابخانه کلاینت GraphQL پیچیده و سنگین مانند urql یا Apollo نیاز ندارید.

کتابخانه هایی مانند Apollo و urql نه تنها برای کمک به شما در انجام تمام عملیات استاندارد GraphQL، بلکه برای مدیریت بهتر وضعیت سرور در کلاینت React خود از طریق تعدادی ابزار اضافی ایجاد شده اند. همه اینها همراه با این واقعیت که آنها با هوک های سفارشی ارائه می شوند که مدیریت کارهای تکراری مانند مدیریت بارگذاری، خطا و سایر استیت های مرتبط را ساده می کند.

با در نظر گرفتن این موضوع، بیایید نگاهی بیندازیم که چگونه می‌توانید از یک کتابخانه GraphQL بسیار کاهش یافته برای واکشی داده‌های خود استفاده کنید و آن را با ابزار بهتری برای مدیریت و ذخیره‌سازی استیت سروری که در برنامه خود وارد می‌کنید ترکیب کنید. با کمک پکیج graphql-request می توانید داده ها را خیلی ساده واکشی کنید.

GraphQL Request کتابخانه ای است که نیازی به تنظیم یک کلاینت یا یک کامپوننت ارائه دهنده ندارد. در اصل تابعی است که فقط یک نقطه پایانی و یک کوئری را می پذیرد. بسیار شبیه به یک سرویس کلاینت HTTP، شما فقط باید آن دو مقدار را پاس کنید و داده های خود را پس می گیرید.

اکنون اگر می‌خواهید آن وضعیت را در سراسر برنامه خود مدیریت کنید، می‌توانید از یک کتابخانه عالی که معمولاً برای تعامل با Rest API استفاده می‌شود استفاده کنید، اما برای APIهای GraphQL به همان اندازه مفید است، و آن React Query است. برخی از React Hooks، useQuery و useMutation با نام‌های بسیار مشابه را در اختیار شما قرار می‌دهد که وظایف مشابهی را با هوک‌های Apollo و urql انجام می‌دهند.

React Query همچنین مجموعه ای از ابزارها را برای مدیریت وضعیت به همراه یک کامپوننت Dev Tools یکپارچه در اختیار شما قرار می دهد که به شما امکان می دهد آنچه را که در حافظه پنهان داخلی React Query ذخیره می شود مشاهده کنید.

با جفت کردن کلاینت اصلی GraphQL خود، درخواست GraphQL، با React Query، تمام قدرت کتابخانه‌ای مانند urql یا Apollo را دریافت می‌کنید.
برای شروع با این جفت شدن، فقط باید React Query و GraphQL Request را نصب کنید:

npm install react-query graphql-request

شما از کامپوننت React Query's Provider استفاده می کنید و یک کلاینت کوئری ایجاد می کنید که در صورت تمایل می توانید تنظیمات پیش فرض واکشی داده را تنظیم کنید. سپس در خود کامپوننت برنامه یا هر کامپوننت فرزند برنامه، می توانید از هوک useQuery استفاده کنید.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const client = new QueryClient();

const rootElement = document.getElementById("root");
ReactDOM.render(
  <QueryClientProvider client={client}>
    <App />
  </QueryClientProvider>,
  rootElement
);

برای ذخیره نتیجه عملیات خود در حافظه پنهان React Query، فقط باید به آن یک مقدار کلیدی به عنوان اولین آرگومان برای خدمت به عنوان شناسه بدهید. این به شما این امکان را می‌دهد که به راحتی داده‌ها را از حافظه پنهان ارجاع داده و از آن خارج کنید، و همچنین یک کوئری را برای واکشی داده‌های به‌روز شده مجدداً واکشی یا کنسل کنید.

از آنجایی که داده‌های راه‌اندازی را واکشی می‌کنید، بیایید این عبارت را «launches» بنامیم.

یک بار دیگر، این هوک نتیجه درخواست را برمی گرداند. برای آرگومان دوم برای useQuery، باید نحوه واکشی آن داده را مشخص کنید و React Query به حل پرامیس ای که درخواست GraphQL برمی گرداند، رسیدگی می کند.

import React from "react";
import { request, gql } from "graphql-request";
import { useQuery } from "react-query";

const endpoint = "https://api.spacex.land/graphql/";
const FILMS_QUERY = gql`
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, isLoading, error } = useQuery("launches", () => {
    return request(endpoint, FILMS_QUERY);
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

مشابه آپولو، یک شی را برمی‌گردانید که می‌توانید آن را باز کنید تا مقادیر data ، و همچنین اینکه آیا در حالت بارگذاری هستید یا نه، و حالت خطا را به دست آورید.

4. React Query + Axios

شما می توانید حتی از کتابخانه های سرویس کلاینت HTTP ساده تر که هیچ ارتباطی با GraphQL ندارند برای واکشی داده های خود استفاده کنید.

در این مورد، می توانید از axios کتابخانه محبوب استفاده کنید. یک بار دیگر می توانید آن را با React Query جفت کنید تا تمام هوک های ویژه و مدیریت استیت را دریافت کنید.

npm install react-query axios

استفاده از یک سرویس کلاینت HTTP مانند Axios برای انجام کوئری از API GraphQL مستلزم انجام یک درخواست POST به نقطه پایانی API شما است. برای داده‌هایی که در درخواست ارسال می‌کنید، یک شی با ویژگی به نام query ارائه می‌دهید که بر روی درخواست فیلم شما تنظیم می‌شود.

با axios، باید کمی اطلاعات بیشتری در مورد نحوه حل این پرامیس ها و بازگرداندن داده های خود اضافه کنید. باید به React Query بگویید داده‌ها کجا هستند تا بتوان آن‌ها را در ویژگی داده‌ای که useQuery برمی‌گرداند قرار داد.

به طور خاص، داده‌ها را در ویژگی داده‌های answer.data برمی‌گردانید:

import React from "react";
import axios from "axios";
import { useQuery } from "react-query";

const endpoint = "https://api.spacex.land/graphql/";
const FILMS_QUERY = `
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, isLoading, error } = useQuery("launches", () => {
    return axios({
      url: endpoint,
      method: "POST",
      data: {
        query: FILMS_QUERY
      }
    }).then(response => response.data.data);
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

5. React Query + Fetch API

ساده ترین راه از همه این رویکردهای مختلف برای واکشی داده، استفاده از React query به همراه fetch API است.

از آنجایی که Fetch API در همه مرورگرهای مدرن گنجانده شده است، نیازی به نصب کتابخانه شخص ثالث ندارید، فقط باید react-query را در برنامه خود نصب کنید.

npm install react-query

هنگامی که کلاینت React Query را در اختیار کل برنامه قرار دادید، فقط می توانید کد axios خود را با fetch تعویض کنید.

چیزی که کمی متفاوت است این است که شما باید هدری را مشخص کنید که شامل نوع محتوای داده‌هایی است که می‌خواهید از درخواست خود بازگردانید. در این مورد، داده های JSON هستند.

همچنین باید شیئی را که به عنوان body ارسال می‌کنید با یک ویژگی query که برای جستجوی فیلم‌های شما تنظیم شده است، رشته‌بندی کنید:

import React from "react";
import axios from "axios";
import { useQuery } from "react-query";

const endpoint = "https://api.spacex.land/graphql/";
const FILMS_QUERY = `
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, isLoading, error } = useQuery("launches", () => {
    return fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query: FILMS_QUERY })
    })
      .then((response) => {
        if (response.status >= 400) {
          throw new Error("Error fetching data");
        } else {
          return response.json();
        }
      })
      .then((data) => data.data);
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

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

این بدان معنی است که درخواست شما با یک خطا حل می شود. اگر اینطور است، باید به صورت دستی یک خطا پرتاب کنید، که توسط هوک useQuery شما شناسایی می شود. در غیر این صورت، اگر یک پاسخ 200 یا 300 است، به این معنی که درخواست موفقیت آمیز بوده است، به سادگی داده های JSON را برگردانید و آن را نمایش دهید.

مزایای ادغام React با GraphQL

ادغام React با GraphQL چندین مزیت را برای فرآیند توسعه و عملکرد برنامه به ارمغان می آورد.

واکشی کارآمد داده ها

برنامه‌های React با استفاده از بهینه‌سازی کوئری و قابلیت‌های انتخابی داده‌ها در GraphQL می‌توانند به طور موثر فقط داده‌های مورد نیاز را از سرور بازیابی کنند، سربار غیرضروری شبکه را کاهش داده و عملکرد را بهبود می‌بخشند.

تایپ و اعتبارسنجی قوی

سیستم نوع GraphQL تضمین می کند که کلاینت و سرور هر دو درک مشترکی از طرح داده دارند. این امکان تشخیص زودهنگام مسائل مربوط به داده ها را فراهم می کند و مکانیزم اعتبارسنجی قوی را فراهم می کند و احتمال خطاهای زمان اجرا را کاهش می دهد.

کاهش بیش از حد واکشی

یکی از مشکلات رایج در API های RESTful واکشی بیش از حد است، که در آن سرور اطلاعات بیشتری از نیاز کلاینت ارسال می کند. GraphQL این مشکل را با اجازه دادن به کلاینت‌ها برای تعیین دقیق داده‌هایی که نیاز دارند برطرف می‌کند و منجر به استفاده کارآمدتر از شبکه می‌شود.

نتیجه

این مقاله به نشان دادن تعدادی از رویکردهای مختلف برای واکشی موثر داده ها از API GraphQL با React اختصاص داشت. از این گزینه‌ها، امیدوارم بتوانید ارزیابی کنید که کدام یک برای شما و برنامه‌های کاربردی شما مناسب‌تر است. و اکنون کدهای مفیدی دارید که به شما امکان می‌دهد خیلی سریع‌تر از این ابزارها و کتابخانه‌ها استفاده کنید. ادغام React با GraphQL مزایای بی شماری را برای توسعه برنامه های کاربردی وب ارائه می دهد. با استفاده از کارایی قابلیت‌های واکشی و دستکاری داده‌های GraphQL و انعطاف‌پذیری مدل کامپوننت رابط کاربری React، توسعه‌دهندگان می‌توانند برنامه‌های کاربردی قدرتمند و کاربردی ایجاد کنند.