Skip to content
Lonely Planet Docs

transform.ts

The transform.ts file contains functions that transform raw GraphQL data into UI-ready formats.

File Location

Section titled “File Location”

Page-Level Transform Files

Section titled “Page-Level Transform Files”
src/pages/{routeName}/_graphql/transform.ts

Examples:

src/pages/articles/_graphql/transform.ts
src/pages/places/_graphql/transform.ts
src/pages/articles/[slug]/_graphql/transform.ts

Component-Level Transform Files

Section titled “Component-Level Transform Files”
src/components/{feature}/graphql/transform.ts
src/pages/{route}/_components/{feature}/transform.ts

Examples:

src/components/relatedArticles/graphql/transform.ts
src/pages/articles/_components/sidebar/transform.ts

Function Naming Pattern

Section titled “Function Naming Pattern”
transform{Entity}Data()
transform{Source}To{Target}()

Examples:

export function transformArticleData(raw: ArticleQuery): TransformedArticle {}
export function transformHeroData(raw: HeroFromQuery): HeroData {}
export function transformContentBlocks(raw: ComponentsCollection): ContentBlock[] {}

Typical Structure

Section titled “Typical Structure”
// Imports
import type { ArticlePageQuery } from "#graphql/generated/contentful/schema";
import type { TransformedArticle } from "./transform.types";


// Main transform function
export function transformArticleData(
  data: ArticlePageQuery
): TransformedArticle {
  const article = data.internalPageCollection?.items[0];


  return {
    title: article?.title ?? "",
    slug: article?.slug ?? "",
    content: transformContent(article?.content),
    hero: transformHero(article?.hero),
    metadata: transformMetadata(article?.metadata),
  };
}


// Helper transform functions
function transformHero(hero: HeroFromQuery | null | undefined): HeroData {
  if (!hero) {
    return { title: "", image: null };
  }


  return {
    title: hero.title ?? "",
    image: hero.image ? transformImage(hero.image) : null,
    cta: hero.cta ? transformCTA(hero.cta) : null,
  };
}

Common Patterns

Section titled “Common Patterns”

Nullish Coalescing

Section titled “Nullish Coalescing”
title: article?.title ?? "",
count: article?.viewCount ?? 0,
tags: article?.tags ?? [],

Optional Chaining

Section titled “Optional Chaining”
const title = data.internalPageCollection?.items[0]?.title ?? "";

Array Transformations

Section titled “Array Transformations”
const articles = data.articleCollection?.items
  .filter((item): item is NonNullable<typeof item> => item !== null)
  .map(transformArticleListItem) ?? [];

Union Type Handling

Section titled “Union Type Handling”
function transformComponent(component: ComponentUnion): ContentBlock {
  switch (component.__typename) {
    case "ComponentHero":
      return transformHeroBlock(component);
    case "ComponentText":
      return transformTextBlock(component);
    default:
      return { type: "unknown" };
  }
}
Section titled “Related”