React+Supabase开发：前后端变量命名转换有无便捷方案？

不用每次手动重命名，有几种简便方法可以自动处理这种命名风格的转换：

1. 配置Supabase客户端自动转换 #

Supabase的JS客户端支持通过transform选项全局配置数据转换逻辑，一次配置后所有请求自动完成下划线和小驼峰的互转：

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  {
    transform: {
      // 拉取数据时：下划线转小驼峰
      fetch: (data) => convertSnakeToCamel(data),
      // 插入/更新数据时：小驼峰转下划线
      insert: (data) => convertCamelToSnake(data),
      update: (data) => convertCamelToSnake(data)
    }
  }
)

// 下划线转小驼峰的递归工具函数
function convertSnakeToCamel(obj) {
  if (typeof obj !== 'object' || obj === null) return obj
  if (Array.isArray(obj)) return obj.map(convertSnakeToCamel)
  
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => {
      const camelKey = key.replace(/_([a-z])/g, (_, char) => char.toUpperCase())
      return [camelKey, convertSnakeToCamel(value)]
    })
  )
}

// 小驼峰转下划线的递归工具函数
function convertCamelToSnake(obj) {
  if (typeof obj !== 'object' || obj === null) return obj
  if (Array.isArray(obj)) return obj.map(convertCamelToSnake)
  
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => {
      const snakeKey = key.replace(/([A-Z])/g, '_$1').toLowerCase()
      return [snakeKey, convertCamelToSnake(value)]
    })
  )
}

配置完成后，不管是查询返回的data，还是提交给insert/update的参数，都会自动完成命名转换，完全不用手动处理。

2. 用第三方库简化转换逻辑 #

如果不想自己写正则转换函数，可以用成熟的工具库（比如change-case或lodash）来处理键名转换，配合Supabase的transform选项使用：

import { createClient } from '@supabase/supabase-js'
import { camelCase, snakeCase } from 'change-case'

// 递归转换对象所有键名的通用函数
function transformObjectKeys(obj, transformFn) {
  if (typeof obj !== 'object' || obj === null) return obj
  if (Array.isArray(obj)) return obj.map(item => transformObjectKeys(item, transformFn))
  
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [transformFn(key), transformObjectKeys(value, transformFn)])
  )
}

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  {
    transform: {
      fetch: (data) => transformObjectKeys(data, camelCase),
      insert: (data) => transformObjectKeys(data, snakeCase),
      update: (data) => transformObjectKeys(data, snakeCase)
    }
  }
)

这种方式代码更简洁，也不用自己维护正则表达式的转换逻辑。

3. 封装全局API请求函数 #

如果不想修改Supabase客户端的全局配置，可以封装一套统一的请求函数，在数据进出时自动处理转换：

import { supabase } from './your-supabase-client-path'

// 封装查询函数，返回自动转成小驼峰的数据
export async function fetchFromSupabase(table, query = '*') {
  const { data, error } = await supabase.from(table).select(query)
  if (error) throw new Error(error.message)
  return convertSnakeToCamel(data)
}

// 封装插入函数，自动将小驼峰数据转成下划线格式提交
export async function insertToSupabase(table, data) {
  const formattedData = convertCamelToSnake(data)
  const { data: result, error } = await supabase.from(table).insert(formattedData)
  if (error) throw new Error(error.message)
  return convertSnakeToCamel(result)
}

// 复用之前的convertSnakeToCamel和convertCamelToSnake工具函数
function convertSnakeToCamel(obj) { /* ... */ }
function convertCamelToSnake(obj) { /* ... */ }

之后所有业务代码都通过这些封装函数调用Supabase，统一处理命名转换，避免重复写转换逻辑。

内容的提问来源于stack exchange，提问作者Niv G.