React Hooks

[cdedreuille]

From the Slack clone example, I can see that in order to get realtime data from Supabase, you are creating a listener and then if there's a new row added you're concatenating the new row with the existing one. While this is pretty simple to understand, I wonder if there is a simpler way to do this?

Firebase has the .onSnapshot() method with the listener built-in.

Is this something you are planning to do? Or is there a Reac Hook that simplifies Supabase queries out there?

I'm mostly using react-firebase-hooks right now to query Firebase on my Nextjs app.

[cdedreuille]

I created a React hook like this to test it out. Not sure if this is the best optimisation, but it should make queries easier:

import { useEffect, useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_KEY
);

const useSupabaseQuery = (query, listener) => {
  const [data, setData] = useState(null);
  const [count, setCount] = useState(null);
  const [loading, setLoading] = useState(true);

  const fetchData = async () => {
    const { data: p, error, count: c } = await query;
    if (error) console.log('error', error);
    if (c) setCount(c);
    else setData(p);
  };

  useEffect(() => {
    // Get Products
    fetchData();

    // Listen for updates
    if (listener) {
      const listen = supabase
        .from(listener)
        .on('*', () => fetchData())
        .subscribe();

      return () => {
        listen.unsubscribe();
      };
    }
    return () => {};
  }, []);

  useEffect(() => {
    if (data) setLoading(false);
  }, [data]);

  if (count) return [data, loading, count];
  return [data, loading];
};

export default useSupabaseQuery;

I use it like this:

const [products, loading, count] = useSupabaseQuery(
  supabase.from('products').select('*').order('id', { ascending: false }),
  'products'
);

I'm actually creating a client both on the hook and on my component. Not sure if that's a problem.

[kiwicopple]

This is a very elegant solution @cdedreuille 👍

I'm actually creating a client both on the hook and on my component. Not sure if that's a problem.

It's not really a problem. Since you are using the "realtime" funcitonality, each client will create a new socket connection so it's not completely optimized, but I don't think it would matter for 99% of use-cases

At some point we might build a hooks library, or better-yet: we will likely add a "context" object where you can wrap your whole app with an "auto-updating" store.