Hygraph Examples
Example projects to help you get started with Hygraph
Using this repo
All examples in this repo use the same Hygraph project. Clone it to get started:
When working with this repo locally with your own Hygraph project, you'll need to add the following to your .env:
HYGRAPH_ENDPOINT=
HYGRAPH_TOKEN=Examples where we only query the data will hardcode the HYGRAPH_ENDPOINT to get you going using the example locally, or on Codesandbox.
Examples
Hygraph Content API Features & Recipes
Examples demonstrating how to use Hygraph features.
| Features | Description |
|---|---|
| Using Asset Upload | Programmatically upload assets using the Asset Upload endpoint |
| Using Management SDK (Video) | Basic Management SDK script to create a schema. |
| Using Remote Fields (Video) | Basic Management SDK script to create a schema with Remote Fields to query data directly from the Stripe API |
| Using Mutations (Demo, Video) | Next.js app demonstrating how to use Hygraph mutations with graphql-request, SWR and API routes |
| Using Pagination (Demo, Video) | Next.js app demonstrating how to paginate Hygraph queries with graphql-request |
| Using Rich Text Renderer (Demo, Video) | Next.js app demonstrating how to render Rich Text with @graphcms/rich-text-react-renderer |
| Using Union Types | A basic product marketing site using union types to compose UI 'blocks' with components. Built with Next.js, graphql-request and Tailwind CSS |
Frameworks & Libraries
Examples demonstrating how to use Hygraph with popular application frameworks.
| Frameworks & Libraries | Description |
|---|---|
| Algolia (Demo, [Video][video6]) | Sync content to Algolia via webhooks on publish using Next.js API routes. |
| Apollo Client 3 (Demo, Video) | Using Apollo Client 3 to query data from Hygraph. |
| Apollo Server (Demo, Video) | Using apollo-datasource-graphql to pull a Hygraph schema into an existing Apollo Server |
| Express (Demo, Video) | A simple Express app using ejs templating and awesome-graphql-client |
| Gatsby (Demo) | A basic Gatsby site that uses gatsby-source-graphcms to build product pages with data from Hygraph |
| Gatsby (File System Route API) (Demo, Video) | A basic Gatsby site that uses gatsby-source-graphcms to build product pages using Gatsby's File System Route API |
| Gatsby Image (Demo, Video) | How to use gatsby-image with Hygraph assets |
| [Hygraph Image] (Demo, Video) | How to use [@graphcms/react-image] with Gatsby |
| GraphQL Codegen (Demo) | Automatically generate26 types for your Hygraph project with GraphQL Code Generator |
| Schema Stitching (with GraphQL Mesh) | Stitch 3 GraphQL APIs into one with GraphQL Mesh |
| Gridsome (Demo, Video) | A basic example using gridsome create CLI and @gridsome/source-graphql |
| MDX (with Gatsby) (Demo, Video) | How to use gatsby-plugin-mdx with RichText fields from Hygraph. |
| MDX (with Next.js) (Demo, Video) | This example demonstrates how to use markdown fields from Hygraph with MDX in Next.js |
| Next.js (Demo, Video) | A basic Next.js application, featuring getStaticProps and getStaticPaths to build static product pages |
| Next.js i18n Routing (Demo, Video) | How to use Next.js Internationalized Routing with Hygraph content |
| Next.js Image (Demo, Video) | How to use Next.js Image Component with Hygraph assets |
| Next.js Image with Custom Loader (Demo, Video) | How to use a custom loader function with Next.js Image Component and Hygraph assets |
| Nuxt.js (Demo, Video) | A simple Nuxt.js starter using create-nuxt-app CLI with Tailwind and Axios added |
| React.js (Demo, Video) | This example demonstrates how to query from Hygraph with graphql-request in React.js |
| React.js with React Query | This example demonstrates how to query from Hygraph with React Query in React.js |
| Vue.js (Demo, Video) | A vanilla Vue.js starter using vue create CLI with Vue Router |
| SvelteKit (Demo, Video) | A Svelte example using SvelteKit and graphql-request to fetch data |
| SvelteKit with URQL (Demo) | A SvelteKit example URQL to fetch data |
| Eleventy (Demo) | An Eleventy example using graphql-request to fetch data. |
| Astro (Demo) | An Astro example using graphql-request to fetch data. |
| Vanilla JS (Demo) | Query in the browser with no frameworks, just use the Fetch API. |
| NextAuth (Demo) | Authenticate with NextAuth.js and update account info with Hygraph. |
| Houdini (Demo) | An Houdini example with SvelteKit. |
| Swift | A native Swift (iOS & Mac) example. |
Swift with swift-graphql |
A native Swift (iOS & Mac) example using swift-graphql. |
UI Extensions
We've crafted a few example UI extensions for you to get started with. These should show how to extend the Hygraph UI with your own custom components.
| Name | Type | SDK | Description |
|---|---|---|---|
| Quickstart | Input | React | A basic <input /> showing how to use UI extensions. |
| Cloudinary | Input | React | A custom Cloudinary asset picker. |
| Focal Point | Input | JavaScript | A custom focal point picker. |
| Bynder | Input | JavaScript | Browse assets from Bynder using the Compact View V2 component. |
| Conditional Fields | Input | TypeScript | UI extension to show how to change visibility for other fields and use fieldConfig. |
Links
Join our Slack Β· Read the Docs Β· Learn more about Hygraph
Contributing
Do you see something missing above that you're working with? Open a Pull Request with your example, and get it featured in our newsletter! Learn more.