We just launched our new Hygraph Studio in beta. Learn more

Hygraph
Docs

Hygraph code examples

Here is a list of our most recently updated code examples:

Example nameDescription
AlgoliaThis example demonstrates how to use Hygraph webhooks to sync data to Algolia on new published content.
Apollo Client 3This example demonstrates how to query from Hygraph with graphql-request in React.js.
Apollo ServerThis example demonstrates how to use apollo-datasource-graphql to pull a Hygraph schema into an existing Apollo Server.
AstroThis example demonstrates how to use the Astro with Hygraph.
Asset upload exampleThis 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).
EleventyThis example demonstrates how to use the Eleventy and GraphQL Request with Hygraph.
ExpressA simple Express app using ejs templating and awesome-graphql-client.
GenQLThis example demonstrates how to query from Hygraph with GenQL.
Go LangThis example demonstrates how to query from Hygraph with Go.
graphcms-imageThis example demonstrates how to use @graphcms/react-image with Gatsby.
GraphQL CodegenThis example demonstrates how to query from Hygraph with Apollo Client 3, TypeScript, and generated types for your Hygraph project with GraphQL Code Generator.
graphql-meshThis example demonstrates how to use GraphQL mesh to serve 3 separate APIs, Hygraph, CartQL, and SpaceXLand.
GridsomeThis example demonstrates how to query data from Hygraph with @gridsome/source-graphql.
HoudiniThis example shows how to use the SvelteKit GraphQL library Houdini with Hygraph.
KitQLThis example shows how to use the KitQL with Hygraph.
Management SDKThis example demonstrates how to programmatically build a project schema using the Hygraph Management SDK.
MutationsThis example demonstrates how to mutate Hygraph data with Next.js.
Next AuthThis example demonstrates how to query from Hygraph NextAuth.js.
Next App RouterThis example demonstrates how to query from Hygraph with graphql-request in Next.js.
Next i18n RoutingThis example demonstrates how to use Next.js Internationalized Routing with localized Hygraph content.
Next ImageThis example demonstrates how to use the Next.js Image Component with your Hygraph assets.
Next Image LoaderThis 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 remoteThis example demonstrates how to use markdown fields from Hygraph with MDX in Next.js.
NextJsThis example demonstrates how to query from Hygraph with graphql-request in Next.js.
NuxtJsThis example demonstrates how to query from Hygraph with Nuxt.js.
NuxtJs GraphQLHygraph, NuxtJS & nuxt-graphql-client.
PaginationThis example demonstrates ways you can paginate Hygraph queries.
Remote FieldsThis 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 queryThis example demonstrates how to query from Hygraph with React Query in React.js.
ReactJsThis example demonstrates how to query from Hygraph with graphql-request in React.js.
Rich Text rendererThis example demonstrates how you can render Rich Text from Hygraph.
SlinkityThis example shows how to use the Slinkity and GraphQL Request with Hygraph.
SvelteKitThis example shows how to use the SvelteKit with Hygraph. It uses graphql-request.
SvelteKit & GraphQL RequestThis example shows how to use the SvelteKit and GraphQL Request with Hygraph.
SvelteKit & URQLThis example shows how to use the SvelteKit with Hygraph and URQL.
SwiftThis demonstrates how to use Hygraph with a Swift application for iOS (iPhone / iPad) or Mac.
Swift & swift-graphqlThis demonstrates how to use Hygraph with a Swift application for iOS (iPhone / iPad) or Mac, using popular library swift-graphql.
SwrThis example uses SWR to fetch, and mutate user todos using Next.js API Routes, backed by GraphQL.
TerraformTerraform example.
Union typesHygraph 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 ProxyThis 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 coreThis example demonstrates how to query from Hygraph with core URQL client.
URQL ReactThis example demonstrates how to query from Hygraph with React URQL client.
Using where filterThis example demonstrates ways you can order Hygraph query results by using variables. The example is built with Next.js, graphql-request and swr.
Vanilla JSThis example demonstrates how to query data from Hygraph in the browser with just JavaScript.
VariablesThis example demonstrates ways you can order Hygraph query results by using variables. This example is built with Next.js, graphql-request and swr.
VueJsThis example demonstrates how to query from Hygraph with Vue.js.