hygraph examples Download - hygraph examples download de código fonte

hygraph examples

Código-Fonte de IA

1.0.0

Baixar

Exemplos de hygraph

Exemplo de projetos para ajudá -lo a começar com o hygraph

Usando este repo

Todos os exemplos neste repositório usam o mesmo projeto de hygraph. Clone para começar:

Ao trabalhar com este repositório localmente com seu próprio projeto de hygraph, você precisará adicionar o seguinte ao seu .env :

 HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN =

Exemplos em que consultamos apenas os dados serão codificados no HYGRAPH_ENDPOINT para que você vá usar o exemplo localmente ou no código e caixa.

Exemplos

Recursos e receitas da API de conteúdo de hygraph

Exemplos demonstrando como usar os recursos do hygraph.

Características	Descrição
Usando upload de ativos	Carregue programaticamente ativos usando o terminal de upload de ativos
Usando o gerenciamento SDK (vídeo)	Script SDK de gerenciamento básico para criar um esquema.
Usando campos remotos (vídeo)	Script SDK de gerenciamento básico para criar um esquema com campos remotos para consultar dados diretamente da API da listra
Usando mutações (demonstração, vídeo)	App em Next.js demonstrando como usar mutações hygraph com rotas `graphql-request` , `SWR` e API
Usando a paginação (demonstração, vídeo)	App Next.js demonstrando como paginar consultas de hygraph com `graphql-request`
Usando Rich Text Renderer (demonstração, vídeo)	App Next.js demonstrando como renderizar texto rico com `@graphcms/rich-text-react-renderer`
Usando tipos de sindicatos	Um site básico de marketing de produtos usando tipos de sindicatos para compor os 'blocos' da interface do usuário com os componentes. Construído com o Next.js, `graphql-request` e Tailwind CSS

Estruturas e bibliotecas

Exemplos demonstrando como usar o hygraph com estruturas de aplicativos populares.

Estruturas e bibliotecas	Descrição
Algolia (Demo, [Video] [Video6])	Sincronizar o conteúdo da Algolia via webhooks na publicação usando as rotas da API Next.js.
Apollo Client 3 (Demo, vídeo)	Usando o Apollo Client 3 para consultar dados do hygraph.
Servidor Apollo (demonstração, vídeo)	Usando `apollo-datasource-graphql` para puxar um esquema de hygraph em um servidor Apollo existente
Express (demonstração, vídeo)	Um aplicativo expresso simples usando o modelo `ejs` e `awesome-graphql-client`
Gatsby (demonstração)	Um site básico de Gatsby que usa `gatsby-source-graphcms` para criar páginas de produtos com dados do hygraph
Gatsby (API de rota do sistema de arquivos) (demonstração, vídeo)	Um site básico de Gatsby que usa `gatsby-source-graphcms` para criar páginas de produto usando a API de rota do sistema de arquivos de Gatsby
Imagem de Gatsby (demonstração, vídeo)	Como usar `gatsby-image` com ativos hygraph
[Imagem do hygraph] (demonstração, vídeo)	Como usar [ `@graphcms/react-image` ] com gatsby
Graphql codegen (demonstração)	Gerar automaticamente 26 tipos para o seu projeto de hygraph com gerador de código grafql
Costura de esquema (com malha grafql)	Stitch 3 graphql APIs em um com malha grafql
Gradesome (demonstração, vídeo)	Um exemplo básico usando `gridsome create` CLI e `@gridsome/source-graphql`
MDX (com Gatsby) (demonstração, vídeo)	Como usar `gatsby-plugin-mdx` com campos `RichText` do Hygraph.
MDX (com Next.js) (demonstração, vídeo)	Este exemplo demonstra como usar os campos de remarca do hygraph com `MDX` em Next.js
Next.js (demonstração, vídeo)	Um aplicativo Basic Next.js, com `getStaticProps` e `getStaticPaths` para criar páginas de produtos estáticos
Next.JS I18N Routing (demonstração, vídeo)	Como usar o próximo.js de roteamento internacionalizado com conteúdo de hygraph
Imagem Next.js (demonstração, vídeo)	Como usar o componente de imagem next.js com ativos hygraph
Imagem Next.JS com carregador personalizado (demonstração, vídeo)	Como usar uma função de carregador personalizada com o componente de imagem Next.js e ativos hygraph
Nuxt.js (demo, vídeo)	Um acionador simples do Nuxt.js usando `create-nuxt-app` CLI com o Tailwind e o Axios adicionado
Nuxt3 + nuxt-graphql-client (demonstração)	Um acionador simples do nuxt.js usando o módulo `nuxt-graphql-client`
React.js (demonstração, vídeo)	Este exemplo demonstra como consultar o hygraph com o GraphQL-Request em React.js
React.js com consulta react	Este exemplo demonstra como consultar o hygraph com a consulta React em React.js
Vue.js (demonstração, vídeo)	Um acionador de partida de baunilha vue.js usando `vue create` cli com roteador Vue
Sveltekit (demonstração, vídeo)	Um exemplo esbelto usando Sveltekit e `graphql-request` para buscar dados
Sveltekit com URQL (Demo)	Um exemplo sveltekit urql para buscar dados
Eleventy (demonstração)	Um exemplo elevado usando `graphql-request` para buscar dados.
Astro (demonstração)	Um exemplo Astro usando `graphql-request` para buscar dados.
Vanilla JS (demonstração)	Consulta no navegador sem estruturas, basta usar a API Fetch.
Nextauth (demonstração)	Autentique com o Nextauth.js e atualize as informações da conta com o hygraph.
Houdini (demonstração)	Um exemplo de Houdini com Sveltekit.
Swift	Um exemplo nativo Swift (iOS e Mac).
Swift com `swift-graphql`	Um exemplo nativo Swift (iOS e Mac) usando Swift-GraphQL.

Extensões da interface do usuário

Criamos alguns exemplos de extensões de interface do usuário para você começar. Isso deve mostrar como estender a interface do usuário do hygraph com seus próprios componentes personalizados.

Nome	Tipo	Sdk	Descrição
Investir rápido	Entrada	Reagir	Um `<input />` básico mostrando como usar extensões de interface do usuário.
Cloudinary	Entrada	Reagir	Um seletor de ativos em nuvem personalizado.
Ponto focal	Entrada	JavaScript	Um seletor de ponto focal personalizado.
Bynder	Entrada	JavaScript	Procure ativos de Bynder usando o componente Compact View V2.
Campos condicionais	Entrada	TypeScript	Extensão da interface do usuário para mostrar como alterar a visibilidade de outros campos e usar o FieldConfig.