Storyblok: GraphQL Codegen Integration Demo

This repository showcases the integration of GraphQL Codegen with Storyblok, demonstrating how to efficiently fetch data and generate type-safe GraphQL queries in a web application. It guides through setting up GraphQL Codegen with Storyblok's CMS, including examples of GraphQL queries and the automatic generation of TypeScript types.

Features

• Integration of Storyblok CMS with GraphQL
• Setup and usage of GraphQL Codegen
• Examples of GraphQL queries to Storyblok
• Auto-generation of TypeScript types and operations
• Demonstrating type-safe data fetching in a modern web application

Prerequisites

• Node.js (preferably the latest stable version)
• npm or another package manager
• Access to Storyblok (free tier available)
• A "post" content type created in your connected Storyblok project. Alternatively, you can modify the GraphQL query in src/graphql to match your existing content types.

Installation

Clone the repository

git clone git@github.com:focusreactive/Demo-Storyblok-GraphqQL-Codegen.git
cd Demo-Storyblok-GraphqQL-Codegen

Install dependencies

npm install

Setting up environment variables

Create a .env.local file in the root directory and add your Storyblok API token:

STORYBLOK_ACCESS_TOKEN=your_token_here

Run the application

npm start

Run Codegen in watch mode

To continuously generate types and operations as you develop, run the codegen in watch mode:

npm run dev:codegen

This will automatically update your types and operations based on your GraphQL schema and queries whenever you make changes.

Usage

This demo project includes several key elements to showcase the integration of GraphQL Codegen with Storyblok:

Code generation scripts

• npm run codegen: runs the code generation process to create TypeScript types and operations from your GraphQL schema
• npm run dev:codegen: runs the code generation in watch mode, automatically updating types and operations when changes are detected

Codegen configuration file

codegen.ts at the root of the project contains the configuration for GraphQL Codegen. This file specifies the plugins used, the location of the GraphQL documents, and other settings relevant to code generation.

GraphQL query for Storyblok content

The GraphQL query located in src/graphql/posts.graphql is designed to fetch all 'post' stories from Storyblok. Please note, for this query to function correctly, you must first create a 'post' content type in your Storyblok project.

GraphQL schema file

src/generated/storyblok.graphql contains the GraphQL schema fetched from Storyblok. This file is crucial for the code generation process and provides the structure for the generated types.

Generated SDK

The SDK file src/generated/storyblokSdk.ts is generated by GraphQL Codegen. It provides typed functions for interacting with the Storyblok GraphQL API.

Page component

The PostsPage component, located in src/app/page.tsx, demonstrates how to use the generated SDK to fetch and render JSON data from Storyblok. The component serves as a practical example of integrating the SDK into a page.

Contributing

Contributions to enhance this demo are welcome. Please fork the repository and create a pull request with your improvements. For major changes, please open an issue first to discuss what you would like to change.

Credits

This project was created at FocusReactive - the expert consultancy for the modern web. We specialize in helping clients beat the competition and accelerate business growth. With a deep expertise in headless CMS, NextJS, and eCommerce, we deliver cutting-edge solutions that prioritize your business goals.

Our Expertise

• Content-Centric Websites: We have a deep experience building extendable, SEO optimized content and marketing websites with advanced CMS integrations and analytics.
• Headless eCommerce: Our next-generation, content-rich, and performant online eCommerce websites come with end-to-end integrations to power your digital business.
• Headless CMS Consulting: We offer multi-channel CMS development, modeling, customization, and support to help you manage your content seamlessly across various platforms.
• Web Performance: Our experts can audit, transform the architecture, and optimize your website to meet the 100 SCORE Core Web Vitals for exceptional web performance.

If you're looking for expertise in headless CMS, NextJS, or eCommerce, get in touch with FocusReactive today. Visit our website at focusreactive.com to learn more about how we can help you accelerate your business growth.

---

This project is licensed under the MIT License. © 2023 FocusReactive.