انتقل إلى المحتوى
Numio

تحويل GraphQL إلى مكوّنات React — Numio

يُنشئ شيفرة جلب بيانات مُنمَّطة لكل عملية في لوحة Document: خطافات React Apollo (الافتراضي)، أو خدمات Apollo Angular، أو مكونات Stencil Apollo، أو خطافات urql، مع أنواع TypeScript للمخطط والعمليات.

الحصول على خطافي useXQuery وuseXLazyQuery جاهزين لتطبيق React يستخدم Apollo Client من استعلام كتبته للتو.

GraphQL Schema

Document

متى تستخدمها

  • الحصول على خطافي useXQuery وuseXLazyQuery جاهزين لتطبيق React يستخدم Apollo Client من استعلام كتبته للتو.
  • مقارنة شكل العملية نفسها كخدمة Apollo Angular قابلة للحقن أو كخطاف urql قبل اختيار العميل.

طريقة الاستخدام

  1. الصق المخطط في محرر GraphQL Schema، والصق queries أو mutations أو subscriptions المسمّاة في محرر Document.
  2. اختر الهدف من القائمة المنسدلة للمخرجات: TypeScript React Apollo أو TypeScript Apollo Angular أو TypeScript Stencil Apollo أو TypeScript urql.
  3. انسخ ثابت المستند المُنشأ (مثل GetUserDocument) والخطافات أو الخدمات أو المكونات إلى مشروعك.

مخطط GraphQL + document

# GraphQL Schema editor
type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  name: String
  tags: [String!]!
}

# Document editor
query GetUser($id: ID!) {
  user(id: $id) { id name }
}

مكونات وخطافات TypeScript

import { gql } from "@apollo/client"
import * as Apollo from "@apollo/client"
…
export const GetUserDocument = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
`
…
export function useGetUserQuery(
  baseOptions: Apollo.QueryHookOptions<GetUserQuery, GetUserQueryVariables>,
) {
  const options = { ...defaultOptions, ...baseOptions }
  return Apollo.useQuery<GetUserQuery, GetUserQueryVariables>(
    GetUserDocument,
    options,
  )
}
…

التفاصيل والقيود

يشغّل كل خيار أولًا @graphql-codegen/typescript وtypescript-operations، لذا تحتوي المخرجات أيضًا على أنواع المخطط والعمليات كاملة (محذوفة أعلاه).

يستورد React Apollo الدالة gql والخطافات من @apollo/client؛ ويستورد urql وStencil الدالة gql من graphql-tag؛ ويُنشئ Apollo Angular أصناف @Injectable مثل GetUserGQL.

من دون عملية صالحة في محرر Document لا تُنشأ خطافات ولا مكونات؛ ويُتخطّى المستند الذي لا يطابق المخطط مع تعليق تحذيري. يجري الإنشاء في Web Worker داخل المتصفح.

FAQ

لماذا baseOptions مطلوب في useGetUserQuery؟

للاستعلام متغير غير قابل لـ null ‏($id: ID!)، لذا يتطلب الخطاف المُنشأ options تحتوي على variables. أما الاستعلامات التي لا تحتوي على متغيرات مطلوبة فتحصل على معامل baseOptions اختياري.

هل تتضمن مخرجات React Apollo خطافات الاستعلام الكسول؟

نعم. يُنشئ لكل استعلام useXQuery وuseXLazyQuery إضافة إلى أسماء بديلة لأنواع النتيجة مثل GetUserQueryHookResult وGetUserQueryResult. وتحصل mutations على خطاف useXMutation.

هل يمكنني تغيير خيارات الإضافة مثل withHooks أو مصدر الاستيراد؟

لا. تشغّل الصفحة كل إضافة بإعداداتها الافتراضية ولا توفّر سوى القائمة المنسدلة لهدف المخرجات.

المواصفات والمراجع