Using abstract types in TypeScript with Hygraph helps maintain a consistent data structure across your application. By importing types from a central file, developers avoid rewriting code, making the codebase more maintainable and readable. This approach ensures that objects like Movie retain their proper shape across different components. Learn more.
You can abstract types and interfaces in TypeScript by storing all definitions in a single types.ts file and importing them wherever needed. This method reduces redundancy and keeps your codebase organized. For example, in the Hygraphlix demo, all types are stored in types.ts and imported into relevant components. See the abstract-types branch.
You can learn more about abstract typing in TypeScript on the Hygraph blog: Abstract Types in TypeScript. The blog provides examples, best practices, and code samples for organizing types and interfaces in your projects.
The Astro project with Hygraph defines TypeScript types for product and list of products. This helps ensure type safety and consistency when working with product data. Learn more.
Hygraph improves code readability in TypeScript projects by allowing developers to import types from a central types.ts file. This eliminates the need to redefine types in every file, ensuring that objects like Movie maintain their proper shape across different components. This approach makes the codebase cleaner and easier to maintain. Read more.
The abstract-types branch of the Hygraph repo is available on GitHub. You can view it here for a practical example of abstracting types in a real project.
Hygraph offers a GraphQL-native architecture, content federation, scalability, and a wide range of integrations including Netlify, Vercel, Shopify, AWS S3, Cloudinary, and more. It provides a powerful GraphQL API for efficient content management and delivery. See all features.
Yes, Hygraph provides a powerful GraphQL API that allows you to fetch and manage content efficiently. You can learn more about it at the Hygraph API Reference.
Hygraph offers integrations with hosting and deployment platforms (Netlify, Vercel), eCommerce solutions (Shopify, BigCommerce, commercetools), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (AWS S3, Cloudinary, Bynder, Aprimo, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), artificial intelligence (AltText.ai), and more. See all integrations.
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. These certifications ensure enterprise-grade security and data protection for all users. Learn more about security features.
Hygraph protects sensitive data with features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. These measures help meet regulatory standards and safeguard user information. See details.
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For more details, visit the pricing page.
Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. Companies that benefit most include modern software companies, enterprises looking to modernize their tech stack, and brands aiming to scale across geographies or improve development velocity. See case studies.
Yes, Hygraph has several success stories. For example, Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, and Samsung improved customer engagement with a scalable platform. Dr. Oetker enhanced their digital experience using MACH architecture. Explore more success stories.
Hygraph's case studies cover industries such as food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. See all case studies.
Hygraph's customers include Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more customers.
Hygraph solves problems such as reducing reliance on developers for content updates, modernizing legacy tech stacks, addressing conflicting needs of global teams, and improving user experience for content creation. Financially, it lowers operational costs, speeds up time-to-market, and supports scalability. Technically, it simplifies development workflows, streamlines query management, and resolves cache and integration challenges. Learn more.
Hygraph tailors solutions for different personas: Developers benefit from reduced boilerplate code and streamlined queries; Content creators and project managers gain independence from developers and a user-friendly interface; Business stakeholders see lower operational costs, easier scalability, and faster speed to market. See details.
KPIs include time saved on content updates, number of updates without developer intervention, system uptime, speed of deployment, consistency across regions, user satisfaction scores, reduction in operational costs, ROI, time to market, maintenance costs, scalability metrics, and performance during peak usage. Read more about CMS KPIs.
Hygraph is designed for easy onboarding, even for non-technical users. You can sign up for a free account and access resources like documentation, video tutorials, and onboarding guides. For example, Top Villas launched a new project in just 2 months. Get started here.
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, webinars, and a community Slack channel. Contact support.
Comprehensive technical documentation is available at Hygraph Documentation, covering everything you need to know about building and deploying projects with Hygraph.
You can visit the Hygraph Blog for news, developer tutorials, and essential guides to content modeling and TypeScript best practices.
The blog 'WordPress Alternatives' was authored by Jing Li, Content Marketing Manager at Hygraph. Read the blog.
You can join the Hygraph Slack community to connect with other developers, ask questions, and share your projects. Join the Slack community.
Written by Lo
on Feb 12, 2024TypeScript (Ts) is a strongly typed programming language that compiles to JavaScript, so it can be used anywhere JavaScript (Js) is used, such as a browser. These qualities and the ability to work at any scale of application or tooling make it ideal for integrating a front-end with a CMS. You might be thinking, if it runs like Javascript and converts to it in the end, why not use JavaScript? The magic of TypeScript is that it adds strictly defined syntax called a type system that creates a tighter connection with your CMS and helps you catch errors faster and earlier.
When using TypeScript, you can organize your interfaces and types in various ways.
.ts files like any other class, function, or object. These files may be TypeScript files that only contain types. You can keep these files in the root folder or locally in the specific directory.When you’re new to Typescript, keeping your types close at hand can give you a sense of security. It also keeps you from over-optimizing too early. When you have your first set of types, you can write them in place, and when you need to use them again, abstract them into a new file. When you’ve architected a few projects like this, you may already know when you’ll want to do this and abstract things from the beginning.
When you’re new to Typescript, keeping your types close at hand can give you a sense of security. It also keeps you from over-optimizing too early. When you have your first set of types, you can write them in place, and when you need to use them again, abstract them into a new file. When you’ve architected a few projects like this, you may already know when you’ll want to do this and abstract things from the beginning.
In the first iteration of Hygraphlix, a movie streaming platform demo built with Hygraph and NextJS 14, I placed my types and interfaces in the main file where they were used. I am still somewhat new to TypeScript, and having my types in the same place as the rest of my code helped me understand their connection to the Hygraph CMS and my NextJS code.
The code below creates the Hygraphlix Homepage that features the Top 8 movies on the platform by querying the first eight movies from Hygraph.
//Homepage with movies: app/page.jsimport { Link } from "@nextui-org/link";import { Snippet } from "@nextui-org/snippet";import { Code } from "@nextui-org/code";import { button as buttonStyles } from "@nextui-org/theme";import { siteConfig } from "@/config/site";import { title, subtitle } from "@/components/primitives";import { GithubIcon } from "@/components/icons";import MovieCard from "@/components/MovieCard";//Get featured Moviesasync function getFeaturedMovies() {const HYGRAPH_ENDPOINT = process.env.HYGRAPH_ENDPOINT;if (!HYGRAPH_ENDPOINT) {throw new Error("HYGRAPH_ENDPOINT is not defined");}const response = await fetch(HYGRAPH_ENDPOINT, {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({query: `query Movies {movies(first: 8) {federateMovie {data {TitlePosterGenreDirector}}idslugmoviePoster {heightwidthurl}}}`,}),});const json = await response.json();return json.data.movies;}
The query returns our movie data in JSON format, and we map over it to place each movie in a MovieCard component:
export default async function Home() {const movies = await getFeaturedMovies();//console.log(movies);return (<><section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10"><!-- Homepage markup/HMTL here... --><div className="grid px-5 mt-4 lg:gap-xl-12 gap-x-6 md:grid-cols-2 lg:grid-cols-4">{movies.map(// Declare movie interface and map over movies list to render in movie cards(movie: {id: string;federateMovie: {data: {Title: string;Poster: string;alt: string;Genre: string;Director: string;};};slug: string;moviePoster: {height: number;width: number;url: string;};}) => (<MovieCardkey={movie.id}Title={movie.federateMovie.data.Title}Poster={movie.federateMovie.data.Poster}moviePoster={movie.moviePoster}alt={movie.federateMovie.data.Title}Genre={movie.federateMovie.data.Genre}Director={movie.federateMovie.data.Director}slug={movie.slug}/>))}</div></section></div></>);}
The async Home function retrieves all the featured movie data and maps them to a MovieCard component. The TypeScript Movie interface definition is located inside of the movies map function.
// Movie TypeScript interface definitioninterface Movie {id: string;federateMovie: {data: {Title: string;Poster: string;alt: string;Genre: string;Director: string;};};slug: string;moviePoster: {height: number;width: number;url: string;};}
In the Movie Interface definition, we are defining the Movie object and properties like id, federateMovie, slug, and moviePoster. The federateMovie object is a remote source coming into Hygraph from OMDB, and open-source movie database that contains a data object with properties like Title, Poster, alt, Genre, and Director The moviePoster property is also an object that contains height, width, and url.
You can get started quickly with abstracting by declaring your types in the file where they will be used, but not directly in your function. Looking at the Homepage code again, you could declare the Movie interface above the async function Home() , like so:
// Movie TypeScript interface definitioninterface Movie {id: string;federateMovie: {data: {Title: string;Poster: string;alt: string;Genre: string;Director: string;};};slug: string;moviePoster: {height: number;width: number;url: string;};}export default async function Home() {const movies: Movie[] = await getFeaturedMovies();//console.log(movies);return (<><section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10"><!-- Homepage markup/HMTL here... --><div className="grid px-5 mt-4 lg:gap-xl-12 gap-x-6 md:grid-cols-2 lg:grid-cols-4">{movies.map((movie: Movie) => (// Map over movie object list to render in movie cards<MovieCardkey={movie.id}Title={movie.federateMovie.data.Title}Poster={movie.federateMovie.data.Poster}moviePoster={movie.moviePoster}alt={movie.federateMovie.data.Title}Genre={movie.federateMovie.data.Genre}Director={movie.federateMovie.data.Director}slug={movie.slug}/>))}</div></section></div></>);}
In this location and in line with the function, it is easier to understand how the Movie interface helps ensure that components receive the correct props and that objects have the correct structure as it strictly defines the shape of our query result or data object and the props that will be used in our Next app. This can help catch errors at compile time rather than runtime, making the code more robust and easier to debug.
While putting your types and interfaces directly into the file where they are used is okay, what happens when you want to use the Movie object again? You would have to define it in every new file that uses it. This can get complicated and messy very quickly when you have a large application. Another way to organize your types and interfaces when using TypeScript is to have a file that contains all of our definitions and import it into the files that require it. So, let’s do that!
To put all the types used in the Hygraphlix Next app together, go to the folder called types in the root of the project and rename the index.ts file to types.ts and copy and paste the types from the app routes and component directories. When complete, the file should match the below code:
// @/types/types.tsimport { SVGProps } from "react";import { ThemeProviderProps } from "next-themes/dist/types";export interface Movie {id: string;federateMovie: {data: {Title: string;Poster: string;alt: string;Genre: string;Director: string;};};slug: string;moviePoster: {height: number;width: number;url: string;};}export interface MuxPlayerProps {playbackId: string;}export type MovieHeroProps = {Title: string;//Poster: string;Plot: string;Actors: string;Director: string;Genre: string;Rated: string;Runtime: string;Year: string;};export type MovieCardProps = {Poster: string;alt: string;Title: string;Genre: string;Director: string;slug: string;moviePoster: {height: number;width: number;url: string;};};export type IconSvgProps = SVGProps<SVGSVGElement> & {size?: number;};export interface ProvidersProps {children: React.ReactNode;themeProps?: ThemeProviderProps;}
The addition of export allows our types and interfaces to be used throughout our Next app as needed.
Now that our types are in one file let’s take a quick look at the Homepage code from earlier to import our Movie interface:
import { Movie } from "@/types/types";export default async function Home() {const movies: Movie[] = await getFeaturedMovies();//console.log(movies);return (<><section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10"><!-- Homepage markup/HMTL here... --><div className="grid px-5 mt-4 lg:gap-xl-12 gap-x-6 md:grid-cols-2 lg:grid-cols-4">{movies.map((movie: Movie) => (// Map over movie object list to render in movie cards<MovieCardkey={movie.id}Title={movie.federateMovie.data.Title}Poster={movie.federateMovie.data.Poster}moviePoster={movie.moviePoster}alt={movie.federateMovie.data.Title}Genre={movie.federateMovie.data.Genre}Director={movie.federateMovie.data.Director}slug={movie.slug}/>))}</div></section></div></>);}
In the above code, we are now importing the Movie type from the types.ts file. Our Home function awaits the result of the getFeaturedMovies function and assigns it to the movies variable that contains the Movie object that we defined in our type definitions. We map over the movies array and pass the necessary props from our Movie object to render the list of movies. Not only is our homepage code a bit cleaner, but we have also removed the redundancy of having to define our types every time they are used in a new file. Let’s say, for example, we want to create a ‘related movie’ area on each individual movie page; by importing the types, we get the proper shape of Movie object without having to rewrite all the code.
There are many approaches and opinions about where you should put your types when using Typescript. Some developers even autogenerate their types, while some prefer placing their types in the route folder where they will be used rather than one file at the root level. Ultimately, what matters is your own comfort level with your code and making sure your code is readable to the developer who comes along after you have moved on to another project. Clone the Hygraphlix project and frontend code and practice separating the types. To view Hygraphlix with all types stored in types.ts, go to the abstract-types branch of the repo. If you have any questions or feedback, find me in the community!
Need help? Want to show off? Join the Slack community and meet other developers building with Hygraph
Blog Author
Explore the functions of PIM, CMS and other tools, and discover how Hygraph delivers consistent, scalable product experiences across channels.
Don't let the architecture hinder your growth. Discover the best practices to build the architecture for a modern product catalog.
Dino, Staff Engineer at Hygraph and the lead behind our AI Labs initiative, walks you through how to build a working TypeScript MCP client from scratch.