{"id":22728107,"url":"https://github.com/focusreactive/demo-storyblok-graphql-codegen","last_synced_at":"2025-04-13T21:50:19.739Z","repository":{"id":212683153,"uuid":"731644989","full_name":"focusreactive/Demo-Storyblok-GraphQL-Codegen","owner":"focusreactive","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-15T15:56:24.000Z","size":168,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T12:11:08.668Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/focusreactive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-12-14T14:45:14.000Z","updated_at":"2024-06-09T05:04:39.000Z","dependencies_parsed_at":"2023-12-15T16:37:06.572Z","dependency_job_id":null,"html_url":"https://github.com/focusreactive/Demo-Storyblok-GraphQL-Codegen","commit_stats":null,"previous_names":["focusreactive/demo-storyblok-graphqql-codegen","focusreactive/demo-storyblok-graphql-codegen"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2FDemo-Storyblok-GraphQL-Codegen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2FDemo-Storyblok-GraphQL-Codegen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2FDemo-Storyblok-GraphQL-Codegen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2FDemo-Storyblok-GraphQL-Codegen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/focusreactive","download_url":"https://codeload.github.com/focusreactive/Demo-Storyblok-GraphQL-Codegen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248788855,"owners_count":21161726,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-10T17:14:38.494Z","updated_at":"2025-04-13T21:50:19.719Z","avatar_url":"https://github.com/focusreactive.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storyblok: GraphQL Codegen Integration Demo\n\nThis repository showcases the integration of GraphQL Codegen with Storyblok,\ndemonstrating how to efficiently fetch data and generate type-safe GraphQL queries in a web application.\nIt guides through setting up GraphQL Codegen with Storyblok's CMS,\nincluding examples of GraphQL queries and the automatic generation of TypeScript types.\n\n## Features\n\n- Integration of Storyblok CMS with GraphQL\n- Setup and usage of GraphQL Codegen\n- Examples of GraphQL queries to Storyblok\n- Auto-generation of TypeScript types and operations\n- Demonstrating type-safe data fetching in a modern web application\n\n## Prerequisites\n\n- Node.js (preferably the latest stable version)\n- npm or another package manager\n- Access to Storyblok (free tier available)\n- 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.\n\n## Installation\n\n**Clone the repository**\n\n```sh\ngit clone git@github.com:focusreactive/Demo-Storyblok-GraphqQL-Codegen.git\ncd Demo-Storyblok-GraphqQL-Codegen\n```\n\n**Install dependencies**\n\n```sh\nnpm install\n```\n\n**Setting up environment variables**\n\nCreate a `.env.local` file in the root directory and add your Storyblok API token:\n\n```env\nSTORYBLOK_ACCESS_TOKEN=your_token_here\n```\n\n**Run the application**\n\n```sh\nnpm start\n```\n\n**Run Codegen in watch mode**\n\nTo continuously generate types and operations as you develop, run the codegen in watch mode:\n\n```sh\nnpm run dev:codegen\n```\n\nThis will automatically update your types and operations based on your GraphQL schema and queries whenever you make changes.\n\n## Usage\n\nThis demo project includes several key elements to showcase the integration of GraphQL Codegen with Storyblok:\n\n**Code generation scripts**\n\n- `npm run codegen`: runs the code generation process to create TypeScript types and operations from your GraphQL schema\n- `npm run dev:codegen`: runs the code generation in watch mode, automatically updating types and operations when changes are detected\n\n**Codegen configuration file**\n\n[`codegen.ts`](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.\n\n**GraphQL query for Storyblok content**\n\nThe GraphQL query located in [`src/graphql/posts.graphql`](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.\n\n**GraphQL schema file**\n\n`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.\n\n**Generated SDK**\n\nThe SDK file `src/generated/storyblokSdk.ts` is generated by GraphQL Codegen. It provides typed functions for interacting with the Storyblok GraphQL API.\n\n**Page component**\n\nThe `PostsPage` component, located in [`src/app/page.tsx`](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.\n\n## Contributing\n\nContributions 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.\n\n## Credits\n\nThis 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.\n\n### Our Expertise\n\n- **Content-Centric Websites**: We have a deep experience building extendable, SEO optimized content and marketing websites with advanced CMS integrations and analytics.\n- **Headless eCommerce**: Our next-generation, content-rich, and performant online eCommerce websites come with end-to-end integrations to power your digital business.\n- **Headless CMS Consulting**: We offer multi-channel CMS development, modeling, customization, and support to help you manage your content seamlessly across various platforms.\n- **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.\n\nIf you're looking for expertise in headless CMS, NextJS, or eCommerce, get in touch with **FocusReactive** today. Visit our website at [focusreactive.com](https://focusreactive.com/) to learn more about how we can help you accelerate your business growth.\n\n\u003cimage src=\"https://github.com/focusreactive/MVP-NextJS13-New-Features/assets/14885189/7c67e385-3f79-43e3-ba27-bada1ebddf03\" width=\"500px\"/\u003e\n\n---\n\n_This project is licensed under the MIT License. © 2023 FocusReactive._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocusreactive%2Fdemo-storyblok-graphql-codegen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffocusreactive%2Fdemo-storyblok-graphql-codegen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocusreactive%2Fdemo-storyblok-graphql-codegen/lists"}