How can I synchronize data from two different queries, where one is being transformed in useEffect?-CodePudding

I have an array and map being fetched from two different RTK Queries. Array A contains metaData (Id's) used to access the values in map B. Hence, their recency needs to be synchronized so that every value in B has some ID in array A.

I fetch both data from the server, but then apply some filters to map B such that the number of values is potentially reduced. This is done like so:

const queryAResult = useRTKQueryA(); // arrayA = queryAResult.data
const queryBResult = userRTKQueryB(); // mapB = queryBResult.data

const [filteredMapB, setFilteredMapB] = useState([]);

// UseEffect is used here because queryBResult changes as the query is refetched under the appropriate conditions.
useEffect(() => {
  if (queryBResult.data) {
    const mapB = queryBResult.data;
    const filtered = filter(mapB); // Generic filter
    setFilteredMapB[filtered];
  }

}, [queryBResult.data]); // mapB = queryBResult.data


// Here I render a component which is dependent on using arrayA to make accesses to filteredMapB.

The issue im facing is that, while I can listen to the query results for both arrayA and mapB to make sure they're both available (through data, isLoading, isFetching, etc), im unsure of how to make sure that the filtering process in useEffect has occurred before using arrayA to access filteredMapB. Currently the problem occurs because I use the most recently available version of arrayA to access filteredMapB (which is not alway the most recent, since the filtering takes time), so arrayA ends up containing elements not in filteredMapB.

How can I synchronize these? Ideally the solution would lend itself well to a boolean expression I could use to conditionally render the list or a loading spinner.

I have thought about putting both arrays in local state variables and using useCallback to create getters for the two arrays which would return synchronized values by using the dependency array, but would prefer a different solution.

CodePudding user response：

I would not use useEffect at all here. This is something where useMemo comes in a lot more handy, as it happens synchronously and you will never have a render in-between.

const queryAResult = useRTKQueryA(); // arrayA = queryAResult.data
const queryBResult = userRTKQueryB(); // mapB = queryBResult.data

const filteredMapB = useMemo(() => 
  if (queryBResult.data) {
    const mapB = queryBResult.data;
    const filtered = filter(mapB); // Generic filter
    return filtered
  }
}, [queryBResult.data]); // mapB = queryBResult.data


if (!queryAResult || !filteredMapB) {
  return <Spinner />
}

// normal rendering

CodePudding user response：

it looks like your ArrayA is also changing, so maybe include ArrayA in useEffect as well in your case?