Example projects to help you get started with GraphCMS
All examples in this repo use the same GraphCMS project. Clone it to get started:
When working with this repo locally with your own GraphCMS project, you'll need to add the following to your .env:
GRAPHCMS_ENDPOINT=
GRAPHCMS_TOKEN=Examples where we only query the data will hardcode the GRAPHCMS_ENDPOINT to get you going using the example locally, or on Codesandbox.
Examples demonstrating how to use GraphCMS 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 GraphCMS mutations with graphql-request, SWR and API routes |
| Using Pagination (Demo, Video) | Next.js app demonstrating how to paginate GraphCMS 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 |
Examples demonstrating how to use GraphCMS 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 GraphCMS. |
| Apollo Server (Demo, Video) | Using apollo-datasource-graphql to pull a GraphCMS 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 GraphCMS |
| 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 GraphCMS assets |
| GraphCMS Image (Demo, Video) | How to use graphcms-image with Gatsby |
| GraphQL Codegen (Demo) | Automatically generate26 types for your GraphCMS 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 GraphCMS. |
| MDX (with Next.js) (Demo, Video) | This example demonstrates how to use markdown fields from GraphCMS 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 GraphCMS content |
| Next.js Image (Demo, Video) | How to use Next.js Image Component with GraphCMS assets |
| Next.js Image with Custom Loader (Demo, Video) | How to use a custom loader function with Next.js Image Component and GraphCMS 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 GraphCMS with graphql-request in React.js |
| React.js with React Query | This example demonstrates how to query from GraphCMS 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 GraphCMS. |
| 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. |
We've crafted a few example UI extensions for you to get started with. These should show how to extend the GraphCMS 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. |
Join our Slack · Read the Docs · Learn more about GraphCMS
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.