hygraph/hygraph-examples

Example projects to help you get started with Hygraph

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
Nuxt3 + nuxt-graphql-client (Demo)	A simple Nuxt.js starter using the nuxt-graphql-client module
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.

hygraph-examples's Issues

TypeError: Cannot read properties of undefined (reading 'config')

When using uix-cloudinary-input, I cant get it working since the last commit.

TypeScript error in /vercel/path0/src/App.tsx(191,35):
Object is possibly 'undefined'.  TS2532
> 191 |                 cloudName={String(config.CLOUD_NAME)}

Example Request: Relay Hooks

Show off the GraphCMS relay API with Relay Hooks 🚀

Wrong title in readme

GraphCMS starter blog with React Static & graphql-request

Local File

Hi when I write the query it can not find "localFile", even it suggests locale.Thanks

Will this be updated for Nuxt 3?

Nuxt 3 has now launched and is in rc2 stage. Will this example be updated to for this version?

Generating dynamic routes with apollo in nuxt.config

Hi!
I have been struggling with the generation of dynamic routes in nuxt.config.js

The example in axios is the following:
import axios from 'axios' let dynamicRoutes = () => { return axios.get('https://your-api-here/products').then(res => { return res.data.map(product => /product/${product.id}) }) }

Can you please help me with this?

Thanks

Example Request: Sapper to SvelteKit

Convert using Sapper example to use SvelteKit.

Example Request: react-markdown

An example using the Markdown field with react-markdown

Create schema stitching example

GraphCMS + React Native

How to load Nuxt-Appollo-Blog on the Server Side?

Hi,

Great job with the GraphCMS, it's really awesome!

I'm new using Apollo and GraphQL. I would like to run this blog example on the server side, so when I check the source code on the browser I can see the whole content. This is just for SEO reasons.

Many thanks

Example doesn't work

I've trying to deploy my next app to netlify but the build kept failing, then I realized that the problem was that npm run export command wasn't working. So I realized It was an issue with the next/image component and nextjs requires a loader function to be included in the next/image when the media is coming from a cloud-like platform like graphcms. Now I followed this example to write a loader but the export still doesn't work. This is what my loader looks like

function gcmsLoader ({ src, width }) {
    const relativeSrc = (src) => src.split('/').pop()

    return `https://media.graphcms.com/resize=width:${width}/${relativeSrc(src)}`
}

although in the next example of the loader, the loader function requires one more parameter and that's the quality parameter but it's not in this example and I'm not sure how to implement that within the code. I'm not sure but maybe that's preventing the app from exporting. I need help with this, please.

Example Request: React Query

Surge deployment

The example react-static-gql-request-blog works on local host. When deploying with surge(https://surge.sh)

npm run build

> [email protected] build /Users/dancoman/Workspace/graphcms-examples/react-static-gql-request-blog
> react-static build


=> Copying public directory...
=> [✓] Public directory copied: 3.857ms
=> Building Routes...
=> [✓] Routes Built: 930.920ms
=> Bundling App...
=> [✓] App Bundled: 13819.881ms
=> Exporting Routes...

      => Warning: No 'siteRoot' defined in 'static.config.js'!
      => This is required for both absolute url's and a sitemap.xml to be exported.

A solution would be highly appreciated, even though this is not strictly related to this repo.

Content stage only showing `Draft` & not `Published`

I've published two documents on the CMS and I'm fetching + rendering them inside my Next.js application.

I want to render only those documents which are in the published stage, and not in draft.

When I fetch the content using GraphQL in the API playground, the stage attribute is always in the draft stage, even after I published it.

---

GraphQL query

query getBlogStage{
  portfolioBlogs {
    id
    title
    stage
  }
}

Output

In the specific content, it's also showing the published stage

I would appreciate if anyone could find possible fix for this.

400 Bad Request

From what I can gather after following your demo to the letter (outside of api keys, index name, and content type), I am not getting the content stage which it looks like you get in your code on hookbin. Would you have any insight as to access that the content stage data? Or a possible workaround that would allow me to pass the data into algolia? Any help you can provide would be greatly appreciated.

Cannot destructure property 'id' of 'PUBLISHED' as it is undefined.

here is the data passed back from ngrok when I make a change to a post :

{
"operation": "publish",
"data": {
"__typename": "Post",
"author": [
{
"__typename": "Author",
"id": "ckzeln59scorc0b77iv59abik"
}
],
"content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ",
"createdAt": "2022-02-08T20:56:46.972835+00:00",
"createdBy": {
"__typename": "User",
"id": "ckzbyct9g2uxw01z6f25416ng"
},
"date": "2022-02-08T20:54:00+00:00",
"description": "This is a testing post used for my purposes and searching purposes!!",
"id": "ckzelstqwcusg0a728ofd8123",
"publishedAt": "2022-04-22T17:06:02.866182+00:00",
"publishedBy": {
"__typename": "User",
"id": "ckzbyct9g2uxw01z6f25416ng"
},
"scheduledIn": [],
"slug": "test-content-post",
"stage": "PUBLISHED",
"tags": [
"educational",
"Educational"
],
"title": "Educational Development Test Post 1",
"updatedAt": "2022-04-22T16:33:51.280676+00:00",
"updatedBy": {
"__typename": "User",
"id": "ckzbyct9g2uxw01z6f25416ng"
}
}
}

Please release a dynamic image uploadding code from input field with react js

Replace `with-sapper` with `with-sveltekit`

Sapper is no longer actively developed and SvelteKit is a much better experience

Migration guide: https://kit.svelte.dev/migrating

with-sveltekit example outdated

This still uses the old routing system and far outdated versions of SvelteKit.

#270 will resolve this.

wrong folder in the How to start section

the /current/ directory is missing in the examples How To section

Missing public folder but this is how you can create a public folder?

In a React project, the public folder typically contains assets such as your favicon, manifest file, and other files that are served directly by the web server without being processed by the React app. If your project does not have a public folder, you can create one by following these steps:

1. In your project root directory, create a new folder called public.
2. Add any assets that you want to serve directly to the public folder.
3. In your React app, you can reference these assets using the %PUBLIC_URL% placeholder. For example, if you have a file called favicon.ico in your public folder, you can reference it in your HTML file like this: .

If you are using create-react-app to set up your project, the public folder is already set up for you and you can add your assets to it directly. If you are not using create-react-app, you will need to configure your build process to copy the contents of the public folder to the build output directory. This can typically be done using a tool like cp or rsync. You can also use a build tool like Webpack to automate this process as part of your build pipeline.

GraphCMS + Astro Example

Seeing an error on the GraphCMS + Astro example https://codesandbox.io/s/github/GraphCMS/graphcms-examples/tree/master/with-astro?file=/src/pages/index.astro

(node:57) UnhandledPromiseRejectionWarning: Error: Loading PostCSS Plugin failed: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received undefined

(@undefined)
    at load (/sandbox/node_modules/postcss-load-config/src/plugins.js:28:11)
    at /sandbox/node_modules/postcss-load-config/src/plugins.js:53:16
    at Array.map (<anonymous>)
    at plugins (/sandbox/node_modules/postcss-load-config/src/plugins.js:52:8)
    at AsyncFunction.transformAsync (/sandbox/node_modules/@snowpack/plugin-postcss/worker.js:20:17)
    at MessagePort.<anonymous> (/sandbox/node_modules/workerpool/src/worker.js:125:27)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:399:24)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:18:26)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:57) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, usethe CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:57) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Example Request: Render Rich Text

with-astro example PostCSS exception at build

Building the example on code sandbox (and locally), I receive:

(node:57) UnhandledPromiseRejectionWarning: Error: Loading PostCSS Plugin failed: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received undefined

(@undefined)
    at load (/sandbox/node_modules/postcss-load-config/src/plugins.js:28:11)
    at /sandbox/node_modules/postcss-load-config/src/plugins.js:53:16
    at Array.map (<anonymous>)
    at plugins (/sandbox/node_modules/postcss-load-config/src/plugins.js:52:8)
    at AsyncFunction.transformAsync (/sandbox/node_modules/@snowpack/plugin-postcss/worker.js:20:17)
    at MessagePort.<anonymous> (/sandbox/node_modules/workerpool/src/worker.js:125:27)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:399:24)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:18:26)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:57) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:57) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

react-apollo-blog names

The names of some of the fields in the code are different than the instructions here: https://graphcms.com/docs/getting-started/setting_up_the_project/

"dateAndTime" should be "dateTime" and "avatar" should be "image".

The affected files are Home.js, About.js and Post.js

Please provide GraphCMS example for Gridsome too

https://gridsome.org/

cc @tomtev of Gridsome

GraphCMS + Ionic

Example Request: graphql-hooks

It would be useful to include a graphql-hooks example as requested by a few community users.

Create Apollo Federation example

Bug: Rich text editor underline

When a text is underlined in the rich text editor of Hygraph, the markdown export it as an <em> instead <u> html element.

Update needed in SvelteKit - GraphQL Request example

Breaking change from a couple of months ago
Relevant pull request in the Sveltekit repo

The following error is given in [slug].svelte

page` in `load` functions has been replaced by `url` and `params

GraphCMS + Swift

Using https://github.com/maticzav/swift-graphql we should create a Swift example querying GraphCMS 🚀

[Bug]: Error after yarn start

Bug Report

Hi, I cloned cloudinary from a repo and made yarn install After everything was installed I did yarn start and this error shows in the console.

I tried also npm install but it was still the same.

Steps To Reproduce the error

1. Run npx degit hygraph/hygraph-examples/uix-cloudinary-input uix-cloudinary-input
2. Go to project directory
3. Run yarn install or npm install
4. Run yarn start or npm start

My environment
OS: Mac OS Ventura 13.2.1
Node version: 18.9.1
Browser name and version: Google Chrome latest version

Thank you for your help.

Example Request: Vanilla JS

Guides links in Readme are outdated and broken

How to set up a project
Getting started with GraphCMS & React
Getting started with GraphCMS & Vue

Example Request: SWR (with Queries)