React Query doesn't resolve in a custom hook

[sarahk]

I'm getting a list of files from google's firebase storage. The query gets called and returns the right data but react-query doesn't seem to receive the data. All my other hooks are written with this structure. What am I not seeing?

export function useCompanyStorage(companyid) {

  // turns the imagepath into something usable.
  const getImagepath = (bucket, fullPath) =>
    `https://firebasestorage.googleapis.com/v0/b/${bucket}/o/${fullPath.replaceAll(
      "/",
      "%2F"
    )}?alt=media`;

  // the heavy lifting
  const getListFromStorage = async () => {
    const listRef = ref(storage, `uploads/${companyid}`);
    const rawList = await listAll(listRef);

    const output = rawList.items.map((itemRef, idx) => {
      let imgkey = itemRef.name.replaceAll(".", "");
      return {
        path: getImagepath(itemRef.bucket, itemRef.fullPath),
        fullPath: itemRef.fullPath,
        key: imgkey,
        container: "inactive",
        special: "",
        sortorder: idx,
      };
    });

    // this console.log runs
    console.log("getListFromStorage then", output);
    return output;
  };

//altOutput is a Promise, data is correct
  const altOutput = getListFromStorage().then(data => console.log('altOutput then',data));
  console.log('altOuput:', altOutput);
 
  const result = useQuery(["storage", companyid], getListFromStorage);
  // this console.log doesn't run
  console.log("useCompanyStorage result", result);
  return result;
}

Edited to add detail
Using the debug tool on the browser I can see the call, it has data, the right key, isFetching is false

[karol-janik]

Have you tried to use function without mutating data? I mean just create function that returns call to listAll, without map. Or maybe u could try to return useQuery... and then call it in the component? 🤔

I'm wondering, is result empty/undefined?

[sarahk]

Hi @karol-janik - changing it to getListFromStorage1 makes no difference.

In the debug tool I can see the query in the list and the data in the Query Details panel for both functions - so R-Q does get the final data from the promise but it doesn't get passed to the calling component.

const getListFromStorage1 = async () => {
    const listRef = ref(storage, `uploads/${companyid}`);
    const rawList = await listAll(listRef);
    return rawList;
  };

[karol-janik]

Also, have you tried to remove these lines:

//altOutput is a Promise, data is correct
  const altOutput = getListFromStorage().then(data => console.log('altOutput then',data));
  console.log('altOuput:', altOutput);

[sarahk]

I've bugged my daughter's bf who has more react experience but none with react-query. We've added to the query but the logs for onSuccess, onSettled, and onError don't get run.

const result = useQuery(["storage", companyid], getListFromStorage,{
    onSuccess: (data) => console.log('getListFromStorage onSuccess: ', data),
    onSettled: (data) => console.log('getListFromStorage onSettled: ', data),
    onError: (error) =>
      console.error(`getListFromStorage error: ${error.message}`, error),
  });

[sarahk]

I've just run up a much-simplified codesandbox and it works - the function is untouched.
The react-query debug tool on my dev site shows the data, but it doesn't feed into my component or trigger those log calls.
It's bizarre, but not a react-query problem.

[sarahk]

Also, have you tried to remove these lines:

//altOutput is a Promise, data is correct
  const altOutput = getListFromStorage().then(data => console.log('altOutput then',data));
  console.log('altOuput:', altOutput);

Yep, those lines were just there to prove that the function works. They're not the problem.

[sarahk]

Took it back to basics and cut & paste the sample code from the firebase docs. I'd read some articles talking about how forEach() isn't best practice so despite the Google crew using it in their examples I decided to use map(). Turns out their forEach isn't the standard forEach.

I've reworked my code over and over and it runs happily, outputs all the right stuff but breaks when I return it. If I let it run but return my mock data I get all the right stuff in the console like:

getListFromStorage onSuccess: (5) [{…}, {…}, {…}, {…}, {…}]

but in my component data, isLoading, isSuccess aren't updated - or at least they don't trigger a useEffect.

const { data, isLoading, isSuccess } = useCompanyStorage(companyid);

I've gone over the install and setup info on the site and it seems ok - _app.js does have < Hydrate state={pageProps.dehydratedState} > but I'm not using it on this page. I've got all my hooks at the top of the component, then my use effects and then everything else. If it's been possible to move something to a component I've done it. It is running in a component but my understanding is that components are like mini-namespaces so I don't have to worry that another component has a "data" etc.

The only thing I haven't done is move the logic and state to a context but until this is working I'm loathe to mess with it any more.

It's almost midnight, been a long day swimming against the tide. If I get it sorted I'll update this.

[TkDodo]

i would start with narrowing it down by replacing the getListFromStorage function with something simple as:

const getListFromStorage = async () => {
  return Promise.resolve(someMockData)
}

if that works, you know that your issue lies within the queryFn itself. Then, you can add more code until it breaks. If this simple function doesn't work, there might an issue with your setup, like a queryClient that gets re-created on every render ...

[TkDodo]

also, a codesandbox reproduction is always better to assist you than code snippets :)