RelationInputWrapper: Do not attempt fetching relations, if count == 0

This commit is contained in:
Gustav Hansen 2022-09-12 09:41:37 +02:00
parent 3f72ff3a73
commit 29e2e43132
3 changed files with 12 additions and 7 deletions

View File

@ -28,9 +28,11 @@ export const RelationInputWrapper = ({
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { connectRelation, disconnectRelation, loadRelation, modifiedData, slug, initialData } = const { connectRelation, disconnectRelation, loadRelation, modifiedData, slug, initialData } =
useCMEditViewDataManager(); useCMEditViewDataManager();
const relationsCount = initialData[name]?.count ?? 0;
const { relations, search, searchFor } = useRelation(`${slug}-${name}-${initialData?.id ?? ''}`, { const { relations, search, searchFor } = useRelation(`${slug}-${name}-${initialData?.id ?? ''}`, {
relation: { relation: {
enabled: relationsCount > 0 && !!endpoints.relation,
endpoint: endpoints.relation, endpoint: endpoints.relation,
onLoad(data) { onLoad(data) {
loadRelation({ target: { name, value: data.results } }); loadRelation({ target: { name, value: data.results } });
@ -51,15 +53,18 @@ export const RelationInputWrapper = ({
}, },
}); });
// TODO: we should initialize the empty connect/ disconnect
// arrays before adding the first relation to it instead of
// calling loadRelation()
useEffect(() => { useEffect(() => {
if (!endpoints.relation) { if (!endpoints.relation) {
loadRelation({ target: { name, value: [] } }); loadRelation({ target: { name, value: [] } });
} }
}, [loadRelation, name, endpoints.relation]); }, [loadRelation, name, endpoints.relation]);
useEffect(() => {
if (relationsCount === 0 || !!endpoints.relation) {
loadRelation({ target: { name, value: [] } });
}
}, [relationsCount, endpoints.relation, loadRelation, name]);
const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]); const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
const isSingleRelation = [ const isSingleRelation = [
'oneWay', 'oneWay',
@ -122,7 +127,7 @@ export const RelationInputWrapper = ({
id: intlLabel.id, id: intlLabel.id,
defaultMessage: `${intlLabel.defaultMessage} ({numberOfEntries})`, defaultMessage: `${intlLabel.defaultMessage} ({numberOfEntries})`,
}, },
{ numberOfEntries: initialData[name]?.count ?? 0 } { numberOfEntries: relationsCount }
)} )}
labelLoadMore={ labelLoadMore={
// TODO: only display if there are more; derive from count // TODO: only display if there are more; derive from count

View File

@ -118,8 +118,8 @@ describe('useRelation', () => {
}); });
}); });
test('doesn not fetch relations if a relation endpoint was not passed', async () => { test('doesn not fetch relations if it was not enabled', async () => {
await setup(undefined, { relation: { endpoint: undefined } }); await setup(undefined, { relation: { enabled: false } });
expect(axiosInstance.get).not.toBeCalled(); expect(axiosInstance.get).not.toBeCalled();
}); });

View File

@ -38,7 +38,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
}; };
const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, { const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
enabled: !!relation?.endpoint, enabled: !!relation?.enabled ?? true,
getNextPageParam(lastPage) { getNextPageParam(lastPage) {
// the API may send an empty 204 response // the API may send an empty 204 response
if (!lastPage || lastPage.pagination.page >= lastPage.pagination.pageCount) { if (!lastPage || lastPage.pagination.page >= lastPage.pagination.pageCount) {