hygraph examples
1.0.0
hygraphを始めるのに役立つプロジェクトの例
このレポのすべての例は、同じHygraphプロジェクトを使用しています。それをクローンして開始します：
独自のHygraphプロジェクトでこのレポをローカルで作業する場合、 .envに次のことを追加する必要があります。
HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN =データのみをクエリする例は、 HYGRAPH_ENDPOINTをハードコードして、局所的にサンプルを使用するか、CodeSandboxで実行するようにします。
hygraphの特徴の使用方法を示す例。
| 特徴 | 説明 |
|---|---|
| アセットアップロードの使用 | アセットアップロードエンドポイントを使用して、プログラムでアセットをアップロードします |
| 管理SDK（ビデオ）の使用 | スキーマを作成するための基本管理SDKスクリプト。 |
| リモートフィールドの使用（ビデオ） | Stripe APIから直接データを照会するリモートフィールドを使用してスキーマを作成する基本管理SDKスクリプト |
| 突然変異（デモ、ビデオ）の使用 | next.jsアプリgraphql-request 、 SWR 、およびAPIルートでHygraph変異を使用する方法を示す |
| ページネーションの使用（デモ、ビデオ） | graphql-requestでヒグラフのクエリをページングする方法を示すnext.jsアプリ |
| リッチテキストレンダラー（デモ、ビデオ）の使用 | next.jsアプリ@graphcms/rich-text-react-rendererでリッチテキストをレンダリングする方法を示す |
| 組合タイプの使用 | ユニオンタイプを使用して、コンポーネントを使用してUI「ブロック」を構成する基本的な製品マーケティングサイト。 next.js、 graphql-request 、tailwind cssで構築されています |
人気のあるアプリケーションフレームワークを使用してHygraphを使用する方法を示す例。
| フレームワークとライブラリ | 説明 |
|---|---|
| アルゴリア（デモ、[ビデオ] [ビデオ6]） | next.js APIルートを使用してパブリッシュ上のWebhooksを介してAlgoliaにコンテンツを同期します。 |
| アポロクライアント3（デモ、ビデオ） | Apolloクライアント3を使用して、Hygraphからデータを照会します。 |
| アポロサーバー（デモ、ビデオ） | apollo-datasource-graphqlを使用して、既存のApolloサーバーにHygraphスキーマを引き込みます |
| Express（デモ、ビデオ） | ejsテンプレートとawesome-graphql-clientを使用したシンプルなエクスプレスアプリ |
| ギャツビー（デモ） | gatsby-source-graphcmsを使用して、Hygraphのデータを使用して製品ページを構築する基本的なGatsbyサイト |
| Gatsby（ファイルシステムルートAPI）（デモ、ビデオ） | gatsby-source-graphcmsを使用してGatsbyのファイルシステムルートAPIを使用して製品ページを構築する基本的なギャツビーサイト |
| ギャツビー画像（デモ、ビデオ） | ハイグラフ資産でgatsby-imageを使用する方法 |
| [ハイグラフ画像]（デモ、ビデオ） | ギャツビーで[ @graphcms/react-image ]の使用方法 |
| graphql codegen（デモ） | GraphQLコードジェネレーターを使用して、Hygraphプロジェクトの26型を自動的に生成します |
| スキーマステッチ（GraphQLメッシュ付き） | 3 GraphQl APIをGraphQLメッシュで1つにステッチします |
| Gridsome（デモ、ビデオ） | gridsome createを使用した基本的な例CLIおよび@gridsome/source-graphqlを作成します |
| MDX（ギャツビー付き）（デモ、ビデオ） | HygraphのRichTextフィールドでgatsby-plugin-mdx使用方法。 |
| MDX（with next.js）（デモ、ビデオ） | この例は、hygraphのMDXとnext.jsでマークダウンフィールドを使用する方法を示しています |
| next.js（デモ、ビデオ） | getStaticPropsとgetStaticPathsを備えた基本的なNext.jsアプリケーション。静的製品ページを構築する |
| next.js i18nルーティング（デモ、ビデオ） | hygraphコンテンツを使用したJS Next.js国際化ルーティングの使用方法 |
| next.js画像（デモ、ビデオ） | hygraphアセットを使用したnext.js画像コンポーネントの使用方法 |
| next.jsカスタムローダー付き画像（デモ、ビデオ） | next.jsイメージコンポーネントとhygraphアセットでカスタムローダー関数を使用する方法 |
| nuxt.js（デモ、ビデオ） | TailwindとAxiosを追加したcreate-nuxt-appを使用したシンプルなnuxt.jsスターター |
| nuxt3 + nuxt-graphql-client（demo） | nuxt-graphql-clientモジュールを使用したシンプルなNuxt.jsスターター |
| React.js（デモ、ビデオ） | この例は、React.jsのgraphql-requestを使用してHygraphから照会する方法を示しています |
| React.jsとReactクエリ | この例は、React.jsのReactクエリを使用してHygraphからクエリをする方法を示しています |
| vue.js（デモ、ビデオ） | vue create |
| Sveltekit（デモ、ビデオ） | SvelteKitとgraphql-requestを使用してデータを取得するSvelteの例 |
| urql（デモ）のSveltekit | データを取得するためのsveltekitの例のurql |
| イレブン（デモ） | graphql-requestを使用してデータを取得するための110の例。 |
| アストロ（デモ） | graphql-requestを使用してデータを取得するAstroの例。 |
| バニラJS（デモ） | フレームワークのないブラウザでクエリを使用して、Fetch APIを使用してください。 |
| nextauth（デモ） | nextauth.jsで認証し、Hygraphでアカウント情報を更新します。 |
| Houdini（デモ） | Sveltekitを使用したHoudiniの例。 |
| 迅速 | ネイティブSwift（iOS＆Mac）の例。 |
swift-graphqlでSwift | Swift-Graphqlを使用したネイティブSwift（iOS＆Mac）の例。 |
いくつかの例UI拡張機能を作成しました。これらは、独自のカスタムコンポーネントを使用してHygraph UIを拡張する方法を示す必要があります。
| 名前 | タイプ | SDK | 説明 |
|---|---|---|---|
| クイックスタート | 入力 | 反応します | UI拡張機能の使用方法を示す基本<input /> 。 |
| 曇り | 入力 | 反応します | カスタムクラウドアセットピッカー。 |
| 焦点 | 入力 | JavaScript | カスタムフォーカルポイントピッカー。 |
| bynder | 入力 | JavaScript | Compact View V2コンポーネントを使用して、Bynderから資産を閲覧します。 |
| 条件付きフィールド | 入力 | タイプスクリプト | UI拡張機能他のフィールドの可視性を変更し、FieldConfigを使用する方法を示します。 |
私たちのスラックに参加してくださいドキュメントを読む・Hygraphの詳細
あなたが一緒に働いている上記の何かが欠けているのを見ますか？例でプルリクエストを開き、ニュースレターで紹介してください！もっと詳しく知る。
