hygraph examples
1.0.0
Beispielprojekte, mit denen Sie mit Hygraph beginnen können
Alle Beispiele in diesem Repo verwenden das gleiche Hygraph -Projekt. Klonen Sie es, um loszulegen:
Wenn Sie mit diesem Repo lokal mit Ihrem eigenen Hygraph -Projekt zusammenarbeiten, müssen Sie Ihrem .env Folgendes hinzufügen:
HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN = Beispiele, bei denen wir nur die Daten abfragen, werden den HYGRAPH_ENDPOINT hardcodode, um Sie mit dem Beispiel lokal oder auf CodesAndbox in Gang zu bringen.
Beispiele, die zeigen, wie Hygraph -Funktionen verwendet werden.
| Merkmale | Beschreibung |
|---|---|
| Verwenden von Asset Upload | Programmgesteuertes Laden Sie Assets mit dem Asset -Upload -Endpunkt hochladen |
| Verwenden von Management SDK (Video) | Grundlegendes Management -SDK -Skript zum Erstellen eines Schemas. |
| Verwenden von Remote -Feldern (Video) | Grundlegendes Management -SDK -Skript zum Erstellen eines Schemas mit Remote -Feldern, um Daten direkt von der Stripe -API abzufragen |
| Verwenden von Mutationen (Demo, Video) | Next.js App, die zeigt, wie Hygraph-Mutationen mit graphql-request , SWR und API |
| Verwenden von Pagination (Demo, Video) | Next.js App graphql-request die demonstriert |
| Verwenden von Rich Text Renderer (Demo, Video) | Next.js App @graphcms/rich-text-react-renderer die demonstriert |
| Verwenden von Gewerkschaftstypen | Eine grundlegende Produktmarketing -Website, die Gewerkschaftstypen verwendet, um UI -Blöcke mit Komponenten zu komponieren. Erstellt mit Next.js, graphql-request und Rückenwind CSS |
Beispiele, die zeigen, wie Hygraph mit beliebten Anwendungsrahmen verwendet werden.
| Frameworks & Bibliotheken | Beschreibung |
|---|---|
| Algolie (Demo, [Video] [Video6]) | Synchronisieren Sie Inhalte mit Algolien über Webhooks auf Veröffentlichung mit Next.js -API -Routen. |
| Apollo Client 3 (Demo, Video) | Verwenden von Apollo Client 3, um Daten aus Hygraph abzufragen. |
| Apollo Server (Demo, Video) | Verwenden von apollo-datasource-graphql um ein Hygraph-Schema in einen vorhandenen Apollo-Server zu ziehen |
| Express (Demo, Video) | Eine einfache Express-App mit ejs -Vorlagen und awesome-graphql-client |
| Gatsby (Demo) | Eine grundlegende Gatsby-Site, die gatsby-source-graphcms verwendet, um Produktseiten mit Daten aus Hygraph zu erstellen |
| Gatsby (Dateisystem -Routen -API) (Demo, Video) | Eine grundlegende Gatsby-Site, die gatsby-source-graphcms verwendet |
| Gatsby Bild (Demo, Video) | So verwenden Sie gatsby-image mit Hygraph-Vermögenswerten |
| [Hygraphbild] (Demo, Video) | So verwenden Sie [ @graphcms/react-image ] mit Gatsby |
| GraphQL CodeGen (Demo) | Generieren Sie 26 -Typen für Ihr Hygraph -Projekt automatisch mit dem GraphQL -Codegenerator |
| Schema -Nähte (mit GraphQL Mesh) | Stitch 3 GraphQL -APIs in eins mit GraphQL -Netz |
| Gridsome (Demo, Video) | Ein grundlegendes Beispiel unter Verwendung von gridsome create CLI und @gridsome/source-graphql |
| MDX (mit Gatsby) (Demo, Video) | So verwenden Sie gatsby-plugin-mdx mit RichText Feldern aus Hygraph. |
| MDX (mit Next.js) (Demo, Video) | In diesem Beispiel wird MDX |
| Next.js (Demo, Video) | Eine grundlegende Anwendung von Next.js mit getStaticProps und getStaticPaths zum Aufbau statischer Produktseiten |
| Next.js i18n Routing (Demo, Video) | So verwenden Sie das internationalisierte Routing mit Hygraph -Inhalten. |
| Next.js Bild (Demo, Video) | So verwenden Sie die Bildkomponente von Next.js mit Hygraph -Assets |
| Next.js Bild mit benutzerdefiniertem Loader (Demo, Video) | So verwenden Sie eine benutzerdefinierte Loader -Funktion mit Next.js Bildkomponente und Hygraph -Assets |
| Nuxt.js (Demo, Video) | Ein einfacher Nuxt.js-Starter mit create-nuxt-app -CLI mit Rückenwind und Axios hinzugefügt |
| Nuxt3 + nuxt-graphql-client (Demo) | Ein einfacher Nuxt.js-Starter mit dem nuxt-graphql-client Modul |
| React.js (Demo, Video) | Dieses Beispiel zeigt, wie man aus Hygraph mit GraphQL-Request in react.js abfragt |
| React.js mit React -Abfrage | Dieses Beispiel zeigt, wie man aus Hygraph mit React -Abfrage in react.js abfragt |
| Vue.js (Demo, Video) | Ein Vanille -Vue.js -Starter mit vue create |
| Sveltekit (Demo, Video) | Ein Beispiel für ein Sufle-Beispiel, das Sveltekit und graphql-request zum Abrufen von Daten verwenden |
| Sveltekit mit URQL (Demo) | Ein Seltekit -Beispiel URQL zum Abrufen von Daten |
| ELFEN (Demo) | Ein elfes Beispiel unter Verwendung von graphql-request um Daten abzurufen. |
| Astro (Demo) | Ein Astro-Beispiel graphql-request zum Abrufen von Daten verwendet. |
| Vanille JS (Demo) | Abfragen Sie im Browser ohne Frameworks, verwenden Sie einfach die Fetch -API. |
| NextAuth (Demo) | Authentifizieren Sie sich mit NextAuth.js und aktualisieren Sie Kontoinformationen mit Hygraph. |
| Houdini (Demo) | Ein Houdini -Beispiel mit SVELTEKIT. |
| Schnell | Ein natives Beispiel für Swift (iOS & Mac). |
Swift mit swift-graphql | Ein natives Beispiel für Swift (iOS & Mac) mit Swift-Graphql. |
Wir haben ein paar Beispiele für die Benutzeroberfläche für Sie hergestellt, damit Sie beginnen können. Diese sollten zeigen, wie die Hygraph -Benutzeroberfläche mit Ihren eigenen benutzerdefinierten Komponenten erweitert wird.
| Name | Typ | SDK | Beschreibung |
|---|---|---|---|
| QuickStart | Eingang | Reagieren | Eine grundlegende <input /> zeigt, wie UI -Erweiterungen verwendet werden. |
| Wolkend | Eingang | Reagieren | Ein benutzerdefinierter Wolking -Asset -Picker. |
| Mittelpunkt | Eingang | JavaScript | Ein benutzerdefinierter Schwerpunkt. |
| Bynder | Eingang | JavaScript | Durchsuchen Sie die Vermögenswerte von BYNder mit der Kompaktansicht V2 -Komponente. |
| Bedingte Felder | Eingang | Typoskript | UI -Erweiterung, um anzuzeigen, wie die Sichtbarkeit für andere Felder geändert und FieldConfig verwendet wird. |
Nehmen Sie an unserem Slack · Lesen Sie die Dokumente · Erfahren Sie mehr über Hygraph
Sehen Sie, dass etwas oben fehlt, mit dem Sie arbeiten? Öffnen Sie eine Pull -Anfrage mit Ihrem Beispiel und lassen Sie ihn in unserem Newsletter vorstellen! Erfahren Sie mehr.
