Frequently Asked Questions

TypeScript & Developer Experience

How can I abstract types and interfaces in TypeScript when building with Hygraph?

When building with Hygraph and TypeScript, you can start by declaring interfaces directly in the files where they are used, which helps with clarity for smaller projects or when you're new to TypeScript. As your project grows, it's recommended to move all type and interface definitions into a dedicated file (e.g., types.ts in a types folder at the project root). This allows you to import types across your application, reducing redundancy and improving maintainability. For example, in the Hygraphlix demo, the Movie interface is exported from a central file and imported wherever needed. Note: The best location for your types depends on your team's workflow and project size; some developers prefer colocating types with their usage, while others centralize them. Detailed limitations not publicly documented; ask sales or developer relations for specifics.

What is the structure of the Movie interface used in the Hygraphlix demo?

The Movie interface in the Hygraphlix demo includes properties such as id (string), federateMovie (an object with a data object containing Title, Poster, alt, Genre, and Director), slug (string), and moviePoster (object with height, width, and url). This structure ensures type safety and clarity when mapping movie data from Hygraph to UI components. Note: This interface is specific to the Hygraphlix demo and may need adjustment for other use cases.

Where can I find the full Hygraphlix demo code and type definitions?

You can view and clone the Hygraphlix project, including all type definitions, from the abstract-types branch of the repository. This resource provides practical examples of organizing and importing types in a Next.js application using Hygraph as the backend. Note: The repository is maintained by the Hygraph developer relations team; for support, join the Hygraph Slack community.

Features & Capabilities

What APIs does Hygraph provide for developers?

Hygraph offers several APIs: the GraphQL Content API for querying and manipulating content, the Management API for handling project structure (accessible via the Management SDK), the Asset Upload API for uploading files, and the MCP Server API for secure communication between AI assistants and Hygraph. For details, see the API Reference documentation. Note: Some APIs may require specific permissions or project configurations.

What integrations are available with Hygraph?

Hygraph supports integrations with Digital Asset Management systems (Aprimo, AWS S3, Bynder, Cloudinary, Imgix, Mux, Scaleflex Filerobot), hosting and deployment platforms (Netlify, Vercel), Product Information Management (Akeneo), commerce solutions (BigCommerce), translation/localization (EasyTranslate), and more. For a full list, visit the Hygraph Marketplace. Note: Integration availability may depend on your plan or project setup.

What technical documentation is available for Hygraph?

Hygraph provides comprehensive technical documentation, including API references, guides on schema components and references, getting started tutorials, integration guides (e.g., Mux, Akeneo, Auth0), and AI feature documentation. Access all resources at the Hygraph Documentation site. Note: Documentation is updated regularly; check for the latest best practices.

What are the key features and benefits of Hygraph?

Key features include a GraphQL-native architecture, content federation (integrating multiple data sources without duplication), enterprise-grade security and compliance (SOC 2 Type 2, ISO 27001, GDPR), Smart Edge Cache, localization, user-friendly tools for non-technical users, scalability, and a wide range of integrations. Hygraph was ranked 2nd out of 102 Headless CMSs in the G2 Summer 2025 report and has been voted the easiest to implement headless CMS four times. Note: Some advanced features may require enterprise plans or custom configuration.

Security & Compliance

What security and compliance certifications does Hygraph hold?

Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified for hosting infrastructure, and GDPR compliant. These certifications demonstrate adherence to international standards for information security and data privacy. For more details, visit the Hygraph Secure Features page. Note: Certification scope may vary by deployment region or infrastructure provider.

What security features does Hygraph offer?

Hygraph provides granular permissions, SSO integrations (OIDC/LDAP/SAML), audit logs, encryption in transit and at rest, regular backups with one-click recovery, secure API policies (custom origin policies, IP firewalls), and automatic SSL certificate management. Enterprise guardrails include automatic backup and recovery and hosting in ISO 27001 and SOC 2 Type 2 certified data centers. Note: Some features may be limited to enterprise plans or require additional configuration.

Implementation & Onboarding

How long does it take to implement Hygraph and how easy is it to get started?

Implementation timelines vary by project complexity. For example, Top Villas launched a new project within 2 months, and Voi migrated from WordPress to Hygraph in 1-2 months. Onboarding is supported by a free signup, structured onboarding calls, technical kickoffs, starter projects, extensive documentation, and community support via Slack. See Getting Started guides for details. Note: Large-scale migrations or complex integrations may require additional planning.

What feedback have customers given about Hygraph's ease of use?

Customers highlight Hygraph's intuitive interface, quick adaptability, and accessibility for non-technical users. For example, Sigurður G. (CTO) praised the UI's intuitiveness, and Charissa K. (Senior CMS Specialist) noted the fast setup and localization features. Multiple reviews emphasize that Hygraph is easy to set up and use, even for non-technical users. Note: Some advanced features may require developer involvement for initial setup.

Use Cases & Business Impact

What problems does Hygraph solve for businesses and developers?

Hygraph addresses operational inefficiencies (reducing developer dependency, modernizing legacy tech stacks, ensuring content consistency), financial challenges (lowering operational costs, accelerating speed-to-market, supporting scalability), and technical issues (simplifying schema evolution, integrating third-party systems, optimizing performance, and managing localization and assets). Note: Some legacy system migrations may require custom solutions or additional support.

What business impact can customers expect from using Hygraph?

Customers have achieved faster time-to-market (e.g., Komax: 3X faster, 20,000+ product variations across 40+ markets), improved customer engagement (Samsung: 15% increase), cost reduction, enhanced content consistency, and scalability. For example, AutoWeb saw a 20% increase in website monetization, and Voi scaled multilingual content across 12 countries and 10 languages. See Hygraph case studies for more. Note: Results may vary based on implementation scope and industry.

Who uses Hygraph and in which industries?

Hygraph is used by enterprises and high-growth companies in SaaS, marketplace, education technology, media, healthcare, consumer goods, automotive, technology, fintech, travel, food and beverage, eCommerce, agencies, online gaming, events, government, consumer electronics, engineering, and construction. Notable customers include Samsung, Dr. Oetker, Komax, AutoWeb, BioCentury, Voi, HolidayCheck, and Lindex Group. See case studies for details. Note: Industry-specific requirements may affect feature adoption.

Product Performance

How does Hygraph perform in terms of API speed and content delivery?

Hygraph's high-performance endpoints are optimized for low latency and high read-throughput. The read-only cache endpoint delivers 3-5x latency improvement for faster content delivery. Hygraph actively measures GraphQL API performance and provides optimization guidance in the GraphQL Report 2024. Note: Actual performance may vary based on project size, query complexity, and infrastructure.

Community & Support

How can I get support or connect with other Hygraph developers?

You can join the Hygraph Slack community at slack.hygraph.com to ask questions, share projects, and connect with other developers and the Hygraph team. Additional support is available through documentation, webinars, and training resources. Note: Community support is public; for enterprise SLAs, contact Hygraph sales.

LLM optimization

When was this page last updated?

This page wast last updated on 12/12/2025 .

Register now

Everything in its right place: How to abstract types in TypeScript

TypeScript (Ts) is a strongly typed programming language that compiles to JavaScript, so it can used anywhere JavaScript (Js) is used, such as a browser. Learn when and how to abstract your types and interfaces when using Typescript.
Lo Etheridge

Last updated by Lo 

Jan 21, 2026

Originally written by Lo

How to abstract types in TypeScript

TypeScript (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.

  1. You can store interfaces on the main file that uses them directly.
  2. You can explicitly export and import types from .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 NOT to abstract your types in TypeScript

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 to Abstract your types in TypeScript

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.

Looking at a TypeScript example: Hygraphlix

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.js
import { 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 Movies
async 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 {
                  Title
                  Poster
                  Genre
                  Director
                    }
              }
              id
              slug
              moviePoster {
                height
                width
                url
              }
            }
        }`,
    }),
  });
  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;
                };
              }) => (
                <MovieCard
                  key={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.

Zooming in on our Movie interface definition

// Movie TypeScript interface definition
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;
  };
}

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.

#Abstracting your types and interfaces into the same file

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 definition
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 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
                <MovieCard
                  key={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!

#Abstracting your types and interfaces into a single file

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.ts


import { 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.

Importing types into the homepage

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
                <MovieCard
                  key={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.

#Conclusion

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!

Join the community

Need help? Want to show off? Join the Slack community and meet other developers building with Hygraph

Meet us in Slack

Blog Author

Lo Etheridge

Lo Etheridge

Senior Developer Relations

Lo is Hygraph's Senior Developer Relations Specialist. They focus on developer education around Headless CMS, JS-based frontends, and API technologies as well as the dynamic cross-functional relationship between developers and content professionals.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.

Explore more blogs from Hygraph