How to use useSWR with callback fetcher?

[MartinXPN]

The Question

I'm trying to use the SWR hook with a fetcher that's not a promise but rather accepts a callback as the last argument of the function. Is it possible to use useSWR (or maybe another hook) that would work with a callback fetcher?

My Use Case

I'm using firebase/firestore to store the data and I've separated the business logic from the view and the services/ are responsible for updating and getting the data from the firestore. Right now my services accept arguments like query parameters, ids, etc along with a callback function that would return the new data when a new data snapshot is available.

I wanted to somehow wrap the useSWR hook or maybe use another hook to be able to get the data from the service with a callback but wasn't able to do so.
Maybe someone has already figured it out and knows how to use swr with callback-based fetchers?

[swand0g]

The fetcher would still have to be an async function (eg returns a promise) but I think you'd still be able to just call the callback within the fetcher. Though at that point you may be ignoring the data that useSWR return so not sure if you'd still want to be using the hook

What's your current implementation look like?

[MartinXPN]

I currently keep a state and populate it in a useEffect. In most of the API calls it looks like this:

import {fetchData} from '../services/data';

function SomeComponent() {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetchData('someId', (res) => setData(res));
    }, []);

    // ...
}

While this looks simple, it would look nicer if there wouldn't be a need for writing a separate useEffect when every time calling a service.

[swand0g]

Ahh I see, yeah that makes sense

Well you might want to try just writing your own hook for that. Something like this should work for your case

import { useState, useEffect } from 'react'
import { fetchData } from '../services/data'

function useData(id) {
  const [data, setData] = useState(null)
  
  useEffect(() => {
    fetchData(id, (res) => setData(res))
  }, [setData])

  return [data, setData]
}

You could also change it to use your callback function and return the data if you're interested in using the fetched data

import { useState, useCallback, useEffect } from 'react'
import { fetchData } from '../services/data'

function useData(id, yourCallbackFunc) {
  const [data, setData] = useState(null)
  const callback = useCallback(res => yourCallbackFunc(res), [])
  
  useEffect(() => {
    fetchData(id, (res) => {
      setData(res)
      callback(res)
    })
  }, [setData])

  return data
}

The useCallback call just helps if you plan on using the state var and passing it down a component tree