Wrestling with query composition

[ericpatey]

First off, what a great package. Thank you for react-query.

Even after reading through #1240, I still don't see the way to compose queries properly. The approach in that discussion relies on enabled: false preventing the dependent query from executing. That's great since it will keep the composite hook in loading status. Here's a distilled version of that approach:

function useCompositeData(): UseQueryResult<string> {
  const { data: data1 } = useData1();
  const { data: data2 } = useData2();

  const enabled = !!(data1 && data2);
  
  return useQuery('somekey', () => getCompositeData(data1, data2), { enabled });
}

function getCompositeData(data1: string, data2: string): string {
  // Of course, this could be any sort of transformation - sync or async
  return data1 + " " + data2
}

The problem that I see with this approach is that it fails to deal with error states from the dependent queries. In other words, what happens is useData1()'s result is in the error status? My understanding is that it will not be returned from useCompositeData. In fact, useCompositeData will just be stalled until useData1 gets into the success status.

I fear I may be trying too hard. How have others dealt with this?

[TkDodo]

if the transformation is synchronous, I wouldn't do a query for it at all, but more something like:

function useCompositeData(): UseQueryResult<string> {
  const { data: data1 } = useData1();
  const { data: data2 } = useData2();

  if (!data1 || !data2) return ""
  return getCompositeData(data1, data2)
}

if the transformation is expensive or referential identity is important, I'd stick a useMemo around it :)

In other words, what happens is useData1()'s result is in the error status

if you don't have data1, you can't compute the result. In your version, the someKey query would be in idle status because it is not enabled. You would have to check that if it is idle, you basically have no data and need to fallback to something - like I did with falling back to empty string in my version.

[ericpatey]

Thanks for the response, @TkDodo.

The part that I don't understand is the result type of the composite hook. I need to return, somehow, any errors from useData1 or useData2. If the return type of the composite hook remains useQueryResult, it's pretty hard to fabricate a new useQueryResult manually. I could set the obvious values like data, error, and status. I could even come up with some logic to set things like dataUpdatedAt and failureCount. It gets crazy complex to provide a value for refetch though.

What I actually do in practice is change the return type to a much simpler AsyncData<> type that I can easily create based on the state of the results from useData1 and useData2 and return that instead of a full blown useQueryResult. It just felt to me that I might be doing it wrong.

function useCompositeData(): AsyncData<string> {
  const { error: error1, data: data1 } = useData1();
  const { error: error2, data: data2 } = useData2();
  const enabled = !!(data1 && data2);
  const compositeResult = useQuery('somekey', () => getCompositeData(data1, data2), { enabled });

  const error = error1 ?? error2
  if (error) return { error }
  if (!enabled) return {loading: true }

  return compositeResult
}

export type AsyncData<T> =
  | {
      data?: undefined
      loading: true
      error?: undefined
    }
  | {
      data: T
      loading: false
      error?: undefined
    }
  | {
      data?: undefined
      loading: false
      error: Error
    }

[TkDodo]

That looks fine. Generally, if all you need is the compositeResult, maybe it’s an option to just make two requests one after the other inside the same queryFn and just have one query. Would make all those jugglings a lot easier, but you wouldn’t have access to intermediate results then.