hygraph examples
1.0.0
Пример проектов, которые помогут вам начать работу с гиграфом
Все примеры в этом репо используют один и тот же проект Hygraph. Клонировать это, чтобы начать:
При работе с этим репо локально с вашим собственным проектом Hygraph вам нужно добавить следующее к вашему .env :
HYGRAPH_ENDPOINT =
HYGRAPH_TOKEN = Примеры, когда мы только запросили данные, будут жесткой кодировкой HYGRAPH_ENDPOINT , чтобы вы запустили пример локально или в коде и коде.
Примеры, демонстрирующие, как использовать функции гиграфии.
| Функции | Описание |
|---|---|
| Использование загрузки активов | Программная загрузка активов с помощью конечной точки загрузки актива |
| Использование управления SDK (видео) | Основной сценарий SDK Management для создания схемы. |
| Используя удаленные поля (видео) | Скрипт SDK Basic Management для создания схемы с удаленными полями для запроса данных непосредственно из API Stripe API |
| Использование мутаций (демонстрация, видео) | Приложение Next.js демонстрирует, как использовать гиграфатические мутации с graphql-request маршрутами, SWR и API |
| Использование страниц (демонстрация, видео) | Приложение Next.js демонстрирует, как провести страницу запрашиваний гиграфа с помощью graphql-request |
| Использование богатого текстового рендеринга (демонстрация, видео) | Приложение Next.js демонстрирует, как отображать богатый текст с помощью @graphcms/rich-text-react-renderer |
| Использование типов союза | Основной сайт маркетинга продукта с использованием типов профсоюзов для составления «блоков пользовательского интерфейса» с компонентами. Построенный из next.js, graphql-request и tailwind css |
Примеры, демонстрирующие, как использовать гиграф с популярными прикладными рамками.
| Фреймворки и библиотеки | Описание |
|---|---|
| Алголия (демонстрация, [видео] [Видео 6]) | Синхронизируйте контент в Algolia через Webhooks на публикации с использованием маршрутов API Next.js. |
| Apollo Client 3 (демонстрация, видео) | Использование Apollo Client 3 для запроса данных из гиграфа. |
| Apollo Server (демонстрация, видео) | Использование apollo-datasource-graphql для вытягивания схемы гиграфа в существующий сервер Apollo |
| Экспресс (Демо, видео) | Простое приложение для экспресса с использованием матрицы ejs и awesome-graphql-client |
| Гэтсби (демонстрация) | Базовый сайт Gatsby, который использует gatsby-source-graphcms для создания страниц продукта с данными из гиграфа |
| Gatsby (File System Route API) (демонстрация, видео) | Основной сайт Gatsby, который использует gatsby-source-graphcms для создания страниц продукта с использованием API маршрута файловой системы Gatsby |
| Gatsby Image (демонстрация, видео) | Как использовать gatsby-image с активами гиграфа |
| [Hygraph Image] (демонстрация, видео) | Как использовать [ @graphcms/react-image ] с Gatsby |
| Graphql codegen (демо) | Автоматически генерируйте 26 типов для вашего проекта Hygraph с генератором кода GraphQL |
| Схема строчка (с сеткой GraphQL) | API apis stitch 3 graphql в один с GraphQl Mesh |
| GridSome (демонстрация, видео) | Основной пример с использованием gridsome create CLI и @gridsome/source-graphql |
| MDX (с Gatsby) (демонстрация, видео) | Как использовать gatsby-plugin-mdx с RichText Fields от Hygraph. |
| MDX (с next.js) (демонстрация, видео) | Этот пример демонстрирует, как использовать поля Markdown из Hygraph с MDX в next.js |
| Next.js (демо, видео) | Основное приложение Next.js, включающее getStaticProps и getStaticPaths для создания страниц статических продуктов |
| Next.js i18n маршрутизация (демонстрация, видео) | Как использовать next.js интернационализированную маршрутизацию с содержанием гиграфа |
| Next.js Image (демонстрация, видео) | Как использовать компонент изображения next.js с активами с гиграфией |
| Следующее изображение. | Как использовать пользовательскую функцию погрузчика с компонентом изображения next.js и активами гиграфа |
| Nuxt.js (демо, видео) | Простой стартер nuxt.js с использованием CLI create-nuxt-app с Tailwind и Axios добавлено |
| Nuxt3 + nuxt-graphql-client (демо) | Простой стартер nuxt.js с использованием модуля nuxt-graphql-client |
| React.js (демонстрация, видео) | Этот пример демонстрирует, как запрашивать гиграф с помощью GraphQL-Request в React.js |
| React.js с запросом React | Этот пример демонстрирует, как запросить из гиграфа с помощью React Query в React.js |
| Vue.js (демо, видео) | Стартер vanilla vue.js с использованием vue create CLI с Vue Router |
| Sveltekit (демонстрация, видео) | Пример с использованием SVELTEKIT и graphql-request для получения данных |
| Sveltekit с urql (демо) | Пример стеснительного примера для получения данных |
| Месяти (демонстрация) | Одиндцать примеров с использованием graphql-request для извлечения данных. |
| Астро (демонстрация) | Пример Astro с использованием graphql-request для извлечения данных. |
| Vanilla JS (демонстрация) | Запрос в браузере без фреймворков, просто используйте API Fetch. |
| Nextauth (демонстрация) | Аутентификация с NextAuth.js и обновление информации учетной записи с помощью Hygraph. |
| Гудини (демонстрация) | Пример Гудини со стеткитом. |
| Быстрый | Пример нативного Swift (iOS & Mac). |
Свифт со swift-graphql | Пример нативного Swift (iOS & Mac) с использованием Swift-GraphQL. |
Мы создали несколько примеров расширений пользовательского интерфейса для вас, чтобы начать работу. Они должны показать, как расширить пользовательский интерфейс Hygraph с помощью ваших собственных компонентов.
| Имя | Тип | SDK | Описание |
|---|---|---|---|
| QuickStart | Вход | Реагировать | Базовый <input /> показывающий, как использовать расширения пользовательского интерфейса. |
| Облачный | Вход | Реагировать | Пользовательский облачный сборщик активов. |
| Фокус | Вход | JavaScript | Пользовательский сборщик фокуса. |
| Байндер | Вход | JavaScript | Просмотрите активы из Bynder, используя компонент Vive Compact View. |
| Условные поля | Вход | Машинопись | Расширение пользовательского интерфейса, чтобы показать, как изменить видимость для других полей и использовать FieldConfig. |
Присоединяйтесь к нашему Slack · Прочитайте документы · Узнайте больше о гиграфе
Вы видите что -то не хватает выше, чем вы работаете? Откройте запрос на вытяжение со своим примером и получите его в нашей рассылке! Узнать больше.
