hygraph examples
1.0.0
ตัวอย่างโครงการเพื่อช่วยให้คุณเริ่มต้นด้วย Hygraph
ตัวอย่างทั้งหมดใน repo นี้ใช้โครงการ Hygraph เดียวกัน โคลนมันเพื่อเริ่มต้น:
เมื่อทำงานกับ repo นี้ในพื้นที่ด้วยโครงการไฮกรุงของคุณเองคุณจะต้องเพิ่มสิ่งต่อไปนี้ใน .env :
HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN = ตัวอย่างที่เราสอบถามข้อมูลเท่านั้นที่จะใช้รหัสฮาร์ดโค้ด HYGRAPH_ENDPOINT เพื่อให้คุณใช้ตัวอย่างในเครื่องหรือบน codesandbox
ตัวอย่างที่แสดงให้เห็นถึงวิธีการใช้คุณสมบัติ Hygraph
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ใช้การอัปโหลดสินทรัพย์ | อัพโหลดสินทรัพย์โดยใช้โปรแกรมอัพโหลดสินทรัพย์ |
| ใช้การจัดการ SDK (วิดีโอ) | สคริปต์การจัดการพื้นฐาน SDK เพื่อสร้างสคีมา |
| การใช้ฟิลด์ระยะไกล (วิดีโอ) | สคริปต์การจัดการพื้นฐาน SDK เพื่อสร้างสคีมาด้วยฟิลด์ระยะไกลเพื่อสอบถามข้อมูลโดยตรงจาก Stripe API |
| ใช้การกลายพันธุ์ (ตัวอย่างวิดีโอ) | แอป Next.js สาธิตวิธีการใช้การกลายพันธุ์แบบ hygraph กับเส้นทาง graphql-request , SWR และ API |
| การใช้การแบ่งหน้า (ตัวอย่างวิดีโอ) | แอป next.js แสดงให้เห็นถึงวิธีการเพิกถอนการสืบค้น Hygraph ด้วย graphql-request |
| การใช้ Rich Text Renderer (ตัวอย่างวิดีโอ) | แอป next.js สาธิตวิธีแสดงข้อความที่สมบูรณ์ด้วย @graphcms/rich-text-react-renderer |
| ใช้ประเภทสหภาพ | เว็บไซต์การตลาดผลิตภัณฑ์ขั้นพื้นฐานโดยใช้ประเภทยูเนี่ยนเพื่อเขียน 'บล็อก' UI ด้วยส่วนประกอบ สร้างด้วย next.js, graphql-request และ tailwind css |
ตัวอย่างที่แสดงให้เห็นถึงวิธีการใช้ Hygraph กับกรอบแอปพลิเคชันยอดนิยม
| เฟรมเวิร์กและห้องสมุด | คำอธิบาย |
|---|---|
| Algolia (สาธิต, [วิดีโอ] [วิดีโอ 6]) | ซิงค์เนื้อหาไปยัง Algolia ผ่าน WebHooks ในการเผยแพร่โดยใช้เส้นทาง Next.js API |
| Apollo Client 3 (ตัวอย่างวิดีโอ) | การใช้ Apollo Client 3 เพื่อสอบถามข้อมูลจาก Hygraph |
| Apollo Server (ตัวอย่างวิดีโอ) | การใช้ apollo-datasource-graphql เพื่อดึงสคีมาไฮกรดลงในเซิร์ฟเวอร์ Apollo ที่มีอยู่เดิม |
| Express (ตัวอย่างวิดีโอ) | แอพ Express Simple โดยใช้เทมเพลต ejs และ awesome-graphql-client |
| Gatsby (สาธิต) | เว็บไซต์ Gatsby พื้นฐานที่ใช้ gatsby-source-graphcms เพื่อสร้างหน้าผลิตภัณฑ์ด้วยข้อมูลจาก Hygraph |
| Gatsby (เส้นทางระบบไฟล์ API) (ตัวอย่างวิดีโอ) | เว็บไซต์ Gatsby พื้นฐานที่ใช้ gatsby-source-graphcms เพื่อสร้างหน้าผลิตภัณฑ์โดยใช้เส้นทางระบบไฟล์ของ Gatsby |
| Gatsby Image (ตัวอย่างวิดีโอ) | วิธีใช้ gatsby-image กับสินทรัพย์ Hygraph |
| [Hygraph Image] (Demo, Video) | วิธีใช้ [ @graphcms/react-image ] กับ gatsby |
| graphql codegen (ตัวอย่าง) | สร้างประเภท 26 โดยอัตโนมัติสำหรับโครงการ Hygraph ของคุณด้วยเครื่องกำเนิดรหัส GraphQl |
| Schema Stitching (พร้อม graphql mesh) | Stitch 3 graphql apis เป็นหนึ่งเดียวด้วย graphql mesh |
| Gridsome (ตัวอย่างวิดีโอ) | ตัวอย่างพื้นฐานที่ใช้ gridsome create CLI และ @gridsome/source-graphql |
| MDX (พร้อม Gatsby) (ตัวอย่างวิดีโอ) | วิธีใช้ gatsby-plugin-mdx กับฟิลด์ RichText จาก Hygraph |
| MDX (ด้วย next.js) (ตัวอย่างวิดีโอ) | ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ฟิลด์ Markdown จาก Hygraph กับ MDX ใน next.js |
| next.js (ตัวอย่างวิดีโอ) | แอปพลิเคชัน Next.js พื้นฐานที่มี getStaticProps และ getStaticPaths เพื่อสร้างหน้าผลิตภัณฑ์แบบคงที่ |
| Next.js i18n Routing (Demo, Video) | วิธีใช้การกำหนดเส้นทาง next.js เป็นสากลด้วยเนื้อหา Hygraph |
| Next.js Image (ตัวอย่างวิดีโอ) | วิธีการใช้ส่วนประกอบรูปภาพ next.js ด้วยสินทรัพย์ Hygraph |
| Next.js Image พร้อมตัวโหลดที่กำหนดเอง (ตัวอย่างวิดีโอ) | วิธีใช้ฟังก์ชั่นโหลดเดอร์แบบกำหนดเองกับส่วนประกอบรูปภาพ next.js และสินทรัพย์ Hygraph |
| nuxt.js (ตัวอย่างวิดีโอ) | ตัวเริ่มต้น nuxt.js ง่าย ๆ โดยใช้ create-nuxt-app cli พร้อม tailwind และ axios เพิ่ม |
| nuxt3 + nuxt-graphql-client (ตัวอย่าง) | ตัวเริ่มต้น nuxt.js อย่างง่ายโดยใช้โมดูล nuxt-graphql-client |
| React.js (ตัวอย่างวิดีโอ) | ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสืบค้นจาก hygraph ด้วย graphql-request ใน react.js |
| react.js ด้วย react query | ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสืบค้นจาก hygraph ด้วย react query ใน react.js |
| vue.js (ตัวอย่างวิดีโอ) | Vanilla Vue.js Starter โดยใช้ vue create CLI ด้วย Vue เราเตอร์ |
| sveltekit (ตัวอย่างวิดีโอ) | ตัวอย่าง svelte ที่ใช้ sveltekit และ graphql-request ให้ดึงข้อมูล |
| sveltekit กับ urql (สาธิต) | ตัวอย่าง sveltekit urql เพื่อดึงข้อมูล |
| ELEVETY (ตัวอย่าง) | ตัวอย่างที่สิบเอ็ดโดยใช้ graphql-request เพื่อดึงข้อมูล |
| Astro (สาธิต) | ตัวอย่าง Astro โดยใช้ graphql-request เพื่อดึงข้อมูล |
| วานิลลา JS (สาธิต) | แบบสอบถามในเบราว์เซอร์ที่ไม่มีเฟรมเวิร์กให้ใช้ API Fetch |
| Nextauth (สาธิต) | รับรองความถูกต้องด้วย nextauth.js และอัปเดตข้อมูลบัญชีด้วย Hygraph |
| ฮูดินี่ (สาธิต) | ตัวอย่างฮูดินี่กับ sveltekit |
| ฉับพลัน | ตัวอย่าง Swift (iOS & Mac) |
Swift ด้วย swift-graphql | ตัวอย่าง Native Swift (iOS & Mac) โดยใช้ Swift-GraPhql |
เราได้สร้างตัวอย่างส่วนขยาย UI ให้คุณเริ่มต้นด้วย สิ่งเหล่านี้ควรแสดงวิธีการขยาย Hygraph UI ด้วยส่วนประกอบที่คุณกำหนดเอง
| ชื่อ | พิมพ์ | SDK | คำอธิบาย |
|---|---|---|---|
| เร็ว | ป้อนข้อมูล | ตอบโต้ | <input /> แสดงวิธีใช้ส่วนขยาย UI |
| เป็นเมฆ | ป้อนข้อมูล | ตอบโต้ | ตัวเลือกสินทรัพย์เมฆที่กำหนดเอง |
| จุดโฟกัส | ป้อนข้อมูล | จาวาสคริปต์ | ตัวเลือกจุดโฟกัสแบบกำหนดเอง |
| Bynder | ป้อนข้อมูล | จาวาสคริปต์ | เรียกดูสินทรัพย์จาก Bynder โดยใช้คอมโพเนนต์มุมมองขนาดกะทัดรัด V2 |
| เขตข้อมูลเงื่อนไข | ป้อนข้อมูล | ตัวพิมพ์ใหญ่ | ส่วนขยาย UI เพื่อแสดงวิธีการเปลี่ยนการมองเห็นสำหรับฟิลด์อื่น ๆ และใช้ FieldConfig |
เข้าร่วม Slack ·อ่านเอกสาร·เรียนรู้เพิ่มเติมเกี่ยวกับ Hygraph
คุณเห็นสิ่งที่ขาดหายไปข้างต้นที่คุณกำลังทำงานด้วยหรือไม่? เปิดคำขอดึงด้วยตัวอย่างของคุณและให้ความสำคัญในจดหมายข่าวของเรา! เรียนรู้เพิ่มเติม
