Kontent.ai Kickstart Sample React App with GraphQL

This repository contains the solution for the Kontent.ai Kickstart Sample React App using GraphQL. It demonstrates how to fetch content from Kontent.ai using the GraphQL API, providing type-safe queries and efficient data fetching.

If you'd like to explore a fully set up Kontent.ai project, you can import content from one of the backups located in the ./scripts/backups folder.

npm run model:import --filename="<path-to-the-script>"

Contributing

How to Contribute

• Report Issues: Use the GitHub Issues to report bugs or request features.
• Fork the Repository: Create a personal fork of the repository on GitHub.
• Create a Feature Branch: Use a descriptive name for your branch.
• Submit a Pull Request: Submit your changes for review.

Please read our Contributing Guidelines for more details.

Code of Conduct

This project adheres to a Code of Conduct. By participating, you are expected to uphold this code.

Getting Started with Development

• Run npm ci to install packages.
• Create a .env file from .env.template and fill out all necessary variables.
• Run npm run codegen to generate TypeScript types from the GraphQL schema.
• Run npm run dev to run the application in developer mode.

Important

Always run npm run codegen after modifying GraphQL queries to regenerate TypeScript types.

Regenerating GraphQL Types

After updating GraphQL queries in your components or when the Kontent.ai schema changes, you must regenerate the TypeScript types:

npm run codegen

This command uses GraphQL Code Generator to:

• Connect to your Kontent.ai GraphQL endpoint
• Generate TypeScript types in the src/graphql/ directory
• Ensure type safety for all GraphQL operations

Note

Ensure that the .env file contains:

• VITE_ENVIRONMENT_ID (required) - Your Kontent.ai environment ID
• VITE_DELIVERY_API_KEY (optional) - When provided, uses the preview GraphQL endpoint; otherwise uses production

GraphQL Development Workflow

This application uses GraphQL for all data fetching from Kontent.ai:

1. Writing Queries: GraphQL queries are embedded directly in component files using the graphql tag
2. Type Generation: After modifying any GraphQL query, run npm run codegen to update TypeScript types
3. Generated Files: All generated types and helpers are located in src/graphql/ - do not manually edit these files
4. Endpoint Selection: The GraphQL endpoint is automatically determined:
   • With VITE_DELIVERY_API_KEY: Uses preview endpoint for draft content
   • Without API key: Uses production endpoint for published content only

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

---

Support

If you have any questions or need assistance, please reach out:

• Kontent.ai Support: Contact Support

---

Additional Resources

• Kontent.ai Official Documentation: Learn more about Kontent.ai
• Kontent.ai GraphQL API: GraphQL API Documentation
• GraphQL Code Generator: Documentation and Configuration

---