{"id":13632107,"url":"https://github.com/hygraph/hygraph-examples","last_synced_at":"2025-05-16T16:09:11.277Z","repository":{"id":37493158,"uuid":"112241094","full_name":"hygraph/hygraph-examples","owner":"hygraph","description":"Example projects to help you get started with Hygraph","archived":false,"fork":false,"pushed_at":"2024-07-25T11:42:55.000Z","size":8691,"stargazers_count":619,"open_issues_count":26,"forks_count":160,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-05-16T01:11:38.529Z","etag":null,"topics":["apollo-server","gatsby","graphcms","graphql","gridsome","nextjs","nuxt","nuxtjs","react","sapper","vue"],"latest_commit_sha":null,"homepage":"https://hygraph.com","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hygraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-27T19:48:55.000Z","updated_at":"2025-05-14T18:34:22.000Z","dependencies_parsed_at":"2022-07-09T09:46:14.372Z","dependency_job_id":"aea03e5e-61df-443c-ad04-78827eb968ad","html_url":"https://github.com/hygraph/hygraph-examples","commit_stats":{"total_commits":370,"total_committers":31,"mean_commits":"11.935483870967742","dds":0.7945945945945946,"last_synced_commit":"512c68de11935d49b836ac7ea3c43ed605265909"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Fhygraph-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Fhygraph-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Fhygraph-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Fhygraph-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hygraph","download_url":"https://codeload.github.com/hygraph/hygraph-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254564127,"owners_count":22092122,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-server","gatsby","graphcms","graphql","gridsome","nextjs","nuxt","nuxtjs","react","sapper","vue"],"created_at":"2024-08-01T22:02:51.893Z","updated_at":"2025-05-16T16:09:11.258Z","avatar_url":"https://github.com/hygraph.png","language":"Swift","readme":"\u003ch3 align=\"center\"\u003e\n  Hygraph Examples\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  Example projects to help you get started with Hygraph\n\u003c/p\u003e\n\n## Using this repo\n\nAll examples in this repo use the same Hygraph project. Clone it to get started:\n\n[![Clone project](https://hygraph.com/button)](https://app.hygraph.com/clone/0ff23f7a41ce4da69a366ab299cc24d8)\n\nWhen working with this repo locally with your own Hygraph project, you'll need to add the following to your `.env`:\n\n```dosini\nHYGRAPH_ENDPOINT=\nHYGRAPH_TOKEN=\n```\n\nExamples where we only query the data will hardcode the `HYGRAPH_ENDPOINT` to get you going using the example locally, or on Codesandbox.\n\n## Examples\n\n### Hygraph Content API Features \u0026 Recipes\n\nExamples demonstrating how to use Hygraph features.\n\n| Features                                                      | Description                                                                                                                                           |\n| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [Using Asset Upload]                                          | Programmatically upload assets using the [Asset Upload endpoint]                                                                                      |\n| [Using Management SDK] ([Video][video2])                      | Basic [Management SDK] script to create a schema.                                                                                                     |\n| [Using Remote Fields] ([Video][video3])                       | Basic [Management SDK] script to create a schema with [Remote Fields] to query data directly from the [Stripe API]                                    |\n| [Using Mutations] ([Demo][demo4], [Video][video4])            | [Next.js] app demonstrating how to use Hygraph mutations with [`graphql-request`], [`SWR`] and API routes                                             |\n| [Using Pagination] ([Demo][demo5], [Video][video5])           | [Next.js] app demonstrating how to paginate Hygraph queries with [`graphql-request`]                                                                  |\n| [Using Rich Text Renderer] ([Demo][demo27], [Video][video27]) | [Next.js] app demonstrating how to render Rich Text with [`@graphcms/rich-text-react-renderer`]                                                       |\n| [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] |\n\n### Frameworks \u0026 Libraries\n\nExamples demonstrating how to use Hygraph with popular application\nframeworks.\n\n| Frameworks \u0026 Libraries                                                | Description                                                                                                              |\n| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |\n| [Algolia] ([Demo][demo6], [Video][video6])                            | Sync content to Algolia via webhooks on publish using Next.js API routes.                                                |\n| [Apollo Client 3][1] ([Demo][demo7], [Video][video7])                 | Using [Apollo Client 3] to query data from Hygraph.                                                                      |\n| [Apollo Server] ([Demo][demo8], [Video][video8])                      | Using [`apollo-datasource-graphql`] to pull a Hygraph schema into an existing [Apollo Server][2]                         |\n| [Express][3] ([Demo][demo9], [Video][video9])                         | A simple [Express] app using `ejs` templating and [`awesome-graphql-client`]                                             |\n| [Gatsby][4] ([Demo][demo10])                                          | A basic [Gatsby] site that uses [`gatsby-source-graphcms`] to build product pages with data from Hygraph                 |\n| [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] |\n| [Gatsby Image] ([Demo][demo12], [Video][video12])                     | How to use [`gatsby-image`] with Hygraph assets                                                                          |\n| [Hygraph Image] ([Demo][demo13], [Video][video13])                    | How to use [`@graphcms/react-image`] with Gatsby                                                                         |\n| [GraphQL Codegen] ([Demo][demo26])                                    | Automatically generate26 types for your Hygraph project with [GraphQL Code Generator]                                    |\n| [Schema Stitching (with GraphQL Mesh)]                                | Stitch 3 GraphQL APIs into one with [GraphQL Mesh]                                                                       |\n| [Gridsome] ([Demo][demo15], [Video][video15])                         | A basic example using `gridsome create` CLI and [`@gridsome/source-graphql`]                                             |\n| [MDX (with Gatsby)] ([Demo][demo16], [Video][video16])                | How to use [`gatsby-plugin-mdx`] with `RichText` fields from Hygraph.                                                    |\n| [MDX (with Next.js)] ([Demo][demo17], [Video][video17])               | This example demonstrates how to use markdown fields from Hygraph with `MDX` in Next.js                                  |\n| [Next.js][5] ([Demo][demo18], [Video][video18])                       | A basic [Next.js] application, featuring `getStaticProps` and `getStaticPaths` to build static product pages             |\n| [Next.js i18n Routing] ([Demo][demo19], [Video][video19])             | How to use [Next.js Internationalized Routing] with Hygraph content                                                      |\n| [Next.js Image] ([Demo][demo20], [Video][video20])                    | How to use [Next.js Image Component] with Hygraph assets                                                                 |\n| [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                                  |\n| [Nuxt.js] ([Demo][demo22], [Video][video22])                          | A simple Nuxt.js starter using `create-nuxt-app` CLI with Tailwind and Axios added                                       |\n| [Nuxt3 + nuxt-graphql-client] ([Demo][demoNuxt])                      | A simple Nuxt.js starter using the `nuxt-graphql-client` module                                                          |\n| [React.js] ([Demo][demo23], [Video][video23])                         | This example demonstrates how to query from Hygraph with graphql-request in React.js                                     |\n| [React.js with React Query]                                           | This example demonstrates how to query from Hygraph with React Query in React.js                                         |\n| [Vue.js] ([Demo][demo24], [Video][video24])                           | A vanilla Vue.js starter using `vue create` CLI with Vue Router                                                          |\n| [SvelteKit] ([Demo][demo26], [Video][video26])                        | A Svelte example using SvelteKit and `graphql-request` to fetch data                                                     |\n| [SvelteKit with URQL] ([Demo][demo27])                                | A SvelteKit example URQL to fetch data                                                                                   |\n| [Eleventy] ([Demo][demo28])                                           | An Eleventy example using `graphql-request` to fetch data.                                                               |\n| [Astro] ([Demo][demo29])                                              | An Astro example using `graphql-request` to fetch data.                                                                  |\n| [Vanilla JS] ([Demo][demo30])                                         | Query in the browser with no frameworks, just use the Fetch API.                                                         |\n| [NextAuth] ([Demo][demo31])                                           | Authenticate with NextAuth.js and update account info with Hygraph.                                                      |\n| [Houdini] ([Demo][demo32])                                            | An Houdini example with SvelteKit.                                                                                       |\n| [Swift]                                                               | A native Swift (iOS \u0026 Mac) example.                                                                                      |\n| [Swift with `swift-graphql`]                                          | A native Swift (iOS \u0026 Mac) example using [swift-graphql](swift-graphql).                                                 |\n\n### UI Extensions\n\nWe'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.\n\n| Name                                        | Type  | SDK        | Description                                                                         |\n| ------------------------------------------- | ----- | ---------- | ----------------------------------------------------------------------------------- |\n| [Quickstart](uix-basic-input)               | Input | React      | A basic `\u003cinput /\u003e` showing how to use UI extensions.                               |\n| [Cloudinary](uix-cloudinary-input)          | Input | React      | A custom Cloudinary asset picker.                                                   |\n| [Focal Point](uix-focal-point-input)        | Input | JavaScript | A custom focal point picker.                                                        |\n| [Bynder](uix-bynder-input)                  | Input | JavaScript | Browse assets from Bynder using the Compact View V2 component.                      |\n| [Conditional Fields](uix-conditional-field) | Input | TypeScript | UI extension to show how to change visibility for other fields and use fieldConfig. |\n\n\u003c!-- Links --\u003e\n\n[join our slack]: https://slack.hygraph.com\n[read the docs]: https://hygraph.com/docs\n[learn more about hygraph]: https://hygraph.com\n\n\u003c!-- Hygraph Features \u0026 Recipes --\u003e\n\n[using asset upload]: using-asset-upload\n[video1]: #\n[demo26]: #\n[asset upload endpoint]: https://hygraph.com/docs/content-api/assets#uploading-assets\n[using management sdk]: using-management-sdk\n[video2]: https://youtu.be/MLJCKsxcxEo\n[demo2]: #\n[using remote fields]: using-remote-fields\n[video3]: https://youtu.be/cu3ZAAgPC20\n[demo3]: #\n[management sdk]: https://www.npmjs.com/package/@graphcms/management\n[remote fields]: https://hygraph.com/docs/schema/field-types#remote\n[stripe api]: https://stripe.com/docs/api\n[using mutations]: using-mutations\n[video4]: https://youtu.be/KPwMaPmaoS0\n[demo4]: https://hygraph-using-mutations.vercel.app\n[next.js]: https://nextjs.org\n[`graphql-request`]: https://github.com/prisma-labs/graphql-request\n[`swr`]: https://github.com/zeit/swr\n[using pagination]: using-pagination\n[video5]: https://youtu.be/QTdPzdXyY40\n[demo5]: https://hygraph-using-pagination.vercel.app/\n[using rich text renderer]: using-rich-text-react-renderer\n[video27]: https://youtu.be/4rYbSlE6m6A\n[demo27]: https://hygraph-using-rich-text-react-renderer.vercel.app/\n[`@graphcms/rich-text-react-renderer`]: https://npmjs.com/package/@graphcms/rich-text-react-renderer\n[using union types]: using-union-types\n[video5]: #\n[demo5]: #\n[tailwind css]: https://tailwindcss.com\n\n\u003c!-- Frameworks \u0026 Libraries --\u003e\n\n[algolia]: with-algolia\n[demo6]: https://hygraph-with-algolia.vercel.app/\n[1]: with-apollo-client-3\n[apollo client 3]: https://www.apollographql.com/docs/react\n[video7]: https://youtu.be/xyCj2zyBzyw\n[demo7]: https://hygraph-with-apollo-client-3.vercel.app/\n[apollo server]: with-apollo-server\n[video8]: https://youtu.be/-taoQzDdJto\n[demo8]: https://graphcms-with-apollo-server.herokuapp.com/\n[`apollo-datasource-graphql`]: https://github.com/poetic/apollo-datasource-graphql\n[2]: https://www.apollographql.com/docs/apollo-server/\n[3]: with-express\n[express]: https://expressjs.com/\n[video9]: https://youtu.be/Uz0uRVttUaE\n[demo9]: https://graphcms-with-express.herokuapp.com/\n[`awesome-graphql-client`]: https://github.com/lynxtaa/awesome-graphql-client\n[4]: with-gatsby\n[gatsby]: https://www.gatsbyjs.org/\n[demo10]: https://hygraph-with-gatsby.vercel.app/\n[`gatsby-source-graphcms`]: https://github.com/hygraph/gatsby-source-graphcms\n[gatsby (file system route api)]: with-gatsby-filesystem-routing\n[video11]: https://youtu.be/vFF-C_FXQHI\n[demo11]: https://hygraph-with-gatsby-filesystem-routing.vercel.app/\n[file system route api]: https://www.gatsbyjs.com/docs/file-system-page-creation\n[gatsby image]: with-gatsby-image\n[video12]: https://youtu.be/v4MlWu5ujUA\n[demo12]: https://hygraph-with-gatsby-image.vercel.app/\n[`gatsby-image`]: https://www.gatsbyjs.org/packages/gatsby-image/\n[graphcms image]: with-graphcms-image\n[video13]: https://youtu.be/v4MlWu5ujUA\n[demo13]: https://hygraph-with-graphcms-image.vercel.app/\n[`graphcms-image`]: https://github.com/hygraph/react-image\n[graphql codegen]: with-graphql-codegen\n[demo14]: https://hygraph-with-graphql-codegen.vercel.app/\n[graphql code generator]: https://graphql-code-generator.com/docs/getting-started/index\n[schema stitching (with graphql mesh)]: with-graphql-mesh\n[graphql mesh]: https://www.graphql-mesh.com\n[gridsome]: with-gridsome\n[video15]: https://youtu.be/XOxhA938c20\n[demo15]: https://hygraph-with-gridsome.vercel.app/\n[`@gridsome/source-graphql`]: https://www.npmjs.com/package/@gridsome/source-graphql\n[mdx (with gatsby)]: with-gatsby-mdx\n[`gatsby-plugin-mdx`]: https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx\n[video16]: https://youtu.be/fXv4ryR-t0A\n[demo16]: https://hygraph-with-gatsby-mdx.vercel.app/\n[mdx (with next.js)]: with-nextjs-mdx-remote\n[video17]: https://youtu.be/mJSY4IfAG7o\n[demo17]: https://hygraph-with-nextjs-mdx-remote.vercel.app/\n[5]: with-nextjs\n[video18]: https://youtu.be/fRqGq6aHUKE\n[demo18]: https://hygraph-with-nextjs.vercel.app/\n[next.js i18n routing]: with-nextjs-i18n-routing\n[next.js internationalized routing]: https://nextjs.org/docs/advanced-features/i18n-routing\n[video19]: https://youtu.be/lCr8e4SkbUk\n[demo19]: https://hygraph-with-nextjs-i18n-routing.vercel.app/\n[next.js image]: with-nextjs-image\n[video20]: https://youtu.be/nuRa2Gh41Ck\n[demo20]: https://hygraph-with-nextjs-image.vercel.app/\n[next.js image component]: https://nextjs.org/docs/api-reference/next/image\n[next.js image with custom loader]: with-nextjs-image-loader\n[video21]: https://youtu.be/loatYRYGLUI\n[demo21]: https://hygraph-with-nextjs-image-loader.vercel.app/\n[custom loader]: https://nextjs.org/docs/api-reference/next/image#loader\n[nuxt.js]: with-nuxtjs\n[video22]: https://youtu.be/kTdsFYonNQ4\n[demo22]: https://hygraph-with-nuxtjs.vercel.app/\n[demoNuxt]: https://hygraph-with-nuxtjs-nuxt-graphql-client.vercel.app/\n[Nuxt3 + nuxt-graphql-client]: with-nuxt-graphql\n[react.js]: with-reactjs\n[react.js with react query]: with-react-query\n[video23]: https://youtu.be/QXgtDR9VIWc\n[demo23]: https://hygraph-with-reactjs.vercel.app/\n[vue.js]: with-vuejs\n[video24]: https://youtu.be/CVM-BFLWwro\n[demo24]: https://hygraph-with-vuejs.vercel.app/\n[sveltekit]: with-sveltekit\n[video26]: https://youtu.be/RHorjtLq1LY\n[demo26]: https://hygraph-with-sveltekit.vercel.app/\n[sveltekit with urql]: with-sveltekit-and-urql\n[demo27]: https://with-sveltekit-and-urql-xi.vercel.app/\n[eleventy]: with-eleventy\n[demo28]: https://hygraph-with-eleventy.vercel.app/\n[astro]: with-astro\n[demo29]: https://hygraph-with-astro.vercel.app/\n[vanilla js]: with-vanilla-javascript\n[demo30]: https://hygraph-with-vanilla-js.vercel.app\n[nextauth]: with-nextauth-credentials\n[demo31]: https://hygraph-with-nextauth-credentials.vercel.app\n[houdini]: with-houdini\n[demo32]: https://hygraph-with-houdini.vercel.app\n[swift]: with-swift\n[swift with `swift-graphql`]: with-swift-graphql\n[swift-graphql]: https://github.com/maticzav/swift-graphql\n[houdini]: with-houdini\n\n\u003c!-- UIX --\u003e\n\n[uix-basic-input]: uix-basic-input\n[uix-cloudinary-input]: uix-cloudinary-input\n\n## Links\n\n[Join our Slack] \u0026middot; [Read the Docs] \u0026middot; [Learn more\nabout Hygraph]\n\n## Contributing\n\nDo 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).\n","funding_links":[],"categories":["Swift"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhygraph%2Fhygraph-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhygraph%2Fhygraph-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhygraph%2Fhygraph-examples/lists"}