Woovi چگونه از Relay استفاده می کند؟ – انجمن DEV

رله چیست؟

اگر به relay.dev نگاه کنید، Relay کلاینت GraphQL است که با شما مقیاس می شود. این تعریف ساده است و Relay را به خوبی برای کسانی تعریف می‌کند که از قبل همه ویژگی‌هایی را که Relay به جدول می‌آورد می‌دانند.

برای کسانی که هنوز از Relay استفاده می‌کنند یا هنوز تمام مزایای استفاده از Relay را درک نمی‌کنند، این مقاله نمونه‌های عملی از نحوه استفاده Woovi از Relay برای مقیاس‌بندی backend و frontend ارائه می‌دهد.

معماری رله

رله توسط بسته های زیادی تشکیل شده است. درک هر بسته می تواند به شما در درک نحوه عملکرد Relay کمک کند.

کامپایلر رله

Relay Compiler تمام عملیات GraphQL (پرس و جوها، جهش ها، اشتراک ها) و قطعات را می خواند. آن را تجزیه، تبدیل و بهینه سازی می کند.

می‌توانید با برخی از تبدیل‌های Relay Compiler در اینجا Relay Compiler Repl بازی کنید.

همچنین یک Relay Compiler Explorer جدید نیز وجود دارد

کامپایلر رله همچنین قطعات GraphQL را برای فعال کردن متغیرها در سطح قطعه پر می کند، زیرا GraphQL هنوز از متغیرها در سطح قطعه پشتیبانی نمی کند.

Relay Compiler همچنین اطمینان حاصل می کند که همه چیز درست است، شما نمی توانید یک جستجوی شکسته را برای تولید ارسال کنید، حتی کامپایل نمی شود.

خروجی این بهینه سازی از AST استفاده می کند و روی آن ذخیره می شود __generated__ پوشه ها می توانید GraphQL AST را با استفاده از AST Explorer کاوش کنید.

babel-plugin-relay

Relay یک پلاگین babel را ارائه می دهد که جایگزین آن می شود graphql برچسب برای نیاز به پرس و جو استاتیک ایجاد شده توسط Relay Compiler ایجاد شده است.

در اینجا نمونه ای از این تحول آورده شده است

const user = useFragment(
    graphql`
      fragment App_user on User {
        app
      }
    `,
    props.user,
  );

تبدیل به

const user = useFragment(require('./__generated__/App_user.graphql.ts'),
    props.user,
  );

ابزار تست رله

ما از Relay Test Utils در تست های یکپارچه سازی خود در frontend استفاده می کنیم. مسخره کردن محیط Relay و هر پرس و جو یا فیلد GraphQL را بسیار آسان می کند.

در زیر نمونه‌ای از حل‌کننده ساختگی آورده شده است که به ابزارهای تست رله می‌گوید همه را مسخره کنند User برای داشتن نام Woovi. نیازی نیست که کل عملیات GraphQL را مسخره کنم، فقط فیلدهایی را که برای تست من معنی دارند. تعداد وسایل را بسیار کاهش می دهد.

const mockResolver = {
   User: () => ({ name: 'Woovi'}),
};

زمان اجرا رله

Relay Runtime بخش اصلی Relay است. نحوه انجام درخواست‌ها (لایه شبکه) توسط Relay را بررسی می‌کند، و می‌گوید که چگونه Relay داده‌ها را ذخیره می‌کند. همچنین جهش ها و اشتراک ها را کنترل می کند.

اگر می خواهید Relay را به angular یا vue پورت کنید، فقط Relay Runtime را انتخاب کرده و چارچوب مورد علاقه خود را در بالای آن اضافه کنید.

رله واکنش

این اتصالات React برای Relay Runtime است.
از زمان Relay Classic به Relay Modern بسیار تکامل یافته است و اکنون Relay Hooks با پشتیبانی از Suspense و رندر در حین واکشی است.

قلاب رله بهترین DX را ارائه می دهد. useFragment اجازه می‌دهید اعلام کنید که اجزای شما به چه داده‌هایی نیاز دارند، و Relay متوجه می‌شود که چگونه این داده‌ها را از فروشگاه به آن مؤلفه بیاورد؟ از شبکه؟ شما لازم نیست به آن اهمیت دهید

useMutation جهش‌های GraphQL را اجرا می‌کند و همچنین اطمینان می‌دهد که آنها را دوبار اجرا نمی‌کنید، بنابراین لازم نیست وقتی کاربر دو بار یا بیشتر روی دکمه فرم کلیک می‌کند نگران باشید.

رندر جزئی

یکی از ویژگی های منحصر به فرد Relay این است که اجزای شما را بر اساس داده های موجود در فروشگاه شما به صورت جزئی ارائه می کند.

<>
  <PostTitle post={post} />
  <Suspense>
     <PostComments post={post} />
  </Suspense>
</>

تصور کنید که قبلا دارید post.title در فروشگاه Relay خود، اما ندارید post.comments.
رله قادر به ارائه خواهد بود <PostTitle /> جزء، و آن را به حالت تعلیق در خواهد آورد <PostComments /> تا زمانی که نظرات پست را دریافت کند. این اولین تجربه رندر سریعتر و UX بهتری را برای کاربران ما فراهم می کند.

رله در Backend

ما همچنین از Relay در Backend استفاده می کنیم.

ما از Relay Compiler برای کامپایل و تولید انواع پرس‌و‌جوها/جهش‌ها/اشتراک‌های تست‌های خود در backend استفاده می‌کنیم. این گردش کار تست Typeafe و DX بهتر و اثبات نتایج آزمایش های GraphQL را ارائه می دهد.

در اینجا کدی وجود دارد که نحوه استفاده از آن را نشان می دهد:

const graphql = (strings: TemplateStringsArray) => {
  if (strings?.schema) {
    throw new Error('use graphqlExecute');
  }

  return strings[0];
};

export const graphqlExecute = async <T extends OperationType>(
  args: GraphQLArgs<T['variables']>,
) => {
  const result = await graphql(args);

  return result as unknown as ExecutionResult<T['response']>;
};

const source = graphql`
  query AppQuery($id: ID) {
    user: node(id: $id) {
      ... on User {
        name
     }
   }
  } 
`;

const result = await graphqlExecute<AppQuery>({
    schema,
    source,
    rootValue,
    contextValue,
    variableValues,
  });

AppQuery نوع توسط Relay Compiler تولید می شود و result نوع صحیح آن را دارد، اگر پرس و جو را تغییر دهید، آن را تغییر خواهد داد result نوع این یک DX عالی است.

رله بیشتر در Woovi

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

در نتیجه

اولین مشارکت من در Relay در 15 دسامبر 2015 بود، آن را اینجا بررسی کنید https://github.com/facebookarchive/relay-starter-kit/commits?author=sibelius.

از آن زمان، GraphQL و Relay بسیار تکامل یافتند. رله منحنی یادگیری پله‌ای دارد، زیرا از شما می‌خواهد کار درست را انجام دهید، نه ساده‌ترین کار. رله نیاز به یک مدل ذهنی جدید از نحوه برخورد با داده ها در اجزا دارد.

ما به استفاده از Relay بیشتر در Woovi ادامه خواهیم داد تا به ما در مقیاس‌بندی کمک کند.

کارگاه رله

اگر می خواهید Relay را یاد بگیرید بهترین منبع Relay Workshop است. دارای 12 تمرین عملی برای یادگیری پرکاربردترین ویژگی های Relay.

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

اگر می خواهید با ما کار کنید، ما استخدام می کنیم!