From 53e962c150c2732178d0431d7dfb0f6e9caa3381 Mon Sep 17 00:00:00 2001 From: Pavel Denisjuk Date: Fri, 20 Oct 2023 11:52:55 +0200 Subject: [PATCH] fix(app-headless-cms): set ref field request context --- packages/app-headless-cms/src/admin/hooks/index.ts | 1 + .../src/admin/hooks/useModelFieldGraphqlContext.ts | 13 +++++++++++++ .../components/AdvancedMultipleReferenceField.tsx | 8 ++++++-- .../components/AdvancedSingleReferenceField.tsx | 11 ++++++++--- .../ref/advanced/hooks/useReferences.ts | 14 +++++++++++--- .../fieldRenderers/ref/components/useReference.ts | 12 ++++++++---- .../fieldRenderers/ref/components/useReferences.ts | 12 ++++++++---- .../ref/simple/components/useReferences.ts | 10 +++++++--- 8 files changed, 62 insertions(+), 19 deletions(-) create mode 100644 packages/app-headless-cms/src/admin/hooks/useModelFieldGraphqlContext.ts diff --git a/packages/app-headless-cms/src/admin/hooks/index.ts b/packages/app-headless-cms/src/admin/hooks/index.ts index f6ac04db88c..bd3c56b93ec 100644 --- 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 new file mode 100644 index 00000000000..357fd22baa3 --- /dev/null +++ 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/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx index 264637444c4..3c3603a2232 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx +++ b/packages/app-headless-cms/src/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 => { 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 => { const [loadedModels, setLoadedModels] = useState([]); const { data, loading: loadingModels } = useQuery( - GQL.LIST_CONTENT_MODELS + GQL.LIST_CONTENT_MODELS, + { + context: requestContext + } ); useEffect(() => { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx index efcf667b6f1..e91d94167e7 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx +++ b/packages/app-headless-cms/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 => { const [linkEntryDialogModel, setLinkEntryDialogModel] = useState(null); const [newEntryDialogModel, setNewEntryDialogModel] = useState(null); const [loadedModels, setLoadedModels] = useState([]); + const requestContext = useModelFieldGraphqlContext(); const { data, loading: loadingModels } = useQuery( - GQL.LIST_CONTENT_MODELS + GQL.LIST_CONTENT_MODELS, + { + context: requestContext + } ); useEffect(() => { @@ -88,7 +92,8 @@ export const AdvancedSingleReferenceField: React.VFC = props => { }, []); const { entries, loading: loadingEntries } = useReferences({ - values: bind.value + values: bind.value, + requestContext }); const onRemove = useCallback(() => { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.ts b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.ts index 3a28e6456a3..6058c73bc9f 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.ts +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.ts @@ -19,10 +19,11 @@ interface ExecuteSearchParams { setEntries: (entries: Record) => void; client: ApolloClient; values: CmsReferenceValue[]; + requestContext?: Record; } const executeSearch = async (params: ExecuteSearchParams): Promise => { - 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 => { 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; } -export const useReferences = ({ values: initialValues, perPage = 10 }: UseReferencesParams) => { +export const useReferences = ({ + values: initialValues, + perPage = 10, + requestContext = {} +}: UseReferencesParams) => { const client = useApolloClient(); const [entries, setEntries] = useState>({}); const [loading, setLoading] = useState(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 index a5b555716bd..6be60357e60 100644 --- 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({}); const [latestEntries, setLatestEntries] = useState({}); const [valueEntry, setValueEntry] = useState(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 index dca0b005034..0f61fe51504 100644 --- 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({}); const [latestEntries, setLatestEntries] = useState([]); const [valueEntries, setValueEntries] = useState([]); + 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/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/useReferences.ts b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/useReferences.ts index e895db697df..79923a4a251 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/useReferences.ts +++ b/packages/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; models: CmsModel[]; + requestContext: Record; } const executeSearch = async (params: ExecuteSearchParams): Promise => { - 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 => { variables: { modelIds: models.map(model => model.modelId), limit: 10000 - } + }, + context: requestContext }); const error = result.data.content?.error; if (error) { @@ -55,6 +57,7 @@ export const useReferences = ({ models }: UseReferencesParams) => { const [entries, setEntries] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); + const requestContext = useModelFieldGraphqlContext(); useEffect(() => { if (!models || models.length === 0) { @@ -62,6 +65,7 @@ export const useReferences = ({ models }: UseReferencesParams) => { } executeSearch({ client, + requestContext, models, setLoading, setError,