Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Nov 24, 2017

GraphCMS Examples

Example projects to help you get started with GraphCMS

Links

Join our Slack · Read the Docs · Learn more about GraphCMS

Examples

GraphCMS Content API Features & Recipes

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

Frameworks & Libraries

Examples demonstrating how to use GraphCMS with popular application frameworks.

Frameworks & Libraries Description
Algolia (Demo, Video) 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

UI Extensions

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.