API layer in Twenty codebase - Part 1.1

Inspired by BulletProof React, I applied its codebase architecture concepts to the Twenty codebase.

This article focuses only on the API layer in Twenty codebase.

Prerequisite

1. API layer in Twenty codebase — Part 1.0

Approach

The approach we take is simple:

1. Pick a route

2. Locate this route in Twenty codebase.

3. Review how the data is fetched.

4. We repeat this process for 3 pages to establish a common pattern, see if there’s any exceptions.

In this part 1.1, you will learn the API layer in the plan-required route and see what library is used to fetch the plans data from the server, where these files are located.

I reviewed the /plan-required route and found that the following files give us a clear picture about API layer.

1. ChooseYourPlan.tsx

2. ChooseYourPlanContent.tsx

ChooseYourPlan.tsx

In the ChooseYourPlan.tsx, you will see the below code:

 
import { usePlans } from '@/billing/hooks/usePlans';
 
export const ChooseYourPlan = () => {
  const { isPlansLoaded } = usePlans();
  ...
}

usePlans is a hook defined in the billing/hooks/usePlans file. 

usePlans.ts

usePlans.ts is defined as shown below:

import { useListPlansQuery } from '~/generated-metadata/graphql';
import { isDefined } from 'twenty-shared/utils';
 
export const usePlans = () => {
  const { data, loading, error } = useListPlansQuery();
 
  const isPlansLoaded = isDefined(data?.listPlans);
 
  const listPlans = () => {
    if (!data) throw new Error('plans is undefined');
    return data.listPlans;
  };
 
  return { loading, error, isPlansLoaded, listPlans };
};

useListPlanQuery is imported from ~/generated-metadata/graphql This tells us that Twenty uses GraphQL and this query is defined in listPlans.ts

import { gql } from '@apollo/client';
import { BILLING_PRICE_METERED_FRAGMENT } from '@/billing/graphql/fragments/billingPriceMeteredFragment';
import { BILLING_PRICE_LICENSED_FRAGMENT } from '@/billing/graphql/fragments/billingPriceLicensedFragment';
 
export const LIST_PLANS = gql`
  query listPlans {
    listPlans {
      planKey
      licensedProducts {
        name
        description  
...
 

queries are located at /billing/graphql/queries and hooks are located at /billing/hooks/

isDefined

isDefined is a util defined as shown below:

import { isNull, isUndefined } from '@sniptt/guards';
 
export const isDefined = <T>(
  value: T | null | undefined,
): value is NonNullable<T> => !isUndefined(value) && !isNull(value);

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands?

I spent 3+ years studying OSS codebases and wrote 400+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References:

1. alan2207/bulletproof-react

2. twentyhq/twenty

3. packages/twenty-front/…/ChooseYourPlan.tsx

4. twentyhq/twenty/packages/twenty-front/…/usePlans.ts#L4

5. graphql.org/learn/introduction/

6. twentyhq/twenty/packages/twenty-front/…/listPlans.ts

7. twentyhq/twenty/packages/twenty-shared/…/isDefined.ts#L3