hygraph examples下載 - hygraph examples源代碼下載

hygraph examples

Ai源碼

1.0.0

下載

Hygraph示例

示例項目以幫助您開始使用Hygraph

使用此存儲庫

此存儲庫中的所有示例都使用同一Hygraph項目。克隆它開始：

在與您自己的Hygraph Project在本地使用此倉庫時，您需要將以下內容添加到.env ：

 HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN =

示例我們只查詢數據將進行硬碼HYGRAPH_ENDPOINT ，以使您在本地或在codesandbox上使用該示例。

例子

Hygraph Content API功能和食譜

演示如何使用Hygraph功能的示例。

特徵	描述
使用資產上傳	使用資產上傳端點編程上傳資產
使用管理SDK（視頻）	基本管理SDK腳本以創建模式。
使用遠程字段（視頻）	基本管理SDK腳本以創建帶有遠程字段的模式直接從Stripe API查詢數據
使用突變（演示，視頻）	next.js應用程序演示如何使用`graphql-request` ， `SWR`和api路由使用hygraph突變
使用分頁（演示，視頻）	next.js應用程序演示如何使用`graphql-request`拼寫hygraph查詢
使用豐富的文本渲染器（演示，視頻）	next.js應用程序演示如何使用`@graphcms/rich-text-react-renderer`渲染豐富的文本
使用聯合類型	使用聯合類型的基本產品營銷網站與組件組成UI“塊”。由Next.js， `graphql-request`和Tailwind CSS構建

框架和圖書館

示例演示瞭如何將Hygraph與流行的應用程序框架一起使用。

框架和圖書館	描述
Algolia（Demo，[Video] [Video6]）	使用Next.js API路由在發佈時通過Webhooks將內容同步到Algolia。
阿波羅客戶端3（演示，視頻）	使用Apollo客戶端3查詢Hygraph的數據。
阿波羅服務器（演示，視頻）	使用`apollo-datasource-graphql`將Hygraph模式拉入現有的Apollo服務器
Express（演示，視頻）	使用`ejs`模板和`awesome-graphql-client`簡單快遞應用程序
蓋茨比（演示）	一個基本的Gatsby網站，使用`gatsby-source-graphcms`構建與Hygraph數據的產品頁面
蓋茨比（文件系統路由API）（演示，視頻）	一個基本的蓋茨比網站，使用`gatsby-source-graphcms`使用蓋茨比的文件系統路由API構建產品頁面
蓋茨比圖像（演示，視頻）	如何使用Hygraph資產使用`gatsby-image`
[Hygraph Image]（演示，視頻）	如何將[ `@graphcms/react-image` ]與gatsby一起使用
GraphQl Codegen（演示）	使用GraphQl代碼生成器自動為Hygraph Project生成26個類型
架構縫線（帶GraphQl網格）	針跡3 GraphQl API與GraphQl網格
網格（演示，視頻）	使用`gridsome create` CLI和`@gridsome/source-graphql`基本示例
MDX（與Gatsby）（演示，視頻）	如何將`gatsby-plugin-mdx`與Hygraph的`RichText`字段一起使用。
MDX（帶有Next.js）（演示，視頻）	此示例演示瞭如何在Next.js中使用`MDX`的Hygraph中使用Markdown字段
next.js（演示，視頻）	基本的Next.js應用程序，其中包含`getStaticProps`和`getStaticPaths`來構建靜態產品頁面
next.js i18n路由（演示，視頻）	如何使用Next.js國際化路由與Hygraph內容
next.js圖像（演示，視頻）	如何使用Next.js圖像組件與Hygraph Assets
Next.js圖像帶有自定義加載程序（演示，視頻）	如何使用Next.js Image組件和Hygraph Assets使用自定義加載程序函數
nuxt.js（演示，視頻）	一個簡單的NUXT.JS啟動器，使用`create-nuxt-app` CLI帶有尾風，添加了Axios
NUXT3 + NUXT-GRAPHQL-CLIENT（DEMO）	使用`nuxt-graphql-client`模塊的簡單NUXT.JS啟動器
React.js（演示，視頻）	此示例演示瞭如何使用react.js中的graphql-request從hygraph查詢。
react.js與React查詢	此示例演示瞭如何在react.js中與React查詢查詢。
vue.js（演示，視頻）	使用`vue create` CLI與Vue路由器的Vanilla Vue.js啟動器
Sveltekit（演示，視頻）	使用sveltekit和`graphql-request`獲取數據的典型示例
Sveltekit與URQL（演示）	Sveltekit示例urql獲取數據
高度（演示）	使用`graphql-request`獲取數據的高度示例。
Astro（演示）	使用`graphql-request`獲取數據的Astro示例。
香草JS（演示）	在沒有框架的情況下查詢瀏覽器，只需使用fetch API即可。
Nextauth（演示）	使用NextAuth.js進行身份驗證，並使用Hygraph更新帳戶信息。
Houdini（演示）	Sveltekit的Houdini示例。
迅速	一個本地Swift（iOS＆Mac）示例。
Swift與`swift-graphql`	使用Swift-GraphQL的本機Swift（iOS＆Mac）示例。

UI擴展

我們製作了一些示例UI擴展名，供您開始。這些應該顯示如何使用自己的自定義組件擴展Hygraph UI。

姓名	類型	SDK	描述
Quickstart	輸入	反應	基本`<input />`顯示如何使用UI擴展。
雲	輸入	反應	自定義的雲資產選擇器。
焦點	輸入	JavaScript	自定義焦點選擇器。
拜恩	輸入	JavaScript	使用緊湊型視圖V2組件從Bynder瀏覽資產。
條件字段	輸入	打字稿	UI擴展顯示如何更改其他字段的可見性並使用FieldConfig。