Announcing Hygraph Examples
In this post, we take an in-depth look at the Hygraph examples repo on Github and some of the tools that can work in tandem with Hygraph.
With a growing ecosystem of frontend frameworks to pick from, thousands of APIs to connect with, and Hygraph features to use, our team has put together an ever-growing, dedicated collection of code examples on GitHub.
These examples cover everything from mutating and paginating content, to rendering images with popular JavaScript frameworks like Next.js, Svelte, and more.
Let’s take a look at what each of them do, where you can find them, and how you can get started.
Hygraph Content API Features & RecipesAnchor
Asset UploadsAnchor
Hygraph exposes a content API asset upload endpoint that you can use to add assets to your project from outside of the Hygraph content editor.
This example uses a popular Node.js queue called Bee-Queue to process uploads. Teams who are uploading a lot of assets but are running into rate limiting may find this example useful to automatically retry their upload at a later time.
Management SDKAnchor
Everything you do once logged into Hygraph is powered by the Management API. This Management API is also used to create models, add fields, add enumerations, and more.
Hygraph provides a JavaScript SDK that lets you programmatically manage your Hygraph schema. This example demonstrates how you can instantiate the SDK, create models, add fields, and connect a relation between two models.
Using Remote FieldsAnchor
When we introduced Content Federation, we realized developers also wanted the control to create remote fields using the Management SDK.
In this example, we did just that. We connect Hygraph with Stripe to automatically make a request to Stripe to get the data for a remote type we’ve created using the Management SDK.
As well as adding the field, you can specify the endpoint it should resolve to and any headers (such as Authorization) to go along with it.
Mutations APIAnchor
Not many Headless Content Management Systems let you create, update, delete, and publish content from outside of their UI. Hygraph however goes a step further and provides a fully typed GraphQL API for you to do this.
This powerful API lends itself to all sorts of implementation ideas when it comes to publishing via an API. In this example, we let users vote on their favorite product, and each Vote is stored in Hygraph. The frontend code in this example uses a serverless function to relay the request onto Hygraph, so your API tokens are safe and secure.
PaginationAnchor
There will no doubt be a time where you need to paginate through data. Hygraph has made this very easy with built-in support for filtering the Content API.
Hygraph has a default result set size, which can be configured to a maximum of 1000 entries per page. In this example, we show how you can use the pagination filters to create typical prev/next page links you’d see on most paginated pages.
Using Rich TextAnchor
One of the most used Hygraph field types is Rich Text. I’ve previously written about working with the Rich Text field, but this example shows how you can use our Rich Text Renderer, a custom React package to render, and set custom embed components.
Union TypesAnchor
Hygraph supports one of the more advanced GraphQL primitives called a union type. You may be familiar with polymorphic relations with other APIs, but being a headless GraphQL CMS, we provide the same familiarity with GraphQL by baking in native support for union types.
This example demonstrates how you can build a page using different Hygraph models (with their own fields) on a page as “blocks.”
This is extremely useful and powerful for those building marketing sites and enriching content with content from other models.
Frameworks & LibrariesAnchor
The examples below show how Hygraph works with some of the most popular frontend frameworks, libraries, and tooling.
AlgoliaAnchor
Quite often you’ll want blazing fast search. Algolia is a great choice for indexing your Hygraph content. Algolia has a UI library for a variety of languages and frameworks.
In this example, we show how you can use a serverless function (Next.js API route used here) to update your Algolia indices.
Apollo Client 3Anchor
For those with public content APIs, you can use Apollo Client to query data from Hygraph right inside of the browser, without the need for any middleware, or server side build.
Apollo ServerAnchor
We’ve got the perfect example for those who already have their own GraphQL server and want to integrate Hygraph.
In this example, we use Apollo datasources to create a custom Hygraph datasource to fetch products from Hygraph using your API endpoint.
Express.js with Awesome GraphQL ClientAnchor
If you’re working with a more traditional Node.js setup, libraries like Express.js make it really easy to create routes, fetch data, and render it using a variety of templating languages.
In this example, we’ll fetch all products from our example Hygraph project and link to individual product pages. We’ll use Express.js to handle routing, and Awesome GraphQL Client to fetch data from Hygraph.
GatsbyAnchor
If you’re working with the popular React Static Site Generator Gatsby, this example shows how you can use the native gatsby-source-hygraph plugin to query your project's content.
Gatsby projects are mostly built using plugins. It’s a quick install, and configuration with your project details. It also supports localization, content stages, and more.
Gatsby File System Route APIAnchor
Gatsby gives developers great tools to build pages without much configuration. In this example, we’ll use the File System Route API with Gatsby to create pages automatically. This is done by following a naming convention that matches our Hygraph node types in our pages directory.
Gatsby ImageAnchor
Gatsby has extensive support for remote and local images. In this example, we use the gatsby-image plugin to show image assets from Hygraph right inside of our Gatsby pages.
This example uses the gatsby-source-grahcms plugin to source data.
Gatsby with MDXAnchor
MDX is Markdown for the component era. It gives you the ability to render React components (or JSX as it's known) within your Markdown.
Since Hygraph supports the Markdown field, we can invoke it and let Gatsby + MDX render these inside of our pages.
Hygraph React ImageAnchor
Those who are working with React and looking for a way to render images with optimized lazy loading and “blur up” out of the box should consider adding @hygraph/react-image to your application.
This example uses our example Hygraph project for products, and shows product images on a page.
GraphQL Code GeneratorAnchor
Writing types for all of your GraphQL queries by hand is time consuming. Thankfully the GraphQL Code Generator can take care of this and more.
This example demonstrates how to automatically generate code for Apollo Client and TypeScript.
GraphQL MeshAnchor
GraphQL Mesh is a popular project that lets you query data from anywhere. It automatically builds a GraphQL API for any specification you throw at it. Whether it be a Mongoose model, or a OpenAPI spec, you’ll get a fully functional GraphQL API with transport taken care of.
In this example, we use GraphQL Mesh to stitch the Hygraph schema with 2 other GraphQL APIs. You can then query GraphQL Mesh directly or using the SDK (with baked in GraphQL Code Generator).
GridsomeAnchor
The popular Jamstack framework for Vue.js “Gridsome” works with Hygraph via the GraphQL plugin. Similar to Gatsby, Gridsome is a Static Site Generator that works with plugins to compile a static output on deployment, giving users a blazing fast experience when navigating your site.
In this example, we’ll query for some products and a product by slug on its own page.
Next.jsAnchor
React continues to dominate the JavaScript ecosystem for front-end framework options. Next.js is an excellent minimalist framework for React that gives you all of the tools to build static, and dynamic sites.
If you’re used to building with a full stack framework, Next.js combined with Hygraph offers a similar experience. In this example, Hygraph will take care of the backend, and Next.js will take care of creating static pages for all products and individual product pages, all of which rebuild on-demand after a period of time.
Next.js with MDXAnchor
Similar to the example with Gatsby, here we’ll use Next.js and the packages next-mdx-remote & he to build MDX nodes from Hygraph to render in your Next.js application.
In this example, we’ll render our product pages and show a custom <Test /> component inside of the product description on the product display page.
Next.js Internationalized RoutingAnchor
Next.js features built-in internationalized routing capabilities that can work with Hygraph localizations. This example shows how we can have products in several locales inside of Hygraph and configure them with Next.js to use the same locales
We can prefix routes for our products and show the applicable localized content.
Next.js ImageAnchor
The next/image component is a popular choice for Next.js developers to render images that are sourced locally or in our case, remotely.
This component enables improved performance, visual stability, faster page loads, and much more.
In this example, we’ll render some product images using the Next.js image component.
Next.js Image with custom loaderAnchor
Similar to the Next.js Image component above to render images, in this example we’ll use the Hygraph Asset CDN to deliver images. This gives us the ability to use Hygraph asset transformations, instead of relying on Next.js to do it.
Nuxt.jsAnchor
Similar to React, Vue has its fair share of frontend frameworks to help organize, and structure well written apps. In this example, we’ll use our example products Hygraph project to automatically list out all products, and our single product pages using the Nuxt.js routing conventions.
Create React AppAnchor
If you’ve been working with React long enough you’ll remember when Dan first introduced us to Create React App, removing all of the configuration, and giving us some strong React conventions to follow.
In this example we’ll do the same as what we’ve done previously, but this time load data on the client, similar to how we do with Apollo Client, and render it with React.
Vue.jsAnchor
Similar to what we did with Create React App, we’ll use the native Vue primitives to build an app that can serve products on a single page, as well as individual pages with some built-in routing support.
In this example, we bind a Hygraph instance of graphql-request as a mixin inside of our app. We can then use this to make any queries by hooking into Vue on each of our routes.
SvelteKitAnchor
The increasingly popular Svelte application framework SvelteKit is great if you want to build apps with a smaller footprint.
In this example, we’ll create an instance of graphql-request and use this to query Hygraph on the server inside of the load hooks provided by SvelteKit.
SvelteKit with URQLAnchor
The dependency we used above with the graphql-request example is very barebones. Here we use a powerful GraphQL Client, “URQL” to handle communication between our app, and Hygraph.
SvelteKit with HoudiniAnchor
Simply install the Houdini plugin with your Svelte application, and instantly see results when working with GraphQL thanks to its impressive fast compiler, and type generation support.
If you like working with GraphQL Code Generator, and having the type safety when building Svelte apps, Houdini is a great alternative.
EleventyAnchor
Eleventy promises a simpler Static Site Generator. If you’re used to working with traditional, battle tested template languages and need to source GraphQL data for your pages, this example shows how you can do that.
AstroAnchor
Astro is another static site builder built for the modern web, priding itself on powerful developer experience and less JavaScript output builds.
In this example, we’ll use our Hygraph project for sourcing products and fetch them inside of an Astro build using native fetch.
Vanilla JSAnchor
If you have been around long enough before the frontend framework wars, you’ll remember what it was like to ship JavaScript you write (and minify if you’re lucky) to the browser.
In this example, we’ll fetch a list of products inside of the browser using the native fetch API.
NextAuth.jsAnchor
Using the Hygraph Mutations API, and combined with the Mutations example above, we can build a user facing app with Next.js + NextAuth.js that allows users to register and login using Hygraph as a database.
ContributingAnchor
There are over a dozen examples and growing. If you don’t see something you’re looking for, let us know, and if you’re working with any Hygraph features, or tools not listed above, you can contribute to this list by opening a Pull Request on GitHub.
