Example projects to help you get started with GraphCMS
All examples in this repo use the same GraphCMS project. You'll need to create your own project with schema shown below.
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.
Create this schema manually
- Display name: Product
- API ID: Product
- Plural API ID: Products
- Name (String, Single line text, Localized, Required, Title)
- Slug (String, Single line text, Required, Unique)
- Description (String, Multi line text)
- Price (Int, Required)
- Reviews (Reference: Reviews, One to Many, Multiple Values, Two-way reference)
- Votes (Reference: Votes, One to Many Multiple Values, Two-way reference, API only)
- Image (Asset, Two-way reference)
- Content (RichText, Rich text)
- Display name: Review
- API ID: Review
- Plural API ID: Reviews
- Name (String, Single line text)
- Comment (String, Multi line text, Required)
- Product (Reference: Product, Two way reference)
- Display name: Vote
- API ID: Vote
- Plural API ID: Votes
- Product (Reference: Product, Two-way reference)
Create this schema with migrations (EXPERIMENTAL)
You'll need to create a Permanent Auth Token with ALL Management API and Content API permissions enabled.
Inside of the root of this monorepo, add .env (template above), and run npx graphcms-migrate.
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 |
| Vue.js (Demo, Video) | A vanilla Vue.js starter using vue create CLI with Vue Router |
| Sapper (Demo) | A Svelte example using Sapper |
| 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.