diff --git a/src/client/components/forms/field-types/Relationship/index.js b/src/client/components/forms/field-types/Relationship/index.js
index aaae16cf3b..fb867dc287 100644
--- a/src/client/components/forms/field-types/Relationship/index.js
+++ b/src/client/components/forms/field-types/Relationship/index.js
@@ -19,6 +19,8 @@ const {
const maxResultsPerRequest = 10;
+const baseClass = 'relationship';
+
class Relationship extends Component {
constructor(props) {
super(props);
@@ -31,6 +33,7 @@ class Relationship extends Component {
lastFullyLoadedRelation: -1,
lastLoadedPage: 1,
options: [],
+ errorLoading: false,
};
}
@@ -46,6 +49,7 @@ class Relationship extends Component {
}
getNextOptions = (params = {}) => {
+ const { errorLoading } = this.state;
const { clear } = params;
if (clear) {
@@ -54,42 +58,55 @@ class Relationship extends Component {
});
}
- const {
- relations, lastFullyLoadedRelation, lastLoadedPage, search,
- } = this.state;
+ if (!errorLoading) {
+ const {
+ relations, lastFullyLoadedRelation, lastLoadedPage, search,
+ } = this.state;
- const relationsToSearch = relations.slice(lastFullyLoadedRelation + 1);
+ const relationsToSearch = relations.slice(lastFullyLoadedRelation + 1);
- if (relationsToSearch.length > 0) {
- some(relationsToSearch, async (relation, callback) => {
- const collection = collections.find((coll) => coll.slug === relation);
- const fieldToSearch = collection.useAsTitle || 'id';
- const searchParam = search ? `&where[${fieldToSearch}][like]=${search}` : '';
- const response = await fetch(`${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPage}${searchParam}`);
+ if (relationsToSearch.length > 0) {
+ some(relationsToSearch, async (relation, callback) => {
+ const collection = collections.find((coll) => coll.slug === relation);
+ const fieldToSearch = collection.useAsTitle || 'id';
+ const searchParam = search ? `&where[${fieldToSearch}][like]=${search}` : '';
+ const response = await fetch(`${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPage}${searchParam}`);
+ const data = await response.json();
- const data = await response.json();
+ if (response.ok) {
+ if (data.hasNextPage) {
+ return callback(false, {
+ data,
+ relation,
+ });
+ }
- if (data.hasNextPage) {
- return callback(false, {
- data,
- relation,
- });
- }
+ return callback({ relation, data });
+ }
+
+ let error = 'There was a problem loading options for this field.';
+
+ if (response.status === 403) {
+ error = 'You do not have permission to load options for this field.';
+ }
- return callback({ relation, data });
- }, (lastPage, nextPage) => {
- if (nextPage) {
- const { data, relation } = nextPage;
- this.addOptions(data, relation);
- } else {
- const { data, relation } = lastPage;
- this.addOptions(data, relation);
this.setState({
- lastFullyLoadedRelation: relations.indexOf(relation),
- lastLoadedPage: 1,
+ errorLoading: error,
});
- }
- });
+ }, (lastPage, nextPage) => {
+ if (nextPage) {
+ const { data, relation } = nextPage;
+ this.addOptions(data, relation);
+ } else {
+ const { data, relation } = lastPage;
+ this.addOptions(data, relation);
+ this.setState({
+ lastFullyLoadedRelation: relations.indexOf(relation),
+ lastLoadedPage: 1,
+ });
+ }
+ });
+ }
}
}
@@ -199,7 +216,7 @@ class Relationship extends Component {
}
render() {
- const { options } = this.state;
+ const { options, errorLoading } = this.state;
const {
path,
@@ -218,8 +235,9 @@ class Relationship extends Component {
const classes = [
'field-type',
- 'relationship',
+ baseClass,
showError && 'error',
+ errorLoading && 'error-loading',
readOnly && 'read-only',
].filter(Boolean).join(' ');
@@ -246,18 +264,25 @@ class Relationship extends Component {
label={label}
required={required}
/>
-