I have a NextJS application with a Supabase backend with multiple DB tables. One of them is the Players table with following columns: id, owner_id, name, strength, fitness. Strength and fitness are floating numbers.

To fetch the players of the logged in user, I use the following function:

export async function fetchPlayers(): Promise<Player[]> {
  const {
    data: { user },
  } = await supabase.auth.getUser();

  const { data } = await supabase
    .from(PLAYERS_TABLE)
    .select("*")
    .eq("owner_id", user!.id);;

  return data as Pigeon[];
}

The problem with this DB call is that it shows the floating numbers in the network tab of the developer tools from the browser. I do not want the users to see/know the floating numbers. Is there a possibility to change the DB call that only returns a rounded integer for these (specific) columns? OR maybe a DB function that I can add somewhere?

I have a NextJS application with a Supabase backend with multiple DB tables. One of them is the Players table with following columns: id, owner_id, name, strength, fitness. Strength and fitness are floating numbers.

To fetch the players of the logged in user, I use the following function:

export async function fetchPlayers(): Promise<Player[]> {
  const {
    data: { user },
  } = await supabase.auth.getUser();

  const { data } = await supabase
    .from(PLAYERS_TABLE)
    .select("*")
    .eq("owner_id", user!.id);;

  return data as Pigeon[];
}

The problem with this DB call is that it shows the floating numbers in the network tab of the developer tools from the browser. I do not want the users to see/know the floating numbers. Is there a possibility to change the DB call that only returns a rounded integer for these (specific) columns? OR maybe a DB function that I can add somewhere?

• javascript
• typescript
• next.js
• supabase

• 1 I see no SQL above. Do you really want a SQL answer? – jarlh Commented Mar 17 at 13:14
• It's not clear to me where you're stuck. Have you tried looping over your array and updating elements directly? Should you change the backing data to store integers in the first place if that's the intended goal? What have you tried so far and in what way does that not solve the problem? – David Commented Mar 17 at 13:18
• @jarlh It is possible to create (plpg)sql database functions and call them in the code. I am open to every solution. If its not possible with the supabase api, I will need such a db function I guess. supabase/docs/guides/database/functions – Jan D.M. Commented Mar 17 at 13:21
• @David You can see the application as a browser simulation game. Those columns are on purpose a floating point. When players are trained, the float will go up just a little bit. The users of the game should only be allowed to see the rounded integer. I have tried to round the floats into an integer after the DB call; in that way the integers are showed to the users, but they are still visible in the developer tools as part of the response of the DB call which I do not want – Jan D.M. Commented Mar 17 at 13:25

1 Answer 1

You can modify your Supabase query to round the floating point numbers before they're returned to the client.

export async function fetchPlayers(): Promise<Player[]> {
  const {
    data: { user },
  } = await supabase.auth.getUser();

  const { data } = await supabase
    .from(PLAYERS_TABLE)
    .select(`
      id,
      owner_id,
      name,
      round(strength)::integer as strength,
      round(fitness)::integer as fitness
    `)
    .eq("owner_id", user!.id);

  return data as Player[];
}