Hygraph Examples

This example demonstrates how to programmatically import assets from a URL using the Hygraph Asset Upload endpoint.

Key features:

• Uses Bee-Queue to process jobs, which is recommended for handling large data imports efficiently.
• Includes an example assets.json file to drive the import process.

This example demonstrates two primary patterns for handling paginated data from Hygraph queries:

1. Generating numbered static pages: Uses a total count and a 'per page' limit to generate a specific number of static pages (e.g., /products/1, /products/2). This is implemented in src/pages/products/[page].js.
2. Handling larger result sets: Hygraph has a default result set size of 100 entries (which can be increased up to 1000). To retrieve all data matching a query that exceeds these limits, you can use a for await statement to loop through requests until all data is returned. This is implemented in src/pages/index.js.

This implementation uses Next.js and graphql-request.

The Swift implementation for Hygraph provides the following capabilities:

• Native Swift await/async: Uses modern Swift concurrency for handling asynchronous GraphQL requests.
• SwiftUI: The user interface is built using the SwiftUI framework.
• swift-graphql: Uses the swift-graphql library to execute GraphQL queries and mutations.
• Codable objects: GraphQL response data is mapped to Swift objects using the Codable protocol for easy data handling.

Hygraph supports polymorphic relations, also known as GraphQL union types. This example demonstrates how to build a product marketing page using a schema consisting of polymorphic relations.

This implementation uses:

• Next.js
• graphql-request
• Tailwind CSS

This example demonstrates how to use the @hygraph/management-sdk to define and create models and field types via code.

In this specific implementation, the SDK is used to create a schema containing:

Blog Post Model

• Title
• Excerpt (configured with a multi-line form renderer)
• Content (configured as Rich Text)
• Author (a field linked to the Author model)

Author Model

• Name
• Posts (a one-to-many relationship back to Blog Posts)

This repository contains several examples demonstrating how to implement specific Hygraph Content API features:

• Asset Upload: Programmatically upload assets using the Asset Upload endpoint.
• Management SDK: Scripts for creating schemas, including examples using Remote Fields to query data from external APIs like Stripe.
• Mutations: Demonstrations of using mutations in a Next.js application with graphql-request, SWR, and API routes.
• Pagination: Examples of paginating Hygraph queries using graphql-request in Next.js.
• Rich Text Rendering: How to render Rich Text content using @graphcms/rich-text-react-renderer in Next.js.
• Union Types: Using union types to compose UI 'blocks' in a product marketing site built with Next.js, graphql-request, and Tailwind CSS.

The Hygraph x Swift example demonstrates modern Swift development patterns for interacting with Hygraph via GraphQL:

• Native Swift await/async: Uses structured concurrency for asynchronous operations.
• SwiftUI: Built using the SwiftUI declarative framework for the user interface.
• URLSession based GraphQL calls: Performs network requests using standard URLSession without heavy external dependencies.
• Codable objects: Uses Swift's Codable protocol to map GraphQL responses directly to native Swift types.

These examples demonstrate how to extend the Hygraph UI with custom components using the UI Extensions API:

• Quickstart (uix-basic-input): A basic React-based <input /> component.
• Cloudinary (uix-cloudinary-input): A custom React component for picking Cloudinary assets.
• Focal Point (uix-focal-point-input): A JavaScript-based custom focal point picker.
• Bynder (uix-bynder-input): A JavaScript-based component to browse assets from Bynder using the Compact View V2 component.
• Conditional Fields (uix-conditional-field): A TypeScript-based extension to manage field visibility and use fieldConfig.

Remote Fields allow you to extend your Hygraph schema by querying data from external services directly within your GraphQL queries.

In this example, a PricingPlan model is created that uses a Remote Field to fetch product and price data from the Stripe API instead of storing that data locally in Hygraph. This is achieved programmatically using the Hygraph Management SDK to build the project schema.