پیاده سازی GraphQL در برنامه های React

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

راه اندازی سرور GraphQL

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

برای نصب سرور آپولو دستور زیر را اجرا کنید:

npm install apollo-server

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

در اینجا نمونه ای از طرحواره آمده است:

type Query {
  hello: String
}

و نمونه ای از حل کننده

const resolvers = {
  Query: {
    hello: () => 'Hello world!'
  }
};

سپس می توانیم یک نمونه سرور آپولو را راه اندازی کنیم و شروع به گوش دادن به درخواست ها کنیم:

const { ApolloServer } = require('apollo-server');

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

نوشتن پرس و جو

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

برای نصب Apollo Client دستور زیر را اجرا کنید:

npm install @apollo/client

سپس می توانیم یک نمونه مشتری بسازیم و از آن استفاده کنیم useQuery برای ارسال پرس و جو و دریافت داده قلاب کنید:

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

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache()
});

const GET_HELLO = gql`
  query {
    hello
  }
`;

function Hello() {
  const { loading, error, data } = useQuery(GET_HELLO);

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

  return <p>{data.hello}</p>;
}

این مثال سرور GraphQL را پرس و جو می کند و پاسخ را نمایش می دهد. هنگامی که داده ها تغییر می کنند، قلاب useQuery به طور خودکار آن را واکشی می کند و UI را به روز می کند.

کش داده ها

یکی از مزایای استفاده از Apollo Client این است که دارای حافظه پنهان برای ذخیره و استفاده مجدد از داده ها است. این می تواند به طور قابل توجهی عملکرد را بهبود بخشد و همچنین ترافیک شبکه را کاهش دهد.

برای نشان دادن حافظه پنهان، بیایید مثال قبلی را تغییر دهیم تا پرسش hello را دو بار واکشی کنیم:

function HelloTwice() {
  const { loading, error, data } = useQuery(GET_HELLO, { fetchPolicy: 'cache-and-network' });

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

  return (
    <div>
      <p>{data.hello}</p>
      <p>{data.hello}</p>
    </div>
  );
}

را تنظیم کردیم fetchPolicy گزینه ای به "cache-and-network"، که به Apollo Client دستور می دهد که ابتدا سعی کند داده ها را از حافظه پنهان واکشی کند و در صورت عدم موفقیت یا قدیمی بودن داده ها، آن را از شبکه واکشی کند. اگر داده ها از قبل در حافظه پنهان هستند، می توانیم از درخواست شبکه غیر ضروری جلوگیری کنیم.

نتیجه

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

اگر می خواهید درباره GraphQL و React اطلاعات بیشتری کسب کنید، توصیه می کنم اسناد Apollo را مطالعه کنید که شامل دستورالعمل ها و مثال های گام به گام برای استفاده از Apollo Client و Apollo Server است. از کدنویسی لذت ببرید!