fix(app-headless-cms): set ref field request context

webiny · Oct 20, 2023 · 53e962c · 53e962c
1 parent 500083a
commit 53e962c
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 19 deletions.
diff --git a/packages/app-headless-cms/src/admin/hooks/index.ts b/packages/app-headless-cms/src/admin/hooks/index.ts
@@ -11,3 +11,4 @@ export { useModelField } from "../components/ModelFieldProvider";
 export { useModelFieldEditor } from "../components/FieldEditor";
 export * from "./useContentModels";
 export * from "~/admin/views/contentEntries/hooks";
+export * from "./useModelFieldGraphqlContext";
diff --git a/packages/app-headless-cms/src/admin/hooks/useModelFieldGraphqlContext.ts b/packages/app-headless-cms/src/admin/hooks/useModelFieldGraphqlContext.ts
@@ -0,0 +1,13 @@
+import { useModel, useModelField } from "~/admin/hooks";
+
+export const useModelFieldGraphqlContext = () => {
+    const { model } = useModel();
+    const { field } = useModelField();
+
+    return {
+        cms: {
+            model,
+            field
+        }
+    };
+};
diff --git a/...c/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx b/...c/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx
@@ -11,7 +11,7 @@ import { Options } from "./Options";
 import { useReferences } from "../hooks/useReferences";
 import { Entry } from "./Entry";
 import { ReferencesDialog } from "./ReferencesDialog";
-import { useQuery } from "~/admin/hooks";
+import { useModelFieldGraphqlContext, useQuery } from "~/admin/hooks";
 import { ListCmsModelsQueryResponse } from "~/admin/viewsGraphql";
 import { useSnackbar } from "@webiny/app-admin";
 import { CmsReferenceValue } from "~/admin/plugins/fieldRenderers/ref/components/types";
@@ -94,6 +94,7 @@ interface Props extends CmsModelFieldRendererProps {
 export const AdvancedMultipleReferenceField: React.VFC<Props> = props => {
     const { bind, field } = props;
     const { showSnackbar } = useSnackbar();
+    const requestContext = useModelFieldGraphqlContext();
 
     const values = useMemo(() => {
         return bind.value || [];
@@ -105,7 +106,10 @@ export const AdvancedMultipleReferenceField: React.VFC<Props> = props => {
     const [loadedModels, setLoadedModels] = useState<CmsModel[]>([]);
 
     const { data, loading: loadingModels } = useQuery<ListCmsModelsQueryResponse>(
-        GQL.LIST_CONTENT_MODELS
+        GQL.LIST_CONTENT_MODELS,
+        {
+            context: requestContext
+        }
     );
 
     useEffect(() => {

diff --git a/...src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx b/...src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx
@@ -10,7 +10,7 @@ import { useReferences } from "../hooks/useReferences";
 import { Entry } from "./Entry";
 import { ReferencesDialog } from "./ReferencesDialog";
 import styled from "@emotion/styled";
-import { useQuery } from "~/admin/hooks";
+import { useQuery, useModelFieldGraphqlContext } from "~/admin/hooks";
 import { ListCmsModelsQueryResponse } from "~/admin/viewsGraphql";
 import * as GQL from "~/admin/viewsGraphql";
 import { useSnackbar } from "@webiny/app-admin";
@@ -39,9 +39,13 @@ export const AdvancedSingleReferenceField: React.VFC<Props> = props => {
     const [linkEntryDialogModel, setLinkEntryDialogModel] = useState<CmsModel | null>(null);
     const [newEntryDialogModel, setNewEntryDialogModel] = useState<CmsModel | null>(null);
     const [loadedModels, setLoadedModels] = useState<CmsModel[]>([]);
+    const requestContext = useModelFieldGraphqlContext();
 
     const { data, loading: loadingModels } = useQuery<ListCmsModelsQueryResponse>(
-        GQL.LIST_CONTENT_MODELS
+        GQL.LIST_CONTENT_MODELS,
+        {
+            context: requestContext
+        }
     );
 
     useEffect(() => {
@@ -88,7 +92,8 @@ export const AdvancedSingleReferenceField: React.VFC<Props> = props => {
     }, []);
 
     const { entries, loading: loadingEntries } = useReferences({
-        values: bind.value
+        values: bind.value,
+        requestContext
     });
 
     const onRemove = useCallback(() => {

diff --git a/...ges/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.ts b/...ges/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.ts
@@ -19,10 +19,11 @@ interface ExecuteSearchParams {
     setEntries: (entries: Record<string, CmsReferenceContentEntry>) => void;
     client: ApolloClient<any>;
     values: CmsReferenceValue[];
+    requestContext?: Record<string, any>;
 }
 
 const executeSearch = async (params: ExecuteSearchParams): Promise<void> => {
-    const { setLoading, setError, setEntries, client, values } = params;
+    const { setLoading, setError, setEntries, client, values, requestContext = {} } = params;
     setLoading(true);
     try {
         const result = await client.query<
@@ -37,7 +38,8 @@ const executeSearch = async (params: ExecuteSearchParams): Promise<void> => {
                         modelId: value.modelId
                     };
                 })
-            }
+            },
+            context: requestContext
         });
         const error = result.data.entries?.error;
         if (error) {
@@ -67,9 +69,14 @@ interface CmsReferenceValue extends BaseCmsReferenceValue {
 interface UseReferencesParams {
     values?: BaseCmsReferenceValue[] | BaseCmsReferenceValue | null;
     perPage?: number;
+    requestContext?: Record<string, any>;
 }
 
-export const useReferences = ({ values: initialValues, perPage = 10 }: UseReferencesParams) => {
+export const useReferences = ({
+    values: initialValues,
+    perPage = 10,
+    requestContext = {}
+}: UseReferencesParams) => {
     const client = useApolloClient();
     const [entries, setEntries] = useState<Record<string, CmsReferenceContentEntry>>({});
     const [loading, setLoading] = useState<boolean>(false);
@@ -153,6 +160,7 @@ export const useReferences = ({ values: initialValues, perPage = 10 }: UseRefere
         }
         executeSearch({
             client,
+            requestContext,
             values: entriesToLoad,
             setLoading,
             setError,

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/useReference.ts b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/useReference.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useApolloClient } from "~/admin/hooks";
+import { useApolloClient, useModelFieldGraphqlContext } from "~/admin/hooks";
 import {
     SEARCH_CONTENT_ENTRIES,
     GET_CONTENT_ENTRY,
@@ -50,6 +50,7 @@ export const useReference: UseReferenceHook = ({ bind, field }) => {
     const [entries, setEntries] = useState<OptionItemCollection>({});
     const [latestEntries, setLatestEntries] = useState<OptionItemCollection>({});
     const [valueEntry, setValueEntry] = useState<OptionItem | null>(null);
+    const requestContext = useModelFieldGraphqlContext();
 
     const models = (field.settings ? field.settings.models || [] : []) as Pick<
         CmsModel,
@@ -75,7 +76,8 @@ export const useReference: UseReferenceHook = ({ bind, field }) => {
                 modelIds: models.map(m => m.modelId),
                 query: search,
                 limit: 10
-            }
+            },
+            context: requestContext
         });
         setLoading(false);
 
@@ -110,7 +112,8 @@ export const useReference: UseReferenceHook = ({ bind, field }) => {
                  * We cannot update this query response in cache after a reference entry being created/deleted,
                  * which result in cached response being stale, therefore, we're setting the fetchPolicy to "network-only" to by passing cache.
                  */
-                fetchPolicy: "network-only"
+                fetchPolicy: "network-only",
+                context: requestContext
             })
             .then(({ data }) => {
                 const latestEntryData = convertReferenceEntriesToOptionCollection(
@@ -158,7 +161,8 @@ export const useReference: UseReferenceHook = ({ bind, field }) => {
                         modelId: value.modelId,
                         id: value.id
                     }
-                }
+                },
+                context: requestContext
             })
             .then(res => {
                 setLoading(false);

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/useReferences.ts b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/useReferences.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useApolloClient } from "~/admin/hooks";
+import { useApolloClient, useModelFieldGraphqlContext } from "~/admin/hooks";
 import { CmsModelField, CmsModel } from "~/types";
 import {
     SEARCH_CONTENT_ENTRIES,
@@ -30,6 +30,7 @@ export const useReferences = ({ bind, field }: UseReferencesParams) => {
     const [entries, setEntries] = useState<OptionItemCollection>({});
     const [latestEntries, setLatestEntries] = useState<OptionItem[]>([]);
     const [valueEntries, setValueEntries] = useState<OptionItem[]>([]);
+    const requestContext = useModelFieldGraphqlContext();
 
     const models = (field.settings ? field.settings.models || [] : []) as Pick<
         CmsModel,
@@ -52,7 +53,8 @@ export const useReferences = ({ bind, field }: UseReferencesParams) => {
             variables: {
                 modelIds: models.map(m => m.modelId),
                 query: search
-            }
+            },
+            context: requestContext
         });
         setLoading(false);
 
@@ -88,7 +90,8 @@ export const useReferences = ({ bind, field }: UseReferencesParams) => {
                  * We cannot update this query response in cache after a reference entry being created/deleted,
                  * which result in cached response being stale, therefore, we're setting the fetchPolicy to "network-only" to by passing cache.
                  */
-                fetchPolicy: "network-only"
+                fetchPolicy: "network-only",
+                context: requestContext
             })
             .then(({ data }) => {
                 if (!isMounted.current) {
@@ -123,7 +126,8 @@ export const useReferences = ({ bind, field }: UseReferencesParams) => {
                             id: value.id
                         };
                     })
-                }
+                },
+                context: requestContext
             })
             .then(res => {
                 if (!isMounted.current) {

diff --git a/.../app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/useReferences.ts b/.../app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/useReferences.ts
@@ -1,6 +1,6 @@
 import ApolloClient from "apollo-client";
 import { useEffect, useState } from "react";
-import { useApolloClient } from "~/admin/hooks";
+import { useApolloClient, useModelFieldGraphqlContext } from "~/admin/hooks";
 import { CmsReferenceContentEntry } from "~/admin/plugins/fieldRenderers/ref/components/types";
 import {
     CmsEntrySearchQueryResponse,
@@ -15,10 +15,11 @@ interface ExecuteSearchParams {
     setEntries: (entries: CmsReferenceContentEntry[]) => void;
     client: ApolloClient<any>;
     models: CmsModel[];
+    requestContext: Record<string, any>;
 }
 
 const executeSearch = async (params: ExecuteSearchParams): Promise<void> => {
-    const { setLoading, setError, setEntries, client, models } = params;
+    const { setLoading, setError, setEntries, client, models, requestContext = {} } = params;
     setLoading(true);
     try {
         const result = await client.query<
@@ -29,7 +30,8 @@ const executeSearch = async (params: ExecuteSearchParams): Promise<void> => {
             variables: {
                 modelIds: models.map(model => model.modelId),
                 limit: 10000
-            }
+            },
+            context: requestContext
         });
         const error = result.data.content?.error;
         if (error) {
@@ -55,13 +57,15 @@ export const useReferences = ({ models }: UseReferencesParams) => {
     const [entries, setEntries] = useState<CmsReferenceContentEntry[]>([]);
     const [loading, setLoading] = useState<boolean>(false);
     const [error, setError] = useState<string | undefined | null>(null);
+    const requestContext = useModelFieldGraphqlContext();
 
     useEffect(() => {
         if (!models || models.length === 0) {
             return;
         }
         executeSearch({
             client,
+            requestContext,
             models,
             setLoading,
             setError,