Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] Update App Proxy Form documentation #1822

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[Docs] Update App Proxy Form documentation #1822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
83b8bfc
Update App Proxy Form documenation
lizkenyon Dec 3, 2024
6febc1d
regenerate docs
lizkenyon Dec 4, 2024
a976c82
Merge branch 'main' into liz/update-app-proxy-form-docs
lizkenyon Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/apps/shopify-app-remix/docs/generated/generated_docs_data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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"
}
]
Expand Down Expand Up @@ -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"
}
],
Expand Down
13 changes: 8 additions & 5 deletions packages/apps/shopify-app-remix/src/react/components/AppProxyForm/AppProxyForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ...ages/apps/shopify-app-remix/src/react/components/AppProxyProvider/AppProxyProvider.doc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
],
Expand Down
Loading