Custom hook that depends on another custom hook

[rswerve]

Hi, I'm trying to make two custom hooks: one that fetches data, and another that filters that data. I need both the filtered and unfiltered results. This is what I've tried.

const useAllRecords = (parameters) => {
    return useQuery(["allData", parameters], () => getData(parameters));
  };
  
const useFilteredRecords = (parameters) => {
    const { data } = useQuery(["getData", parameters], () => getData(parameters));
    if (data) {
      const result = filterRecords(data);
      return useQuery("filteredData", async () => {
        return await result;
      });
    }
  };

The first query, useAllRecords, works fine. I get data and can destructure it where I call it in my app.

The second query, useFilteredRecords, gets into the if (data) block, and the data looks fine. My filter function works properly. But then I see this error: TypeError: can't assign to property "current" on true: not an object thrown from these lines of useBaseQuery:

  var obsRef = React.useRef();

  if (!obsRef.current) {
    obsRef.current = new Observer(queryClient, defaultedOptions);
  }

I have no idea why obsRed would be true here, and I'm not even sure my approach is the best way to do what I'm trying to do.

[TkDodo]

You are calling useQuery in an if statement, which violates the rules of hooks. Have a look at the select option, it should come in handy for data filtering

[rswerve]

Many thanks. Just what I needed. In case it helps anyone else, this is what the second hook looks like now in its working state.

const useFilteredRecords = (parameters) => {
    const { data } = useQuery(["getData", parameters], () => getData(parameters), {
        select: (data) => filterRecords(data),
      });
      return useQuery("getFilteredData", async () => {
        return await data;
      });
  };

[TkDodo]

But why is the second useQuery needed that just awaits data?

i would also make the second hook depend on the first one, otherwise, you’ll have lots of copies in the cache. I‘d do it like this:

const useAllRecords = (parameters, select) => {
    return useQuery(["allData", parameters], () => getData(parameters), { select });
  };

const useFilteredRecords = (parameters) => useAllRecords(parameters, (data) => filterRecords(data))

[rswerve]

My goal is to be able to grab this cached data from other components without needing to pass in the parameters in those other components. I thought by creating it the way I did, I could do queryClient.getQueryData("getData") and queryClient.getQueryData("getFilteredData") wherever I need them.