Ramu Narasinga

Posted on Mar 11

API layer in Twenty codebase - Part 1.1

#opensource #twenty #graphql #api

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

API layer in Twenty codebase — Part 1.0

Approach

The approach we take is simple:

Pick a route
Locate this route in Twenty codebase.
Review how the data is fetched.
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.

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

DEV Community