hygraph examples

Ejemplos de higreno

Ejemplo de proyectos para ayudarlo a comenzar con Hygraph

Usando este repositorio

Todos los ejemplos en este repositorio usan el mismo proyecto de higraph. Clonarlo para comenzar:

Cuando trabaje con este repositorio localmente con su propio proyecto Hygraph, deberá agregar lo siguiente a su .env :

 HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN =

Ejemplos en los que solo consultamos los datos codificarán el HYGRAPH_ENDPOINT para que funcione usando el ejemplo localmente o en Codesandbox.

Ejemplos

Características y recetas de la API de contenido de Hygraph

Ejemplos que demuestran cómo usar funciones de higrafio.

Características	Descripción
Usando la carga de activos	Cargar programáticamente los activos utilizando el punto final de carga de activos
Uso de SDK de gestión (video)	Script SDK de gestión básica para crear un esquema.
Uso de campos remotos (video)	Script SDK de gestión básica para crear un esquema con campos remotos para consultar los datos directamente desde la API Stripe
Uso de mutaciones (demostración, video)	Aplicación Next.js que demuestra cómo usar mutaciones higraph con rutas graphql-request , SWR y API
Uso de paginación (demostración, video)	Aplicación Next.js que demuestra cómo paginar las consultas de higrato con graphql-request
Uso de Rich Text Renderer (demo, video)	Aplicación Next.js que demuestra cómo representar un texto rico con @graphcms/rich-text-react-renderer
Uso de tipos de sindicatos	Un sitio básico de marketing de productos que utiliza tipos de sindicatos para componer 'bloques' de la interfaz de usuario con componentes. Construido con Next.js, graphql-request y Tailwind CSS

Marcos y bibliotecas

Ejemplos que demuestran cómo usar Hygraph con marcos de aplicaciones populares.

Marcos y bibliotecas	Descripción
Algolia (demostración, [video] [video6])	Sincronizar contenido a Algolia a través de Webhooks en Publicar utilizando las rutas API Next.js.
Apollo Client 3 (demostración, video)	Uso de Apollo Client 3 para consultar los datos de Hygraph.
Apollo Server (demostración, video)	Uso de apollo-datasource-graphql para atraer un esquema de higrafía a un servidor Apollo existente
Express (demostración, video)	Una aplicación expresa simple que usa plantillas ejs e awesome-graphql-client
Gatsby (demostración)	Un sitio básico de Gatsby que utiliza gatsby-source-graphcms para crear páginas de productos con datos de Hygraph
Gatsby (API de ruta del sistema de archivos) (demostración, video)	Un sitio básico de Gatsby que utiliza gatsby-source-graphcms para construir páginas de productos utilizando la API del sistema de archivos de Gatsby
Imagen de Gatsby (demostración, video)	Cómo usar gatsby-image con activos de Hygraph
[Imagen de higrato] (demostración, video)	Cómo usar [ @graphcms/react-image ] con Gatsby
Graphql Codegen (demostración)	Genere automáticamente los tipos26 para su proyecto Hygraph con GraphQL Code Generator
Costura de esquema (con malla GraphQL)	API de costura 3 GraphQL en una con malla GraphQL
Gridsome (demostración, video)	Un ejemplo básico que usa gridsome create CLI y @gridsome/source-graphql
MDX (con Gatsby) (demostración, video)	Cómo usar gatsby-plugin-mdx con RichText Fields de Hygraph.
MDX (con next.js) (demostración, video)	Este ejemplo demuestra cómo usar Markdown Fields de Hygraph con MDX en Next.js
Next.js (demostración, video)	Una aplicación básica Next.js, con getStaticProps y getStaticPaths para construir páginas de productos estáticos
Next.js I18N Routing (demostración, video)	Cómo usar el enrutamiento internacionalizado de Next.js con contenido de higrato
Siguiente.js imagen (demostración, video)	Cómo usar el componente de imagen Next.js con activos de higrato
Imagen next.js con cargador personalizado (demostración, video)	Cómo usar una función de cargador personalizado con el componente de imagen Next.js y los activos de Hygraph
Nuxt.js (demostración, video)	Un simple inicio de Nuxt.js usando CLI create-nuxt-app con Viento Tail y Axios agregado
Nuxt3 + Nuxt-Graphql-Client (demo)	Un simple inicio de nuxt.js usando el módulo nuxt-graphql-client
React.js (demostración, video)	Este ejemplo demuestra cómo consultar desde Hygraph con GraphQL-Request en React.js
React.js con reacción consulta	Este ejemplo demuestra cómo consultar desde Hygraph con React Consult en React.js
Vue.js (demostración, video)	Un inicio de vainilla Vue.js usando vue create cli con enrutador Vue
Sveltekit (demostración, video)	Un ejemplo esbelte utilizando sveltekit y graphql-request para obtener datos
Sveltekit con Urql (demostración)	Un ejemplo de seltekit Urql para obtener datos
ELEA (demostración)	Un un un altura de ejemplo que utiliza graphql-request para obtener datos.
Astro (demostración)	Un ejemplo Astro usando graphql-request para obtener datos.
Vainilla js (demostración)	Consulta en el navegador sin marcos, solo use la API de Fetch.
NextAuth (demostración)	Autenticar con nextAuth.js y actualizar la información de la cuenta con Hygraph.
Houdini (demostración)	Un ejemplo de Houdini con Sveltekit.
Rápido	Un ejemplo nativo de Swift (iOS y Mac).
Swift con swift-graphql	Un ejemplo nativo de Swift (iOS y Mac) usando Swift-Graphql.

Extensiones de UI

Hemos creado algunas extensiones de interfaz de usuario de ejemplo para que comience. Estos deberían mostrar cómo extender la interfaz de usuario de Hygraph con sus propios componentes personalizados.

Nombre	Tipo	Sdk	Descripción
Inicio rápido	Aporte	Reaccionar	Una <input /> que muestra cómo usar extensiones de UI.
Nube	Aporte	Reaccionar	Un selector de activos nube personalizado.
Punto focal	Aporte	Javascript	Un selector de punto focal personalizado.
Por un lado	Aporte	Javascript	Explore los activos de Bynder utilizando el componente de vista V2 compacta.
Campos condicionales	Aporte	Mecanografiado	Extensión de la interfaz de usuario para mostrar cómo cambiar la visibilidad para otros campos y usar FieldConfig.

Campo de golf

Únase a nuestro Slack · Lea los documentos · Aprenda más sobre Hygraph

Que contribuye

¿Ves algo que falta arriba con el que estás trabajando? ¡Abra una solicitud de extracción con su ejemplo y obtenga que aparezca en nuestro boletín! Aprende más.