hygraph examples
1.0.0
مثال على المشاريع لمساعدتك في البدء في Hygraph
جميع الأمثلة في هذا الريبو تستخدم نفس مشروع الرطوبة. استنساخها للبدء:
عند العمل مع هذا الريبو محليًا مع مشروع الرطوبة الخاص بك ، ستحتاج إلى إضافة ما يلي إلى .env :
HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN = الأمثلة التي نستفسر عنها فقط للبيانات سوف ترمز إلى HYGRAPH_ENDPOINT لجعلك تستخدم المثال محليًا ، أو على codesandbox.
أمثلة توضح كيفية استخدام ميزات الرطوبة.
| سمات | وصف |
|---|---|
| باستخدام تحميل الأصول | تحميل الأصول برمجيا باستخدام نقطة نهاية تحميل الأصول |
| باستخدام إدارة SDK (فيديو) | SDK SDK SDK لإنشاء مخطط. |
| باستخدام الحقول البعيدة (فيديو) | البرنامج النصي SDK الإدارة الأساسية لإنشاء مخطط مع حقول عن بُعد للاستعلام عن البيانات مباشرة من API Stripe API |
| باستخدام الطفرات (العرض التوضيحي ، الفيديو) | تطبيق Next.js يوضح كيفية استخدام طفرات الرطوبة مع طرق graphql-request و SWR و API |
| باستخدام ترقيم الصفحات (العرض التوضيحي ، الفيديو) | تطبيق Next.js يوضح كيفية تراجع استعلامات الرطوبة مع graphql-request |
| باستخدام عارض النص الغني (العرض التوضيحي ، الفيديو) | تطبيق Next.js يوضح كيفية تقديم نص غني باستخدام @graphcms/rich-text-react-renderer |
| باستخدام أنواع النقابات | موقع تسويق المنتج الأساسي باستخدام أنواع النقابات لتكوين "كتل" واجهة المستخدم مع المكونات. بنيت مع next.js ، graphql-request و tailwind css |
أمثلة توضح كيفية استخدام Hygraph مع أطر التطبيق الشعبية.
| الأطر والمكتبات | وصف |
|---|---|
| Algolia (Demo ، [video] [video6]) | مزامنة المحتوى إلى Algolia عبر WebHooks على النشر باستخدام طرق API Next.js. |
| عميل Apollo 3 (العرض التوضيحي ، فيديو) | باستخدام عميل Apollo 3 للاستعلام عن البيانات من Hygraph. |
| Apollo Server (العرض التوضيحي ، الفيديو) | باستخدام apollo-datasource-graphql لسحب مخطط الرطوبة إلى خادم Apollo موجود |
| Express (Demo ، Video) | تطبيق Express بسيط يستخدم ejs Templating و awesome-graphql-client |
| غاتسبي (العرض التوضيحي) | موقع Gatsby أساسي يستخدم gatsby-source-graphcms لإنشاء صفحات المنتج مع بيانات من Hygraph |
| GATSBY (API API) GATSBY (العرض التوضيحي ، الفيديو) | موقع Gatsby أساسي يستخدم gatsby-source-graphcms لإنشاء صفحات المنتجات باستخدام API لنظام ملفات Gatsby |
| صورة غاتسبي (العرض التوضيحي ، فيديو) | كيفية استخدام gatsby-image مع أصول الرطوبة |
| [صورة HAGRAPH] (العرض التوضيحي ، فيديو) | كيفية استخدام [ @graphcms/react-image ] مع Gatsby |
| GraphQL Codegen (Demo) | قم بإنشاء أنواع 26 تلقائيًا لمشروع Hygraph الخاص بك مع مولد رمز GraphQL |
| خياطة المخطط (مع شبكة GraphQL) | Stitch 3 GraphQL APIs في واحد مع شبكة GraphQL |
| شبكات (تجريبي ، فيديو) | مثال أساسي باستخدام gridsome create CLI و @gridsome/source-graphql |
| MDX (مع Gatsby) (العرض التوضيحي ، فيديو) | كيفية استخدام gatsby-plugin-mdx مع حقول RichText من Hygraph. |
| MDX (مع Next.js) (العرض التوضيحي ، فيديو) | يوضح هذا المثال كيفية استخدام حقول التخفيض من Hygraph مع MDX في Next.js |
| next.js (العرض التوضيحي ، فيديو) | تطبيق Next.js أساسي ، يضم getStaticProps و getStaticPaths لإنشاء صفحات منتجات ثابتة |
| Next.js i18n التوجيه (العرض التوضيحي ، الفيديو) | كيفية استخدام Next.js التوجيه الدولي مع محتوى الرطوبة |
| صورة Next.js (العرض التوضيحي ، فيديو) | كيفية استخدام مكون صورة next.js مع أصول الرطوبة |
| صورة Next.js مع مخصص لوادر (العرض التوضيحي ، الفيديو) | كيفية استخدام دالة لوادر مخصصة مع مكون صورة next.js وأصول السطورة |
| nuxt.js (العرض التوضيحي ، فيديو) | بداية بسيطة nuxt.js باستخدام create-nuxt-app cli مع windwind و axios المضافة |
| NUXT3 + NUXT-GRAPHQL-CLIENT (DEMO) | بداية بسيطة nuxt.js باستخدام وحدة nuxt-graphql-client |
| React.js (العرض التوضيحي ، فيديو) | يوضح هذا المثال كيفية الاستعلام من Hygraph مع GraphQL-request في React.js |
| React.js مع استعلام رد الفعل | يوضح هذا المثال كيفية الاستعلام من Hygraph مع React Query في React.js |
| vue.js (العرض التوضيحي ، فيديو) | بداية Vanilla Vue.js باستخدام vue create CLI مع Vue Router |
| Sveltekit (العرض التوضيحي ، فيديو) | مثال على ذلك باستخدام Sveltekit و graphql-request لجلب البيانات |
| Sveltekit مع URQL (العرض التوضيحي) | مثال على ذلك urql لجلب البيانات |
| رفيعين (تجريبي) | مثال مرتفع باستخدام graphql-request لجلب البيانات. |
| Astro (العرض التوضيحي) | مثال Astro باستخدام graphql-request لجلب البيانات. |
| الفانيليا JS (العرض التوضيحي) | الاستعلام في المتصفح بدون أطر عمل ، فقط استخدم API Fetch. |
| Nextauth (العرض التوضيحي) | المصادقة مع Nextauth.js وتحديث معلومات الحساب مع Hygraph. |
| هوديني (العرض التوضيحي) | مثال هوديني مع سفيلتيكيت. |
| سريع | مثال سويفت الأصلي (iOS & MAC). |
سريع مع swift-graphql | مثال Swift (iOS & Mac) الأصلي باستخدام Swift-GraphQl. |
لقد صاغنا بعض الأمثلة على ملحقات واجهة المستخدم لكي تبدأ معها. يجب أن تُظهر هذه كيفية تمديد واجهة مستخدم Hygraph مع مكوناتك المخصصة.
| اسم | يكتب | SDK | وصف |
|---|---|---|---|
| Quickstart | مدخل | رد فعل | أساسي <input /> يوضح كيفية استخدام ملحقات واجهة المستخدم. |
| تافهة | مدخل | رد فعل | منتقي الأصول المخصصة المخصصة. |
| نقطة بؤرية | مدخل | جافا سكريبت | منتقي نقطة محورية مخصصة. |
| بيندر | مدخل | جافا سكريبت | تصفح الأصول من Bynder باستخدام مكون V2 Compact V2. |
| الحقول الشرطية | مدخل | TypeScript | ملحق واجهة المستخدم لإظهار كيفية تغيير الرؤية للحقول الأخرى واستخدام FieldConfig. |
انضم إلى Slack · اقرأ المستندات · تعرف على المزيد حول Hygraph
هل ترى شيئًا مفقودًا أعلاه الذي تعمل معه؟ افتح طلب سحب مع مثالك ، واحصل عليه في النشرة الإخبارية! يتعلم أكثر.
