Merge pull request #1822 from Shopify/liz/update-app-proxy-form-docs

[Docs] Update App Proxy Form documentation
Shopify · Jan 20, 2025 · 66fd00e · 66fd00e
2 parents e654bf8 + ac26781
commit 66fd00e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/packages/apps/shopify-app-remix/docs/generated/generated_docs_data.json b/packages/apps/shopify-app-remix/docs/generated/generated_docs_data.json
@@ -129,7 +129,7 @@
   },
   {
     "name": "AppProxyForm",
-    "description": "Sets up a Remix `<Form>` component that works when rendered behind an app proxy.\n\nSupports any properties accepted by the `<Form>` component.",
+    "description": "Sets up a Remix `<Form>` component that works when rendered on an app proxy page.\n\nSupports any properties accepted by the `<Form>` component.\n\nBecause Remix doesn't support URL rewriting, any route using this component should <b>match the pathname of the proxy URL exactly</b>, and <b>end in a trailing slash</b> (e.g., `https://<shop>/apps/proxy/`), or set the Remix Form prop `navigate` to `false`.",
     "category": "App proxy components",
     "type": "component",
     "isVisualComponent": false,
@@ -157,8 +157,8 @@
         "title": "Render a form element in a proxied route",
         "tabs": [
           {
-            "title": "/app/routes/**\\/*.ts",
-            "code": "import {\n  AppProxyProvider,\n  AppProxyForm,\n} from \"@shopify/shopify-app-remix/react\";\nimport { authenticate } from \"~/shopify.server\";\n\nexport async function loader({ request }) {\n  await authenticate.public.appProxy(request);\n\n  return json({ appUrl: process.env.SHOPIFY_APP_URL });\n}\n\nexport async function action({ request }) {\n  await authenticate.public.appProxy(request);\n\n  const formData = await request.formData();\n  const field = formData.get(\"field\")?.toString();\n\n  // Perform actions\n  if (field) {\n    console.log(\"Field:\", field);\n  }\n\n  // Return JSON to the client\n  return json({ message: \"Success!\" });\n}\n\nexport default function App() {\n  const { appUrl } = useLoaderData();\n  const data = useActionData();\n\n  return (\n    &lt;AppProxyProvider appUrl={appUrl}&gt;\n      &lt;AppProxyForm action=\"/\"&gt;\n        &lt;input type=\"text\" name=\"field\" defaultValue={data?.field} /&gt;\n\n        &lt;input type=\"submit\" name=\"Submit\" /&gt;\n      &lt;/AppProxyForm&gt;\n    &lt;/AppProxyProvider&gt;\n  );\n}",
+            "title": "/app/routes/apps/appProxy.ts",
+            "code": "import {\n  AppProxyProvider,\n  AppProxyForm,\n} from \"@shopify/shopify-app-remix/react\";\nimport { authenticate } from \"~/shopify.server\";\n\nexport async function loader({ request }) {\n  await authenticate.public.appProxy(request);\n\n  return json({ appUrl: process.env.SHOPIFY_APP_URL });\n}\n\nexport async function action({ request }) {\n  await authenticate.public.appProxy(request);\n\n  const formData = await request.formData();\n  const field = formData.get(\"field\")?.toString();\n\n  // Perform actions\n  if (field) {\n    console.log(\"Field:\", field);\n  }\n\n  // Return JSON to the client\n  return json({ message: \"Success!\" });\n}\n\nexport default function App() {\n  const { appUrl } = useLoaderData();\n\n  return (\n    &lt;AppProxyProvider appUrl={appUrl}&gt;\n      &lt;AppProxyForm action=\"/apps/appProxy\" method=\"post\"&gt;\n        &lt;input type=\"text\" name=\"field\" /&gt;\n\n        &lt;input type=\"submit\" name=\"Submit\" /&gt;\n      &lt;/AppProxyForm&gt;\n    &lt;/AppProxyProvider&gt;\n  );\n}",
             "language": "typescript"
           }
         ]
@@ -254,13 +254,13 @@
       {
         "name": "AppProxyForm",
         "subtitle": "Render form elements in proxies.",
-        "url": "/docs/api/shopify-app-remix/app-proxy-components/appproxy-form",
+        "url": "/docs/api/shopify-app-remix/app-proxy-components/appproxyform",
         "type": "remix"
       },
       {
         "name": "AppProxyLink",
         "subtitle": "Render link elements in proxies.",
-        "url": "/docs/api/shopify-app-remix/app-proxy-components/appproxy-link",
+        "url": "/docs/api/shopify-app-remix/app-proxy-components/appproxylink",
         "type": "remix"
       }
     ],

diff --git a/packages/apps/shopify-app-remix/src/react/components/AppProxyForm/AppProxyForm.tsx b/packages/apps/shopify-app-remix/src/react/components/AppProxyForm/AppProxyForm.tsx
@@ -8,15 +8,19 @@ export interface AppProxyFormProps extends FormProps {
 }
 
 /**
- * Sets up a Remix `<Form>` component that works when rendered behind an app proxy.
+ * Sets up a Remix `<Form>` component that works when rendered on an app proxy page.
  *
  * Supports any properties accepted by the `<Form>` component.
  *
+ * Because Remix doesn't support URL rewriting, any route using this component should <b>match the pathname of the proxy
+ * URL exactly</b>, and <b>end in a trailing slash</b> (e.g., `https://<shop>/apps/proxy/`), or set the Remix Form prop
+ * `navigate` to `false`.
+ *
  * @example
  * <caption>Render a form element in a proxied route.</caption>
  * <description>Use an `AppProxyForm` within an `AppProxy` to create a form.</description>
  * ```ts
- * // /app/routes/**\/*.ts
+ * // /app/routes/apps/appProxy.ts
  * import {
  *   AppProxyProvider,
  *   AppProxyForm,
@@ -46,12 +50,11 @@ export interface AppProxyFormProps extends FormProps {
  *
  * export default function App() {
  *   const { appUrl } = useLoaderData();
- *   const data = useActionData();
  *
  *   return (
  *     <AppProxyProvider appUrl={appUrl}>
- *       <AppProxyForm action="/">
- *         <input type="text" name="field" defaultValue={data?.field} />
+ *       <AppProxyForm action="/apps/appProxy" method="post">
+ *         <input type="text" name="field" />
  *
  *         <input type="submit" name="Submit" />
  *       </AppProxyForm>

diff --git a/...ages/apps/shopify-app-remix/src/react/components/AppProxyProvider/AppProxyProvider.doc.ts b/...ages/apps/shopify-app-remix/src/react/components/AppProxyProvider/AppProxyProvider.doc.ts
@@ -25,13 +25,13 @@ const data: ReferenceEntityTemplateSchema = {
     {
       name: 'AppProxyForm',
       subtitle: 'Render form elements in proxies.',
-      url: '/docs/api/shopify-app-remix/app-proxy-components/appproxy-form',
+      url: '/docs/api/shopify-app-remix/app-proxy-components/appproxyform',
       type: 'remix',
     },
     {
       name: 'AppProxyLink',
       subtitle: 'Render link elements in proxies.',
-      url: '/docs/api/shopify-app-remix/app-proxy-components/appproxy-link',
+      url: '/docs/api/shopify-app-remix/app-proxy-components/appproxylink',
       type: 'remix',
     },
   ],