Code Examples
Features & Recipes
Examples demonstrating how to use GraphCMS features.
| API Features | Description |
|---|---|
| Using Asset Upload | This example demonstrates how to programmatically import assets from a URL using the Asset Upload endpoint |
| Using Mutations | Next.js app demonstrating how to use GraphCMS mutations with graphql-request, SWR and API routes. |
| Using Pagination | This example demonstrates ways you can paginate GraphCMS queries. |
| 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. |
| Using Management SDK | Basic Management SDK script to create a schema with Remote Fields to query data directly from the Stripe API. |
Frameworks & Libraries
Examples demonstrating how to use GraphCMS with popular application frameworks.
| Library / Framework | Description |
|---|---|
| Algolia | Sync content to Algolia via webhooks on publish using Next.js API routes. |
| Apollo Client 3 | Using Apollo Client 3 to query data from GraphCMS. |
| Apollo Server | Using apollo-datasource-graphql to pull a GraphCMS schema into an existing Apollo Server. |
| Express | A simple Express app using ejs templating and awesome-graphql-client. |
| Gatsby | A basic Gatsby site that uses gatsby-source-graphcms to build product pages with data from GraphCMS. |
| Gatsby Image | How to use gatsby-image with GraphCMS assets. |
| GraphCMS Image | How to use graphcms-image with Gatsby. |
| Gridsome | A basic example using gridsome create CLI and @gridsome/source-graphql. |
| Next.js i18n Routing | This example demonstrates how to use Next.js Internationalized Routing with localized GraphCMS content. |
| Next.js Image Component | This example demonstrates how to use the Next.js Image Component with your GraphCMS assets. |
| MDX (with Next) | This example demonstrates how to use markdown fields from GraphCMS with MDX in Next.js |
| Next.js | A basic Next.js application, featuring getStaticProps and getStaticPaths to build static product pages. |
| Nuxt.js | A simple Nuxt.js starter using create-nuxt-app CLI, and a custom Nuxt plugin. |
| React.js | create-react-app example that uses apollo-client to build a blog . |
| Vue.js | A vanilla Vue.js starter using vue create CLI with Vue Router . |
| Sapper | A Svelte example using the Sapper framework. |