fix(plugin-seo): now respects serverURL and api routes configuration (#8546)

Author: paulpopus

packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx

@@ -6,6 +6,7 @@ import type { TextareaFieldClientProps } from 'payload'
 import {
   FieldLabel,
   TextareaInput,
+  useConfig,
   useDocumentInfo,
   useField,
   useFieldProps,
@@ -41,6 +42,13 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
   } = props
   const { path: pathFromContext } = useFieldProps()
 
+  const {
+    config: {
+      routes: { api },
+      serverURL,
+    },
+  } = useConfig()
+
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
 
   const locale = useLocale()
@@ -58,7 +66,9 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
       return
     }
 
-    const genDescriptionResponse = await fetch('/api/plugin-seo/generate-description', {
+    const endpoint = `${serverURL}${api}/plugin-seo/generate-description`
+
+    const genDescriptionResponse = await fetch(endpoint, {
       body: JSON.stringify({
         id: docInfo.id,
         collectionSlug: docInfo.collectionSlug,
@@ -85,7 +95,23 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
     const { result: generatedDescription } = await genDescriptionResponse.json()
 
     setValue(generatedDescription || '')
-  }, [hasGenerateDescriptionFn, docInfo, getData, locale, setValue])
+  }, [
+    hasGenerateDescriptionFn,
+    serverURL,
+    api,
+    docInfo.id,
+    docInfo.collectionSlug,
+    docInfo.docPermissions,
+    docInfo.globalSlug,
+    docInfo.hasPublishPermission,
+    docInfo.hasSavePermission,
+    docInfo.initialData,
+    docInfo.initialState,
+    docInfo.title,
+    getData,
+    locale,
+    setValue,
+  ])
 
   return (
     <div

packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx

@@ -40,6 +40,14 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
   } = props || {}
   const { path: pathFromContext } = useFieldProps()
 
+  const {
+    config: {
+      collections,
+      routes: { api },
+      serverURL,
+    },
+  } = useConfig()
+
   const field: FieldType<string> = useField({ ...props, path: pathFromContext } as Options)
 
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
@@ -55,7 +63,9 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
       return
     }
 
-    const genImageResponse = await fetch('/api/plugin-seo/generate-image', {
+    const endpoint = `${serverURL}${api}/plugin-seo/generate-image`
+
+    const genImageResponse = await fetch(endpoint, {
       body: JSON.stringify({
         id: docInfo.id,
         collectionSlug: docInfo.collectionSlug,
@@ -79,14 +89,26 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
     const generatedImage = await genImageResponse.text()
 
     setValue(generatedImage || '')
-  }, [hasGenerateImageFn, docInfo, getData, locale, setValue])
+  }, [
+    hasGenerateImageFn,
+    serverURL,
+    api,
+    docInfo.id,
+    docInfo.collectionSlug,
+    docInfo.docPermissions,
+    docInfo.globalSlug,
+    docInfo.hasPublishPermission,
+    docInfo.hasSavePermission,
+    docInfo.initialData,
+    docInfo.initialState,
+    docInfo.title,
+    getData,
+    locale,
+    setValue,
+  ])
 
   const hasImage = Boolean(value)
 
-  const { config } = useConfig()
-
-  const { collections, routes: { api } = {}, serverURL } = config
-
   const collection = collections?.find((coll) => coll.slug === relationTo) || undefined
 
   return (

packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx

@@ -6,6 +6,7 @@ import type { TextFieldClientProps } from 'payload'
 import {
   FieldLabel,
   TextInput,
+  useConfig,
   useDocumentInfo,
   useField,
   useFieldProps,
@@ -44,6 +45,13 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
   const { path: pathFromContext } = useFieldProps()
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
 
+  const {
+    config: {
+      routes: { api },
+      serverURL,
+    },
+  } = useConfig()
+
   const field: FieldType<string> = useField({
     path: pathFromContext,
   } as Options)
@@ -59,7 +67,9 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
       return
     }
 
-    const genTitleResponse = await fetch('/api/plugin-seo/generate-title', {
+    const endpoint = `${serverURL}${api}/plugin-seo/generate-title`
+
+    const genTitleResponse = await fetch(endpoint, {
       body: JSON.stringify({
         id: docInfo.id,
         collectionSlug: docInfo.collectionSlug,
@@ -83,7 +93,23 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
     const { result: generatedTitle } = await genTitleResponse.json()
 
     setValue(generatedTitle || '')
-  }, [hasGenerateTitleFn, docInfo, getData, locale, setValue])
+  }, [
+    hasGenerateTitleFn,
+    serverURL,
+    api,
+    docInfo.id,
+    docInfo.collectionSlug,
+    docInfo.docPermissions,
+    docInfo.globalSlug,
+    docInfo.hasPublishPermission,
+    docInfo.hasSavePermission,
+    docInfo.initialData,
+    docInfo.initialState,
+    docInfo.title,
+    getData,
+    locale,
+    setValue,
+  ])
 
   return (
     <div

packages/plugin-seo/src/fields/Preview/PreviewComponent.tsx

@@ -4,6 +4,7 @@ import type { FormField, UIField } from 'payload'
 
 import {
   useAllFormFields,
+  useConfig,
   useDocumentInfo,
   useForm,
   useLocale,
@@ -29,6 +30,13 @@ export const PreviewComponent: React.FC<PreviewProps> = (props) => {
 
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
 
+  const {
+    config: {
+      routes: { api },
+      serverURL,
+    },
+  } = useConfig()
+
   const locale = useLocale()
   const [fields] = useAllFormFields()
   const { getData } = useForm()
@@ -45,8 +53,10 @@ export const PreviewComponent: React.FC<PreviewProps> = (props) => {
   const [href, setHref] = useState<string>()
 
   useEffect(() => {
+    const endpoint = `${serverURL}${api}/plugin-seo/generate-url`
+
     const getHref = async () => {
-      const genURLResponse = await fetch('/api/plugin-seo/generate-url', {
+      const genURLResponse = await fetch(endpoint, {
         body: JSON.stringify({
           id: docInfo.id,
           collectionSlug: docInfo.collectionSlug,
@@ -75,7 +85,7 @@ export const PreviewComponent: React.FC<PreviewProps> = (props) => {
     if (hasGenerateURLFn && !href) {
       void getHref()
     }
-  }, [fields, href, locale, docInfo, hasGenerateURLFn, getData])
+  }, [fields, href, locale, docInfo, hasGenerateURLFn, getData, serverURL, api])
 
   return (
     <div