What reexecute means?

[cdedreuille]

Hi,

First of all, thanks for building this project. This is great.
I'm a bit confused about the meaning of reexecute in this structure
const [{ count, data, error, fetching }, reexecute] = useSelect('todos') .

Is this just a function to fetch the data again? Any documentation or example on where this could be useful?

Thanks

[tmm]

reexecute is a function for re-running the underlying select API request and updating the response values (data, error, etc). You could call reexecute if you wanted to manually refresh data after a user makes changes to something or with a refresh button:

import { useSelect } from 'react-supabase'

function Page() {
  const [{ count, data, error, fetching }, reexecute] = useSelect('todos')

  const refresh = async () => {
    const res = await reexecute()
    // can access response properties: res.data, res.error, etc.
  }

  if (error) return <div>{error.message}</div>
  if (fetching) return <div>Loading todos</div>
  if (data?.length === 0) return <div>No todos</div>

  return <>
    <button onClick={refresh}>Refresh</button>
    {/* display todos with `data.map` */}
  <>
}

You can also assign a different name instead of reexecute:

const [, fetchTodos] = useSelect('todos')

[cdedreuille]

Ah that make sense. Quite useful indeed. Perhaps a good way to refresh your data without using realtime.

[cdedreuille]

@tmm I tried the reexecute function but it seems to bring the data to its default state undefined before fetching again. Is there a way to avoid that as it's creating a blink every time the function is executed?

I could use useRealtime but from what I couldn't make it work for row level changes like 'countries:id=eq.200'

[tmm]

Going to keep data on new executions and instead will add a stale flag (initialized to false, set to true before data is fetched). Does that work?

Aside: useRealtime composes useSelect and useSubscription. So you could create your own hook in a similar fashion for row-level changes.

Thanks for bringing up all these points! We're making the library better for others.

[cdedreuille]

Hi @tmm. stale will definitely help. I'm just wondering why this is not true by default. Showing a loading state when the data is first loading is a good behaviour since we are starting from 0 but when there is some data already, replacing the data in a snap feels a much better experience. If you want to show the loading state for some reason then you can add stale to false but in my opinion, replacing data should happen in a snap.

[cdedreuille]

Regarding useRealtime it's still something I'm having a hard time managing compared to Firebase. In firebase, you can query anything and simply listen to it. It doesn't work that way with Supabase unfortunately. I wish there was a hook that would simplify the process. It's actually very close to reexecute but instead of being triggered by in the app, it's triggered by a new payload from Supabase realtime.

Could this be an option on useSelect? { subscribe: 'countries:id=eq.200' } that will listen to whatever is in subscribe and trigger reexecute when there's a new payload. This would be absolutely magic and so useful.