Hygraph code examples
Here is a list of our most recently updated code examples:
| Example name | Description |
|---|---|
| Algolia | This example demonstrates how to use Hygraph webhooks to sync data to Algolia on new published content. |
| Apollo Client 3 | This example demonstrates how to query from Hygraph with graphql-request in React.js. |
| Apollo Server | This example demonstrates how to use apollo-datasource-graphql to pull a Hygraph schema into an existing Apollo Server. |
| Astro | This example demonstrates how to use the Astro with Hygraph. |
| Asset upload example | This example demonstrates how to programmatically import assets from a URL using the Asset Upload endpoint. Uses Bee-Queue to process jobs (recommended for large data imports). |
| Eleventy | This example demonstrates how to use the Eleventy and GraphQL Request with Hygraph. |
| Express | A simple Express app using ejs templating and awesome-graphql-client. |
| GenQL | This example demonstrates how to query from Hygraph with GenQL. |
| Go Lang | This example demonstrates how to query from Hygraph with Go. |
| graphcms-image | This example demonstrates how to use @graphcms/react-image with Gatsby. |
| GraphQL Codegen | This example demonstrates how to query from Hygraph with Apollo Client 3, TypeScript, and generated types for your Hygraph project with GraphQL Code Generator. |
| graphql-mesh | This example demonstrates how to use GraphQL mesh to serve 3 separate APIs, Hygraph, CartQL, and SpaceXLand. |
| Gridsome | This example demonstrates how to query data from Hygraph with @gridsome/source-graphql. |
| Houdini | This example shows how to use the SvelteKit GraphQL library Houdini with Hygraph. |
| KitQL | This example shows how to use the KitQL with Hygraph. |
| Management SDK | This example demonstrates how to programmatically build a project schema using the Hygraph Management SDK. |
| Mutations | This example demonstrates how to mutate Hygraph data with Next.js. |
| Next Auth | This example demonstrates how to query from Hygraph NextAuth.js. |
| Next App Router | This example demonstrates how to query from Hygraph with graphql-request in Next.js. |
| Next i18n Routing | This example demonstrates how to use Next.js Internationalized Routing with localized Hygraph content. |
| Next Image | This example demonstrates how to use the Next.js Image Component with your Hygraph assets. |
| Next Image Loader | This example demonstrates how to use a custom loader function with Next.js Image Component and Hygraph assets. This allows you to perform asset transformations using the Hygraph CDN, rather than the default Next.js loader. |
| Next mdx remote | This example demonstrates how to use markdown fields from Hygraph with MDX in Next.js. |
| NextJs | This example demonstrates how to query from Hygraph with graphql-request in Next.js. |
| NuxtJs | This example demonstrates how to query from Hygraph with Nuxt.js. |
| NuxtJs GraphQL | Hygraph, NuxtJS & nuxt-graphql-client. |
| Pagination | This example demonstrates ways you can paginate Hygraph queries. |
| Remote Fields | This example demonstrates how to programmatically build a project schema using the Hygraph Management SDK. Using Remote Fields, we create a PricingPlan model to query for product/price data directly from the Stripe API. |
| React query | This example demonstrates how to query from Hygraph with React Query in React.js. |
| ReactJs | This example demonstrates how to query from Hygraph with graphql-request in React.js. |
| Rich Text renderer | This example demonstrates how you can render Rich Text from Hygraph. |
| Slinkity | This example shows how to use the Slinkity and GraphQL Request with Hygraph. |
| SvelteKit | This example shows how to use the SvelteKit with Hygraph. It uses graphql-request. |
| SvelteKit & GraphQL Request | This example shows how to use the SvelteKit and GraphQL Request with Hygraph. |
| SvelteKit & URQL | This example shows how to use the SvelteKit with Hygraph and URQL. |
| Swift | This demonstrates how to use Hygraph with a Swift application for iOS (iPhone / iPad) or Mac. |
| Swift & swift-graphql | This demonstrates how to use Hygraph with a Swift application for iOS (iPhone / iPad) or Mac, using popular library swift-graphql. |
| Swr | This example uses SWR to fetch, and mutate user todos using Next.js API Routes, backed by GraphQL. |
| Terraform | Terraform example. |
| Union types | Hygraph supports polymorphic relations, also known as GraphQL union types. This example demonstrates how you can build a product marketing page using a schema consisting of polymorphic relations. The example is built with Next.js, graphql-request and Tailwind CSS. |
| Upload Proxy | This example demonstrates how to proxy uploads from your client application to Hygraph to prevent leaking the Permanent Auth Token needed to upload new assets. |
| URQL core | This example demonstrates how to query from Hygraph with core URQL client. |
| URQL React | This example demonstrates how to query from Hygraph with React URQL client. |
| Using where filter | This example demonstrates ways you can order Hygraph query results by using variables. The example is built with Next.js, graphql-request and swr. |
| Vanilla JS | This example demonstrates how to query data from Hygraph in the browser with just JavaScript. |
| Variables | This example demonstrates ways you can order Hygraph query results by using variables. This example is built with Next.js, graphql-request and swr. |
| VueJs | This example demonstrates how to query from Hygraph with Vue.js. |