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。