bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

EntityStore: parse entities after fetch, not during render (performance)

Browse source
This commit is contained in:
Alex Gleason 2023-03-13 16:39:23 -05:00
parent e9ae8d2c45
commit a19b1e83a9
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/soapbox/entity-store/hooks/useEntities.ts
View file

@ -3,6 +3,7 @@ import z from 'zod';
import { getNextLink, getPrevLink } from 'soapbox/api';
import { useApi, useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { filteredArray } from 'soapbox/schemas/utils';
import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess } from '../actions';
@ -52,10 +53,9 @@ function useEntities<TEntity extends Entity>(
const entities: readonly TEntity[] = entityIds ? (
Array.from(entityIds).reduce<TEntity[]>((result, id) => {
// TODO: parse after fetch, not during render.
const entity = schema.safeParse(cache?.store[id]);
if (entity.success) {
result.push(entity.data);
const entity = cache?.store[id];
if (entity) {
result.push(entity as TEntity);
}
return result;
}, [])
@ -74,7 +74,9 @@ function useEntities<TEntity extends Entity>(
dispatch(entitiesFetchRequest(entityType, listKey));
try {
const response = await api.get(url);
dispatch(entitiesFetchSuccess(response.data, entityType, listKey, {
const entities = filteredArray(schema).parse(response.data);
dispatch(entitiesFetchSuccess(entities, entityType, listKey, {
next: getNextLink(response),
prev: getPrevLink(response),
fetching: false,

9
app/soapbox/entity-store/hooks/useEntity.ts
View file

@ -30,11 +30,7 @@ function useEntity<TEntity extends Entity>(
const defaultSchema = z.custom<TEntity>();
const schema = opts.schema || defaultSchema;
const entity = useAppSelector(state => {
// TODO: parse after fetch, not during render.
const result = schema.safeParse(state.entities[entityType]?.store[entityId]);
return result.success ? result.data : undefined;
});
const entity = useAppSelector(state => state.entities[entityType]?.store[entityId] as TEntity | undefined);
const [isFetching, setIsFetching] = useState(false);
const isLoading = isFetching && !entity;
@ -42,7 +38,8 @@ function useEntity<TEntity extends Entity>(
const fetchEntity = () => {
setIsFetching(true);
api.get(endpoint).then(({ data }) => {
dispatch(importEntities([data], entityType));
const entity = schema.parse(data);
dispatch(importEntities([entity], entityType));
setIsFetching(false);
}).catch(() => {
setIsFetching(false);