Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 12x 12x 12x 12x 12x 12x 20x 364x 364x 364x 99x 5x 18x 364x 97x 364x 364x 2x 2x 364x 403x 393x 67x 364x 393x 393x 385x 385x 364x 364x 364x 302x 364x 344x 344x 344x | import { userKey } from "features/queryKeys";
import { userStaleTime } from "features/userQueries/constants";
import { User } from "proto/api_pb";
import { useCallback, useEffect, useRef } from "react";
import { useQueries, useQueryClient } from "react-query";
import { service } from "service";
import { arrayEq } from "utils/arrayEq";
export default function useUsers(
ids: (number | undefined)[],
invalidate = false
) {
const queryClient = useQueryClient();
const idsRef = useRef(ids);
const handleInvalidation = useCallback(() => {
if (invalidate) {
queryClient.invalidateQueries({
predicate: (query) =>
query.queryKey[0] === userKey() &&
!!idsRef.current.includes(query.queryKey[1] as number),
});
}
}, [invalidate, queryClient]);
useEffect(() => {
handleInvalidation();
}, [handleInvalidation]);
//arrays use reference equality, so you can't use ids in useEffect directly
useEffect(() => {
if (!arrayEq(idsRef.current, ids)) {
idsRef.current = ids;
handleInvalidation();
}
});
const queries = useQueries<User.AsObject, Error>(
ids
.filter((id): id is number => !!id)
.map((id) => ({
queryFn: () => service.user.getUser(id.toString()),
queryKey: userKey(id),
staleTime: userStaleTime,
}))
);
const errors = queries
.map((query) => query.error?.message)
.filter((e): e is string => typeof e === "string");
const isLoading = queries.some((query) => query.isLoading);
const isFetching = queries.some((query) => query.isFetching);
// If at least one user query is not loading (i.e. has data loaded before), whilst
// some other (likely new) queries are fetching, then it's a refetch
const isRefetching = !queries.every((query) => query.isLoading) && isFetching;
const isError = !!errors.length;
const usersById = isLoading
? undefined
: new Map(queries.map((q, index) => [ids[index], q.data]));
return {
data: usersById,
errors,
isError,
isFetching,
isLoading,
isRefetching,
};
}
export function useUser(id: number | undefined, invalidate = false) {
const result = useUsers([id], invalidate);
return {
data: result.data?.get(id),
error: result.errors.join("\n"),
isError: result.isError,
isFetching: result.isFetching,
isLoading: result.isLoading,
};
}
|