hygraph examples

Exemples hygraphes

Exemples de projets pour vous aider à démarrer avec Hygraph

Utilisation de ce repo

Tous les exemples de ce dépôt utilisent le même projet hygraphique. Clone pour commencer:

Lorsque vous travaillez avec ce dépo localement avec votre propre projet hygraphe, vous devrez ajouter ce qui suit à votre .env :

 HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN =

Des exemples où nous interrogeons uniquement les données ne coderont pas le HYGRAPH_ENDPOINT pour vous faire passer à l'aide de l'exemple localement ou sur la boîte de codes et de boîte.

Exemples

Caractéristiques et recettes de l'API de contenu hygraphe

Exemples démontrant comment utiliser les fonctionnalités hygraphes.

Caractéristiques	Description
Utilisation du téléchargement d'actifs	Télécharger les actifs par programme en utilisant le point de terminaison de téléchargement des actifs
Utilisation du SDK de gestion (vidéo)	Script SDK de gestion de base pour créer un schéma.
Utilisation de champs distants (vidéo)	Script SDK de gestion de base pour créer un schéma avec des champs distants pour interroger les données directement à partir de l'API Stripe
Utilisation de mutations (démo, vidéo)	Application suivante.js Démontrer comment utiliser des mutations hygraphales avec des routes graphql-request , SWR et API
Utilisation de la pagination (démo, vidéo)	Application suivante.js Démontrer comment pagincer les requêtes hygraphes avec graphql-request
Utilisation de Rich Text Renderer (démo, vidéo)	Application suivante.js Démontrer comment rendre le texte riche avec @graphcms/rich-text-react-renderer
Utilisation de types syndicaux	Un site de marketing de produit de base utilisant des types d'union pour composer des «blocs» d'interface utilisateur avec des composants. Construit avec Next.js, graphql-request et Tailwind CSS

Frameworks et bibliothèques

Exemples démontrant comment utiliser l'hygraphe avec des cadres d'application populaires.

Frameworks et bibliothèques	Description
Algolie (démo, [vidéo] [vidéo6])	Synchroniser le contenu avec Algolia via des webhooks sur Publier en utilisant les routes API Next.js.
Apollo Client 3 (démo, vidéo)	Utilisation du client Apollo 3 pour interroger les données de Hygraph.
Server Apollo (démo, vidéo)	Utilisation apollo-datasource-graphql pour tirer un schéma hygraphique dans un serveur Apollo existant
Express (démo, vidéo)	Une application express simple utilisant des modèles ejs et awesome-graphql-client
Gatsby (démo)	Un site de base Gatsby qui utilise gatsby-source-graphcms pour créer des pages de produits avec des données de Hygraph
Gatsby (API de route du système de fichiers) (démo, vidéo)	Un site de base Gatsby qui utilise gatsby-source-graphcms pour créer des pages de produits à l'aide de l'API de route du système de fichiers de Gatsby
Gatsby Image (démo, vidéo)	Comment utiliser gatsby-image avec des actifs hygraphes
[Image hygraphe] (démo, vidéo)	Comment utiliser [ @graphcms/react-image ] avec Gatsby
GraphQL Codegen (démo)	Générez automatiquement 26 types pour votre projet hygraphe avec un générateur de code GraphQL
Coux de schéma (avec maillage GraphQL)	Stitch 3 API GraphQL en une avec un maillage GraphQL
Gridome (démo, vidéo)	Un exemple de base en utilisant gridsome create CLI et @gridsome/source-graphql
MDX (avec Gatsby) (démo, vidéo)	Comment utiliser gatsby-plugin-mdx avec des champs RichText de Hygraph.
Mdx (avec next.js) (démo, vidéo)	Cet exemple montre comment utiliser les champs de démarchdown de Hygraph avec MDX dans Next.js
Next.js (démo, vidéo)	Une application de base Next.js, avec getStaticProps et getStaticPaths pour créer des pages de produits statiques
Next.js I18N Routing (démo, vidéo)	Comment utiliser Next.js Routage internationalisé avec le contenu hygraphe
Next.js Image (démo, vidéo)	Comment utiliser le composant d'image Next.js avec des actifs hygraphes
Image suivante.js avec chargeur personnalisé (démo, vidéo)	Comment utiliser une fonction de chargeur personnalisée avec le composant d'image NEXT.js et les actifs hygraphes
Nuxt.js (démo, vidéo)	Un simple démarreur nuxt.js à l'aide de CLI create-nuxt-app avec le vent arrière et Axios ajoutés
Nuxt3 + nuxt-graphql-client (démo)	Un démarreur Nuxt.js simple utilisant le module nuxt-graphql-client
React.js (démo, vidéo)	Cet exemple montre comment interroger à partir de l'hygraphe avec GraphQL-Request dans React.js
React.js avec remise react	Cet exemple montre comment interroger à partir de l'hygraphe avec React Query dans React.js
Vue.js (démo, vidéo)	Un démarreur vanille Vue.js utilisant vue create CLI avec Vue Router
Sveltekit (démo, vidéo)	Un exemple de svelte utilisant Sveltekit et graphql-request pour récupérer les données
Sveltekit avec URQL (démo)	Un exemple sveltekit urql pour récupérer les données
Eleventy (démo)	Un exemple de Eleventy en utilisant graphql-request pour récupérer les données.
Astro (démo)	Un exemple Astro utilisant graphql-request pour récupérer les données.
Vanilla JS (démo)	Requête dans le navigateur sans frameworks, utilisez simplement l'API Fetch.
NextAuth (démo)	Authentifiez avec NextAuth.js et mettez à jour les informations de compte avec Hygraph.
Houdini (démo)	Un exemple de Houdini avec sveltekit.
Rapide	Un exemple natif Swift (iOS & Mac).
Swift avec swift-graphql	Un exemple natif Swift (iOS & Mac) utilisant Swift-GraphQL.

Extensions d'interface utilisateur

Nous avons conçu quelques exemples d'extensions d'interface utilisateur pour que vous puissiez commencer. Ceux-ci devraient montrer comment étendre l'interface utilisateur hygraphique avec vos propres composants personnalisés.

Nom	Taper	SDK	Description
Start	Saisir	Réagir	Un <input /> de base montrant comment utiliser les extensions d'interface utilisateur.
Nuageux	Saisir	Réagir	Un cueilleur d'actifs cloudinary personnalisé.
Point focal	Saisir	Javascrip	Un cueilleur de points focaux personnalisé.
Bynder	Saisir	Javascrip	Parcourez les actifs de BYNDER à l'aide du composant V2 View Compact.
Champs conditionnels	Saisir	Manuscrit	Extension de l'interface utilisateur pour montrer comment modifier la visibilité pour d'autres champs et utiliser FieldConfig.

Links

Rejoignez notre Slack · Lisez les documents · En savoir plus sur l'hygraphe

Contributif

Voyez-vous quelque chose qui manque au-dessus avec lequel vous travaillez? Ouvrez une demande de traction avec votre exemple et faites-le figurer dans notre newsletter! Apprendre encore plus.