Pattern for fetching data

[oskarrough]

It'd be good to agree on some smart pattern for fetching data. Something ala @jfalxa's "snapshot" thingy.

• option to say don't fetch same thing twice (local caching)
• reusable queries

How we can we abstract?

Here's an example we can take. The only part that changes is really the supabase query itself. The rest is boilerplate. How do we make it nice?

function Channel({session} {
    const [loading, setLoading] = useState(false)
    const [channel, setChannel] = useState(false)

    async function findChannel() {
        try {
            setLoading(true)
            const user = supabase.auth.user()
            let {data, error, status} = await supabase
                .from('channels')
                .select(`*`)
                .eq('user_id', user.id)
                .single()
            if (error && status !== 406) throw error
            if (data) setChannel(data)
        } catch (error) {
            console.error(error.message)
        } finally {
            setLoading(false)
        }
    }

    // Start fetching channel as soon as we have a session.
    useEffect(() => {
        findChannel()
    }, [session])

    return (
        <article>
            {loading ? (
                <p>Loading</p>
            ) : (
                <p>{channel.id}</p>
            )}
        </article>
    )
}

It should be possible to have a nicer API, maybe something like this??

function Channel() {
  const {data: user, error} = useApi(supabase.from('users').select(`*`).eq('user_id', user.id).single())

  if (error) return <div>failed to load</div>
  if (!user) return <div>loading...</div>
  return <div>hello {user.name}!</div>
}

• https://swr.vercel.app/docs/data-fetching

[jfalxa]

If you want simplicity you may wanna look at https://www.npmjs.com/package/react-async-hook it does the same thing as snapshot but better

If you want all the nice things go for swr or react-query

Le ven. 2 juil. 2021 à 13:26, Oskar @.***> a écrit :

It'd be good to agree on some smart pattern for fetching data. Something ala @jfalxa https://github.com/jfalxa's "snapshot" thingy.

• option to say don't fetch same thing twice (local caching)
• reusable queries

How we can we abstract?

Here's an example we can take. The only part that changes is really the supabase query itself. The rest is boilerplate. How do we make it nice?

function Channel({session} { const [loading, setLoading] = useState(false) const [channel, setChannel] = useState(false)

async function findChannel() { try { setLoading(true) const user = supabase.auth.user() let {data, error, status} = await supabase .from('channels') .select(*) .eq('user_id', user.id) .single() if (error && status !== 406) throw error if (data) setChannel(data) } catch (error) { console.error(error.message) } finally { setLoading(false) } }

// Start fetching channel as soon as we have a session. useEffect(() => { findChannel() }, [session])

return (

{loading ? (

Loading

) : (

{channel.id}

)}

)}

It should be possible to have a nicer API, maybe something like this??

function Channel() { const {data: user, error} = useApi(supabase.from('users').select(*).eq('user_id', user.id).single())

if (error) return

failed to load

if (!user) return

loading...

return

hello {user.name}!

}

• https://swr.vercel.app/docs/data-fetching

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/internet4000/radio4000-cms/issues/9, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABNOES4OVMQ5HKUNXJCPKWDTVWO4PANCNFSM47WRF24Q .

[4www]

If you want simplicity you may wanna look at https://www.npmjs.com/package/react-async-hook it does the same thing as snapshot but better

looks nice!

[oskarrough]

All three seem cool.

I'm leaning towards swr or react-query since they support caching. To get the "instant" feel as you browse back and forth between pages I think we need this?

[oskarrough]

Postgrest, which the supabase client js thing uses, also supports all kinds of queries via rest. See https://postgrest.org/en/stable/api.html. Meaning we could actually skip their query builder if we wanted to.

fetch('/channel?id=eq.1234')
// vs
supabase.from('channels').select(`*`).eq('id', 1234.id).single()

It seems to supports tons of queries: https://postgrest.org/en/stable/api.html

[jfalxa]

yeah, I'd go with swr, it's a good compromise between the 2 other libs, plus your already know how to use it.