Transform snake_case to camelCase

[tchief]

One way to have your TypeScript types camelCased. And maybe, there's even a simpler way to do that.

Utils

import snakecaseKeys from 'snakecase-keys';
import camelcaseKeys from 'camelcase-keys';

export type SnakeToCamelCase<S extends string> = S extends `${infer T}_${infer U}`
  ? `${Lowercase<T>}${Capitalize<SnakeToCamelCase<U>>}`
  : S;
export type SnakeToCamelCaseNested<T> = T extends object
  ? {
    [K in keyof T as SnakeToCamelCase<K & string>]: SnakeToCamelCaseNested<T[K]>;
  }
  : T;
export type CamelToSnakeCase<S extends string> = S extends `${infer T}${infer U}`
  ? `${T extends Capitalize<T> ? '_' : ''}${Lowercase<T>}${CamelToSnakeCase<U>}`
  : S;

export type CamelCaseToSnakeNested<T> = T extends object
  ? {
    [K in keyof T as CamelToSnakeCase<K & string>]: CamelCaseToSnakeNested<T[K]>;
  }
  : T;

export const camelToSnake = (request: Request): RequestSnake => snakecaseKeys(request);
export const snakeToCamel = (request: RequestSnake): Request => camelcaseKeys(request);

export interface Request {
  id: string;
  slug: string;
}

export type RequestSnake = CamelCaseToSnakeNested<Request>;

Query

export const saveRequest = async (request: Request) =>
  await supabase
    .from<RequestSnake>('requests')
    .insert(camelToSnake(request), { returning: 'minimal' });

export const loadRequest = async (slug: string) => {
  const { data, error } = await supabase
    .from<RequestSnake>('requests')
    .select('*')
    .eq('slug', slug)
    .single();
  return { data: data ? snakeToCamel(data) : null, error };
};

Kudos to @alaister, @dijonmusters and @dshukertjr.

[dshukertjr]

Thanks for this @tchief ! Have you got Supabase swag already? If not, DM me on twitter with the same handle as Github!

[toki-developer]

@dshukertjr @tchief

Very useful.
However, it does not work correctly with arrays.
To use it correctly when it is an array, it needs to be modified as follows.

export type SnakeToCamelCaseNested<T> = T extends (infer U)[]
  ? SnakeToCamelCaseNested<U>[]
  : T extends object
    ? {
        [K in keyof T as SnakeToCamelCase<K & string>]: SnakeToCamelCaseNested<
          T[K]
        >;
      }
    : T;

before	after

In the case of supabase.from("hoge").select("*"), this correction is important because data is an array

All Codes

import camelcaseKeys from "camelcase-keys";

export type SnakeToCamelCase<S extends string> =
  S extends `${infer T}_${infer U}`
    ? `${Lowercase<T>}${Capitalize<SnakeToCamelCase<U>>}`
    : S;
export type SnakeToCamelCaseNested<T> = T extends (infer U)[]
  ? SnakeToCamelCaseNested<U>[]
  : T extends object
    ? {
        [K in keyof T as SnakeToCamelCase<K & string>]: SnakeToCamelCaseNested<
          T[K]
        >;
      }
    : T;

export const snakeToCamel = <
  T extends Record<string, unknown> | readonly Record<string, unknown>[],
>(
  request: T
) => camelcaseKeys(request) as unknown as SnakeToCamelCaseNested<T>;

How to use

import { PostgrestError } from "@supabase/supabase-js";
import { useEffect, useState } from "react";
import { snakeToCamel } from "utils/snakeToCamel";

type Fetcher<T> = () => Promise<{
  data: T | null;
  error: PostgrestError | null;
}>;

export const useFetchFromSupabase = <T>(fetcher: Fetcher<T>) => {
  const [data, setDate] = useState<T | null>(null);
  const [error, setError] = useState<PostgrestError | null>(null);
  useEffect(() => {
    const fetchData = async () => {
      const { data, error } = await fetcher();
      setDate(data);
      setError(error);
    };
    fetchData();
  }, [fetcher]);

  return { data: data ? snakeToCamel(data) : null, error };
};

import { useFetchFromSupabase } from "hooks/useFetchFromSupabase";
import { supabase } from "libs/supabase";

export const useGetRecipes = () => {
  const { data, error } = useFetchFromSupabase(fetcher);
  return { data, error };
};

const fetcher = async () => {
  const { data, error } = await supabase.from("recipes").select("*");
  return { data, error };
};

snake case	camel case	value

I am still a beginner engineer.
If you have a better code, please let me know.