Popularity
4.8
Stable
Activity
3.8
Growing
621
38
154

Programming language: Swift
License: MIT License
Tags: CMS     Content Management Systems (CMS)     Content Management System    

hygraph-examples alternatives and similar software solutions

Based on the "Content Management Systems (CMS)" category.
Alternatively, view hygraph-examples alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of hygraph-examples or a related project?

Add another 'Content Management Systems (CMS)' Software solution

Popular Comparisons

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:

Clone project

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][demo5], [Video][video5]) 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][1] (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][3] (Demo, Video) A simple Express app using ejs templating and awesome-graphql-client
[Gatsby][4] (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][5] (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
[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](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](uix-basic-input) Input React A basic <input /> 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.

<!-- Links -->

<!-- Hygraph Features & Recipes -->

<!-- Frameworks & Libraries -->

<!-- UIX -->

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.