Search code examples
reactjsvariablesbackendsupabase

front end variable name vs back end variable name


I'm creating a react app using supabase for my back end. And as i was creating the tables supabase said that it is recomended to use lowercase and use an underscore to separate words e.g. column_name. But in the front-end I'd use it as columnName, so does it mean I have to rename it everytime i fetch from column_name to columnName and the other way around everytime i insert for instance?

for example here is the fetching data as I'm getting it so do i need to rename it as I said above or is there a better and easier way for doing that then renaming it everytime?


Solution

  • It's common convention in case-sensitive languages, like Javascript, to use a difference in case to separate words, aka "camel case" ("camelCase"). Case-insensitive languages such as SQL (and I guess whatever supabase uses) can't count on the case to distinguish words, so they instead rely on "snake case" ("snake_case").

    As a developer, you have two options to reconcile that. First, you can simply ignore conventions, and (for instance) use camel case in your database. The sky won't fall, but you might someday make a nasty case-related mistake.

    The second option is to use a function such as Lodash's camelCase/snakeCase to convert case as needed (or write your own). Presumably your app only has a handful of "go talk to the database" functions, and those should be the only place where you'll need to convert case, so it shouldn't be too burdensome.

    To get you started, here's a simple function you can use (with Lodash's camelCase) to camel case all keys in an object, presumably after they come back from your database in snake case. You can easily make a similar snakeCase version:

    import { camelCase } from 'lodash-es';
    
    export const camelizeKeys = (original) => {
      const newObj = {};
      for (let key in original) {
        newObj[camelCase(key)] = original[key];
      }
      return newObj;
    };