Ensuring UI consistency with parallel queries

[fl0ydj]

I have 2 different data sources which have different fetching times and fetch the data in parallel using two useQuery hooks.
The data sources have related data.

In my frontend I am using isSuccess/isPending to show a loading indicator until both queries have finished processing.

If one query now gets invalidated (manually or as it becomes stale), for a brief moment, there is a UI inconsistency as one query shows the stale data and the other shows the data which has just been refreshed. I don't want to show another loading indicator on isFetching as its a bad UX.

How should I deal with that?

My current solution on a high level (which feels a bit hacky):

const queryA=useQuery(...);
  const queryB=useQuery(...);
  const [syncedValue,setSyncedValue]=useState(undefined);

  useEffect(() => {
    if (
      queryA.isSuccess &&
      queryB.isSuccess &&
      !queryA.isFetching &&
      !queryB.isFetching
    ) {
      setSyncedValue({
        isSuccess: true,
        isPending: false,
        isFetching: false,
        data: {
          queryA: queryA.data,
          queryB: queryB.data,
        },
      });
    }
  }, [queryA, queryB]);

  if (queryA.isError) {
    return {
      ...queryA,
      data: undefined,
    } as UseQueryResult<any, Error>;
  }
  if (queryB.isError) {
    return {
      ...queryB,
      data: undefined,
    } as UseQueryResult<any, Error>;
  }
  if (queryA.isSuccess && queryB.isSuccess && syncedValue) {
    return syncedValue;
  } else {
    return {
      ...queryA,
      isSuccess: false,
      isPending: queryA.isPending || queryB.isPending,
      isFetching: queryA.isFetching || queryB.isFetching,
      data: syncedValue?.data,
    } as UseQueryResult<any, Error>;
  }

And then in the frontend, I can be sure that the data between query A and B is in sync.

[fl0ydj]

Would really appreciate any help :)

[singhparshant]

I have the same issue. Any suggestions will be helpful.

[TkDodo]

If one query now gets invalidated (manually or as it becomes stale), for a brief moment, there is a UI inconsistency as one query shows the stale data and the other shows the data which has just been refreshed.

not sure I fully understand this. if you invalidate queryA, you'll show stale data for A & B while it's fetching, and after A has completed, you'll see new data for A and still the same data for B. Where is the brief inconsistency here ?

[fl0ydj]

Sorry both queries get invalidated at the same time. In my specific case, I am querying blockchain data from 2 data sources. So there is one unique event (i.e. a transaction) which I use as a trigger to manually refetch both queries. Both data sources return different aspects of the transaction that just happened.

Lets say we have the following points in time:
t=0: initial
isSuccessA:true, isFetchingA:false, dataA: A1; isSuccessB:true, isFetchingB:false, dataB: B1
t=1: both queries are now stale and refetch
isSuccessA:true, isFetchingA:true, dataA: A1; isSuccessB:true, isFetchingB:true, dataB: B1
t=2: B has a way quicker fetching time and already returns the new data, while A is still fetching
isSuccessA:true, isFetchingA:true, dataA: A1; isSuccessB:true, isFetchingB:false, dataB: B2
-> B shows data which includes the new transaction, A doesn't
t=3: now A also finishes fetching
isSuccessA:true, isFetchingA:false, dataA: A2; isSuccessB:true, isFetchingB:false, dataB: B2

So from t=2 to t=3 my frontend shows inconsistent data. The only way to counter this which I have seen so far was to introduce this hook as shown in the original post.

[fl0ydj]

Ideally, the queryClient would offer a function to refetch but don't update the data fields of the queries until I tell it to.
So something like:

queryClient.freezeCache() //freezes the data fields of all queries
await Promise.all([
queryClient.refetchQueries({
      queryKey: keyA,
}),
queryClient.refetchQueries({
      queryKey: keyB,
})
]) //fetches all queries and adds data to cache but update is not reflected in data fields of queries
queryClient.unfreezeCache() //now the data gets updated

I could presumably do this manually with adding a temporary data storage and then using setQueriesData but that doesn't really scale nicely

[TkDodo]

both queries get invalidated at the same time

okay then it seems like, from query perspective, you just want one Query that fires two requests ?

const { data } = useQuery({
  queryKey,
  queryFn: async () => {
    const [queryA, queryB] = await Promise.all([
      fetchQueryA(),
      fetchQueryB(),
    ])

    return { queryA, queryB }
  }
})

[fl0ydj]

Yeah but then I also want these query caches to be available individually and want to be able to invalidate them individually as in other places I would just use query A for example.

So I could use the queryClient.ensureQueryData for both in my aggregated query but then I would have to invalidate the individual queries and the aggregate query which seems redundant and error prone.

[TkDodo]

there is no good solution for this. You either want them to live together (one query) or not (two queries). If they are two queries, they will invalidate separately.