Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hygraph/hygraph-examples
Example projects to help you get started with Hygraph
https://github.com/hygraph/hygraph-examples
apollo-server gatsby graphcms graphql gridsome nextjs nuxt nuxtjs react sapper vue
Last synced: about 1 month ago
JSON representation
Example projects to help you get started with Hygraph
- Host: GitHub
- URL: https://github.com/hygraph/hygraph-examples
- Owner: hygraph
- License: mit
- Created: 2017-11-27T19:48:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T11:42:55.000Z (4 months ago)
- Last Synced: 2024-09-29T13:12:07.052Z (about 1 month ago)
- Topics: apollo-server, gatsby, graphcms, graphql, gridsome, nextjs, nuxt, nuxtjs, react, sapper, vue
- Language: Swift
- Homepage: https://hygraph.com
- Size: 8.29 MB
- Stars: 614
- Watchers: 39
- Forks: 159
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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:
[](https://app.hygraph.com/clone/0ff23f7a41ce4da69a366ab299cc24d8)
When working with this repo locally with your own Hygraph project, you'll need to add the following to your `.env`:
```dosini
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][video2]) | Basic [Management SDK] script to create a schema. |
| [Using Remote Fields] ([Video][video3]) | Basic [Management SDK] script to create a schema with [Remote Fields] to query data directly from the [Stripe API] |
| [Using Mutations] ([Demo][demo4], [Video][video4]) | [Next.js] app demonstrating how to use Hygraph mutations with [`graphql-request`], [`SWR`] and API routes |
| [Using Pagination] ([Demo][demo5], [Video][video5]) | [Next.js] app demonstrating how to paginate Hygraph queries with [`graphql-request`] |
| [Using Rich Text Renderer] ([Demo][demo27], [Video][video27]) | [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][demo6], [Video][video6]) | Sync content to Algolia via webhooks on publish using Next.js API routes. |
| [Apollo Client 3][1] ([Demo][demo7], [Video][video7]) | Using [Apollo Client 3] to query data from Hygraph. |
| [Apollo Server] ([Demo][demo8], [Video][video8]) | Using [`apollo-datasource-graphql`] to pull a Hygraph schema into an existing [Apollo Server][2] |
| [Express][3] ([Demo][demo9], [Video][video9]) | A simple [Express] app using `ejs` templating and [`awesome-graphql-client`] |
| [Gatsby][4] ([Demo][demo10]) | A basic [Gatsby] site that uses [`gatsby-source-graphcms`] to build product pages with data from Hygraph |
| [Gatsby (File System Route API)] ([Demo][demo11], [Video][video11]) | A basic [Gatsby] site that uses [`gatsby-source-graphcms`] to build product pages using Gatsby's [File System Route API] |
| [Gatsby Image] ([Demo][demo12], [Video][video12]) | How to use [`gatsby-image`] with Hygraph assets |
| [Hygraph Image] ([Demo][demo13], [Video][video13]) | How to use [`@graphcms/react-image`] with Gatsby |
| [GraphQL Codegen] ([Demo][demo26]) | 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][demo15], [Video][video15]) | A basic example using `gridsome create` CLI and [`@gridsome/source-graphql`] |
| [MDX (with Gatsby)] ([Demo][demo16], [Video][video16]) | How to use [`gatsby-plugin-mdx`] with `RichText` fields from Hygraph. |
| [MDX (with Next.js)] ([Demo][demo17], [Video][video17]) | This example demonstrates how to use markdown fields from Hygraph with `MDX` in Next.js |
| [Next.js][5] ([Demo][demo18], [Video][video18]) | A basic [Next.js] application, featuring `getStaticProps` and `getStaticPaths` to build static product pages |
| [Next.js i18n Routing] ([Demo][demo19], [Video][video19]) | How to use [Next.js Internationalized Routing] with Hygraph content |
| [Next.js Image] ([Demo][demo20], [Video][video20]) | How to use [Next.js Image Component] with Hygraph assets |
| [Next.js Image with Custom Loader] ([Demo][demo21], [Video][video21]) | How to use a [custom loader] function with [Next.js Image Component] and Hygraph assets |
| [Nuxt.js] ([Demo][demo22], [Video][video22]) | A simple Nuxt.js starter using `create-nuxt-app` CLI with Tailwind and Axios added |
| [Nuxt3 + nuxt-graphql-client] ([Demo][demoNuxt]) | A simple Nuxt.js starter using the `nuxt-graphql-client` module |
| [React.js] ([Demo][demo23], [Video][video23]) | 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][demo24], [Video][video24]) | A vanilla Vue.js starter using `vue create` CLI with Vue Router |
| [SvelteKit] ([Demo][demo26], [Video][video26]) | A Svelte example using SvelteKit and `graphql-request` to fetch data |
| [SvelteKit with URQL] ([Demo][demo27]) | A SvelteKit example URQL to fetch data |
| [Eleventy] ([Demo][demo28]) | An Eleventy example using `graphql-request` to fetch data. |
| [Astro] ([Demo][demo29]) | An Astro example using `graphql-request` to fetch data. |
| [Vanilla JS] ([Demo][demo30]) | Query in the browser with no frameworks, just use the Fetch API. |
| [NextAuth] ([Demo][demo31]) | Authenticate with NextAuth.js and update account info with Hygraph. |
| [Houdini] ([Demo][demo32]) | 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](swift-graphql). |
### UI Extensions
We've crafted a few example [UI extensions](https://hygraph.com/docs/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](uix-basic-input) | Input | React | A basic `` showing how to use UI extensions. |
| [Cloudinary](uix-cloudinary-input) | Input | React | A custom Cloudinary asset picker. |
| [Focal Point](uix-focal-point-input) | Input | JavaScript | A custom focal point picker. |
| [Bynder](uix-bynder-input) | Input | JavaScript | Browse assets from Bynder using the Compact View V2 component. |
| [Conditional Fields](uix-conditional-field) | Input | TypeScript | UI extension to show how to change visibility for other fields and use fieldConfig. |
[join our slack]: https://slack.hygraph.com
[read the docs]: https://hygraph.com/docs
[learn more about hygraph]: https://hygraph.com
[using asset upload]: using-asset-upload
[video1]: #
[demo26]: #
[asset upload endpoint]: https://hygraph.com/docs/content-api/assets#uploading-assets
[using management sdk]: using-management-sdk
[video2]: https://youtu.be/MLJCKsxcxEo
[demo2]: #
[using remote fields]: using-remote-fields
[video3]: https://youtu.be/cu3ZAAgPC20
[demo3]: #
[management sdk]: https://www.npmjs.com/package/@graphcms/management
[remote fields]: https://hygraph.com/docs/schema/field-types#remote
[stripe api]: https://stripe.com/docs/api
[using mutations]: using-mutations
[video4]: https://youtu.be/KPwMaPmaoS0
[demo4]: https://hygraph-using-mutations.vercel.app
[next.js]: https://nextjs.org
[`graphql-request`]: https://github.com/prisma-labs/graphql-request
[`swr`]: https://github.com/zeit/swr
[using pagination]: using-pagination
[video5]: https://youtu.be/QTdPzdXyY40
[demo5]: https://hygraph-using-pagination.vercel.app/
[using rich text renderer]: using-rich-text-react-renderer
[video27]: https://youtu.be/4rYbSlE6m6A
[demo27]: https://hygraph-using-rich-text-react-renderer.vercel.app/
[`@graphcms/rich-text-react-renderer`]: https://npmjs.com/package/@graphcms/rich-text-react-renderer
[using union types]: using-union-types
[video5]: #
[demo5]: #
[tailwind css]: https://tailwindcss.com
[algolia]: with-algolia
[demo6]: https://hygraph-with-algolia.vercel.app/
[1]: with-apollo-client-3
[apollo client 3]: https://www.apollographql.com/docs/react
[video7]: https://youtu.be/xyCj2zyBzyw
[demo7]: https://hygraph-with-apollo-client-3.vercel.app/
[apollo server]: with-apollo-server
[video8]: https://youtu.be/-taoQzDdJto
[demo8]: https://graphcms-with-apollo-server.herokuapp.com/
[`apollo-datasource-graphql`]: https://github.com/poetic/apollo-datasource-graphql
[2]: https://www.apollographql.com/docs/apollo-server/
[3]: with-express
[express]: https://expressjs.com/
[video9]: https://youtu.be/Uz0uRVttUaE
[demo9]: https://graphcms-with-express.herokuapp.com/
[`awesome-graphql-client`]: https://github.com/lynxtaa/awesome-graphql-client
[4]: with-gatsby
[gatsby]: https://www.gatsbyjs.org/
[demo10]: https://hygraph-with-gatsby.vercel.app/
[`gatsby-source-graphcms`]: https://github.com/hygraph/gatsby-source-graphcms
[gatsby (file system route api)]: with-gatsby-filesystem-routing
[video11]: https://youtu.be/vFF-C_FXQHI
[demo11]: https://hygraph-with-gatsby-filesystem-routing.vercel.app/
[file system route api]: https://www.gatsbyjs.com/docs/file-system-page-creation
[gatsby image]: with-gatsby-image
[video12]: https://youtu.be/v4MlWu5ujUA
[demo12]: https://hygraph-with-gatsby-image.vercel.app/
[`gatsby-image`]: https://www.gatsbyjs.org/packages/gatsby-image/
[graphcms image]: with-graphcms-image
[video13]: https://youtu.be/v4MlWu5ujUA
[demo13]: https://hygraph-with-graphcms-image.vercel.app/
[`graphcms-image`]: https://github.com/hygraph/react-image
[graphql codegen]: with-graphql-codegen
[demo14]: https://hygraph-with-graphql-codegen.vercel.app/
[graphql code generator]: https://graphql-code-generator.com/docs/getting-started/index
[schema stitching (with graphql mesh)]: with-graphql-mesh
[graphql mesh]: https://www.graphql-mesh.com
[gridsome]: with-gridsome
[video15]: https://youtu.be/XOxhA938c20
[demo15]: https://hygraph-with-gridsome.vercel.app/
[`@gridsome/source-graphql`]: https://www.npmjs.com/package/@gridsome/source-graphql
[mdx (with gatsby)]: with-gatsby-mdx
[`gatsby-plugin-mdx`]: https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx
[video16]: https://youtu.be/fXv4ryR-t0A
[demo16]: https://hygraph-with-gatsby-mdx.vercel.app/
[mdx (with next.js)]: with-nextjs-mdx-remote
[video17]: https://youtu.be/mJSY4IfAG7o
[demo17]: https://hygraph-with-nextjs-mdx-remote.vercel.app/
[5]: with-nextjs
[video18]: https://youtu.be/fRqGq6aHUKE
[demo18]: https://hygraph-with-nextjs.vercel.app/
[next.js i18n routing]: with-nextjs-i18n-routing
[next.js internationalized routing]: https://nextjs.org/docs/advanced-features/i18n-routing
[video19]: https://youtu.be/lCr8e4SkbUk
[demo19]: https://hygraph-with-nextjs-i18n-routing.vercel.app/
[next.js image]: with-nextjs-image
[video20]: https://youtu.be/nuRa2Gh41Ck
[demo20]: https://hygraph-with-nextjs-image.vercel.app/
[next.js image component]: https://nextjs.org/docs/api-reference/next/image
[next.js image with custom loader]: with-nextjs-image-loader
[video21]: https://youtu.be/loatYRYGLUI
[demo21]: https://hygraph-with-nextjs-image-loader.vercel.app/
[custom loader]: https://nextjs.org/docs/api-reference/next/image#loader
[nuxt.js]: with-nuxtjs
[video22]: https://youtu.be/kTdsFYonNQ4
[demo22]: https://hygraph-with-nuxtjs.vercel.app/
[demoNuxt]: https://hygraph-with-nuxtjs-nuxt-graphql-client.vercel.app/
[Nuxt3 + nuxt-graphql-client]: with-nuxt-graphql
[react.js]: with-reactjs
[react.js with react query]: with-react-query
[video23]: https://youtu.be/QXgtDR9VIWc
[demo23]: https://hygraph-with-reactjs.vercel.app/
[vue.js]: with-vuejs
[video24]: https://youtu.be/CVM-BFLWwro
[demo24]: https://hygraph-with-vuejs.vercel.app/
[sveltekit]: with-sveltekit
[video26]: https://youtu.be/RHorjtLq1LY
[demo26]: https://hygraph-with-sveltekit.vercel.app/
[sveltekit with urql]: with-sveltekit-and-urql
[demo27]: https://with-sveltekit-and-urql-xi.vercel.app/
[eleventy]: with-eleventy
[demo28]: https://hygraph-with-eleventy.vercel.app/
[astro]: with-astro
[demo29]: https://hygraph-with-astro.vercel.app/
[vanilla js]: with-vanilla-javascript
[demo30]: https://hygraph-with-vanilla-js.vercel.app
[nextauth]: with-nextauth-credentials
[demo31]: https://hygraph-with-nextauth-credentials.vercel.app
[houdini]: with-houdini
[demo32]: https://hygraph-with-houdini.vercel.app
[swift]: with-swift
[swift with `swift-graphql`]: with-swift-graphql
[swift-graphql]: https://github.com/maticzav/swift-graphql
[houdini]: with-houdini
[uix-basic-input]: uix-basic-input
[uix-cloudinary-input]: uix-cloudinary-input
## 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](https://hygraph.com/community).