hygraph examples
1.0.0
Contoh proyek untuk membantu Anda memulai dengan hygraph
Semua contoh dalam repo ini menggunakan proyek Hygraph yang sama. Kloning untuk memulai:
Saat bekerja dengan repo ini secara lokal dengan proyek Hygraph Anda sendiri, Anda harus menambahkan yang berikut ini ke .env Anda:
HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN = Contoh di mana kami hanya meminta data akan menggunakan kode HYGRAPH_ENDPOINT untuk membuat Anda menggunakan contoh secara lokal, atau di CodeSandBox.
Contoh menunjukkan cara menggunakan fitur Hygraph.
| Fitur | Keterangan |
|---|---|
| Menggunakan unggahan aset | Unggah aset secara terprogram menggunakan titik akhir unggahan aset |
| Menggunakan Manajemen SDK (Video) | Manajemen dasar skrip SDK untuk membuat skema. |
| Menggunakan bidang jarak jauh (video) | Manajemen Dasar Skrip SDK untuk membuat skema dengan bidang jarak jauh untuk meminta data langsung dari API Stripe |
| Menggunakan mutasi (demo, video) | SWR selanjutnya graphql-request |
| Menggunakan pagination (demo, video) | Aplikasi selanjutnya graphql-request |
| Menggunakan renderer teks kaya (demo, video) | Aplikasi selanjutnya @graphcms/rich-text-react-renderer |
| Menggunakan tipe serikat | Situs pemasaran produk dasar menggunakan jenis serikat untuk menyusun 'blok' UI dengan komponen. Dibangun dengan Next.js, graphql-request dan Tailwind CSS |
Contoh yang menunjukkan cara menggunakan Hygraph dengan kerangka kerja aplikasi populer.
| Kerangka & Perpustakaan | Keterangan |
|---|---|
| Algolia (demo, [video] [Video6]) | Sinkronkan konten ke algolia melalui webhooks di publikasi menggunakan rute API next.js. |
| Apollo Client 3 (demo, video) | Menggunakan Apollo Client 3 untuk meminta data dari Hygraph. |
| Server Apollo (demo, video) | Menggunakan apollo-datasource-graphql untuk menarik skema hygraph ke server Apollo yang ada |
| Express (demo, video) | Aplikasi Express Sederhana Menggunakan ejs Templating dan awesome-graphql-client |
| Gatsby (demo) | Situs Gatsby Dasar yang menggunakan gatsby-source-graphcms untuk membangun halaman produk dengan data dari Hygraph |
| Gatsby (File System Route API) (demo, video) | Situs Gatsby Dasar yang Menggunakan gatsby-source-graphcms untuk Membangun Halaman Produk Menggunakan API Rute Sistem File Gatsby |
| Gambar Gatsby (demo, video) | Cara menggunakan gatsby-image dengan aset hygraph |
| [Gambar Hygraph] (demo, video) | Cara menggunakan [ @graphcms/react-image ] dengan gatsby |
| Graphql Codegen (Demo) | Jenis Generate26 Secara Otomatis Untuk Proyek Hygraph Anda dengan Generator Kode GraphQL |
| Jahitan skema (dengan graphql mesh) | Jahit 3 graphql apis menjadi satu dengan graphql mesh |
| Gridsome (demo, video) | Contoh Dasar Menggunakan gridsome create CLI dan @gridsome/source-graphql |
| MDX (dengan Gatsby) (demo, video) | Cara menggunakan gatsby-plugin-mdx dengan bidang RichText dari hygraph. |
| Mdx (dengan next.js) (demo, video) | Contoh ini menunjukkan cara menggunakan bidang penurunan harga dari Hygraph dengan MDX di Next.js |
| Next.js (demo, video) | Aplikasi Dasar Next.js, menampilkan getStaticProps dan getStaticPaths untuk membangun halaman produk statis |
| Routing Next.js I18n (Demo, Video) | Cara menggunakan routing internasional selanjutnya.js dengan konten hygraph |
| Gambar Next.js (Demo, Video) | Cara menggunakan komponen gambar selanjutnya.js dengan aset hygraph |
| Gambar Next.js dengan Loader Kustom (Demo, Video) | Cara menggunakan fungsi pemuatan kustom dengan komponen gambar selanjutnya.js dan aset hygraph |
| Nuxt.js (demo, video) | Starter nuxt.js sederhana menggunakan create-nuxt-app CLI dengan Tailwind dan Axios ditambahkan |
| Nuxt3 + nuxt-graphql-client (demo) | Starter nuxt.js sederhana menggunakan modul nuxt-graphql-client |
| React.js (demo, video) | Contoh ini menunjukkan cara menanyakan dari hygraph dengan graphql-request di react.js |
| Bereaksi.js dengan kueri bereaksi | Contoh ini menunjukkan cara permintaan dari hygraph dengan permintaan reaksi di react.js |
| Vue.js (demo, video) | Starter vanilla vue.js menggunakan vue create cli dengan vue router |
| Sveltekit (demo, video) | Contoh langsing menggunakan Sveltekit dan graphql-request untuk mengambil data |
| Sveltekit dengan URQL (demo) | Contoh SVELTEKIT URQL untuk mengambil data |
| Sebelas (demo) | Contoh Eleventy Menggunakan graphql-request untuk mengambil data. |
| Astro (demo) | Contoh Astro menggunakan graphql-request untuk mengambil data. |
| Vanilla JS (demo) | Permintaan di browser tanpa kerangka kerja, cukup gunakan API fetch. |
| NextAuth (demo) | Otentikasi dengan nextAuth.js dan perbarui info akun dengan Hygraph. |
| Houdini (demo) | Contoh Houdini dengan Sveltekit. |
| Cepat | Contoh Swift (iOS & Mac) asli. |
Swift dengan swift-graphql | Contoh Swift (iOS & Mac) asli menggunakan Swift-Graphql. |
Kami telah membuat beberapa contoh ekstensi UI untuk Anda mulai. Ini harus menunjukkan cara memperluas UI Hygraph dengan komponen khusus Anda sendiri.
| Nama | Jenis | SDK | Keterangan |
|---|---|---|---|
| QuickStart | Masukan | Bereaksi | <input /> dasar yang menunjukkan cara menggunakan ekstensi UI. |
| Cloudinary | Masukan | Bereaksi | Pemetik aset cloudinary khusus. |
| Titik fokus | Masukan | Javascript | Pemetik titik fokus khusus. |
| Bynder | Masukan | Javascript | Jelajahi aset dari Bynder menggunakan komponen v2 v2 compact. |
| Bidang bersyarat | Masukan | Naskah | Ekstensi UI untuk menunjukkan cara mengubah visibilitas untuk bidang lain dan menggunakan FieldConfig. |
Bergabunglah dengan Slack kami · Baca dokumen · Pelajari lebih lanjut tentang Hygraph
Apakah Anda melihat sesuatu yang hilang di atas yang bekerja dengan Anda? Buka permintaan tarik dengan contoh Anda, dan dapatkan ditampilkan di buletin kami! Pelajari lebih lanjut.
