Update ActionArgs and LoaderArgs to their v2 names

Shopify · Oct 4, 2023 · b3d1a9e · b3d1a9e
1 parent 403caab
commit b3d1a9e
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 78 deletions.
diff --git a/packages/shopify-app-remix/README.md b/packages/shopify-app-remix/README.md
@@ -95,11 +95,11 @@ Now let's create the [splat route](https://remix.run/docs/en/main/guides/routing
 
 ```ts
 // app/routes/auth/$.tsx
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   return null;
@@ -112,12 +112,12 @@ Here is an example:
 
 ```ts
 // root.tsx
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 import {AppProvider} from '@shopify/shopify-app-remix/react';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   return json({
@@ -198,7 +198,7 @@ To authenticate admin requests you can call `shopify.authenticate.admin(request)
 
 ```ts
 // app/routes/**/*.tsx
-export const loader = async ({request}: LoaderArgs) => {
+export const loader = async ({request}: LoaderFunctionArgs) => {
   await shopify.authenticate.admin(request);
 
   return null;
@@ -215,7 +215,7 @@ If there is no session for the user, the loader will throw the appropriate redir
 If your Remix server is authenticating an admin extension, a request from the extension to Remix is cross-origin. Here `shopify.authenticate.admin` provides a cors function to add the required cross-origin headers:
 
 ```ts
-export const loader = async ({request}: LoaderArgs) => {
+export const loader = async ({request}: LoaderFunctionArgs) => {
   const {cors} = await shopify.authenticate.admin(request);
 
   return cors(json({my: 'data'}));
@@ -253,9 +253,9 @@ E.g:
 ```ts
 // routes/**/*.tsx
 import shopify from '../shopify.server';
-import {ActionArgs, json} from '@remix-run/node';
+import {ActionFunctionArgs, json} from '@remix-run/node';
 
-export async function action({request}: ActionArgs) {
+export async function action({request}: ActionFunctionArgs) {
   const {admin} = await shopify.authenticate.admin(request);
 
   const response = await admin.graphql(
@@ -300,7 +300,7 @@ Next pass a request to `shopify.authenticate.admin` in a loader or an action. Th
 
 ```ts
 // app/routes/**/*.tsx
-export const loader = async ({request}: LoaderArgs) => {
+export const loader = async ({request}: LoaderFunctionArgs) => {
   const {admin, session} = await shopify.authenticate.admin(request);
   const data = await admin.rest.resources.Product.count({session});
 
@@ -344,7 +344,7 @@ To do this, your app must authenticate the request.
 
 ```ts
 // routes/webhooks.tsx
-import {ActionArgs} from '@remix-run/node';
+import {ActionFunctionArgs} from '@remix-run/node';
 
 import shopify from '../shopify.server';
 import db from '../db.server';
@@ -376,10 +376,10 @@ Your Remix app may need to authenticate requests coming from a public context. A
 ```ts
 // e.g: routes/api.public.notes.tsx
 import shopify from '../shopify.server';
-import {LoaderArgs, json} from '@remix-run/node';
+import {LoaderFunctionArgs, json} from '@remix-run/node';
 import {getNotes} from '~/models/notes';
 
-export const loader = async ({request}: LoaderArgs) => {
+export const loader = async ({request}: LoaderFunctionArgs) => {
   const {sessionToken, cors} = await shopify.authenticate.public(request);
 
   // E.g: Get notes using the shops admin domain

diff --git a/packages/shopify-app-remix/docs/staticPages/examples/index/app-provider.example.ts b/packages/shopify-app-remix/docs/staticPages/examples/index/app-provider.example.ts
@@ -1,9 +1,9 @@
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 import {AppProvider} from '@shopify/shopify-app-remix/react';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   return json({

diff --git a/packages/shopify-app-remix/docs/staticPages/examples/index/splat-route.example.ts b/packages/shopify-app-remix/docs/staticPages/examples/index/splat-route.example.ts
@@ -1,8 +1,8 @@
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   // App logic goes here

diff --git a/packages/shopify-app-remix/src/server/authenticate/admin/billing/types.ts b/packages/shopify-app-remix/src/server/authenticate/admin/billing/types.ts
@@ -52,10 +52,10 @@ export interface BillingContext<Config extends AppConfigArg> {
    * <description>Call `billing.request` in the `onFailure` callback to immediately request payment.</description>
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs } from "@remix-run/node";
+   * import { LoaderFunctionArgs } from "@remix-run/node";
    * import { authenticate, MONTHLY_PLAN } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { billing } = await authenticate.admin(request);
    *   await billing.require({
    *     plans: [MONTHLY_PLAN],
@@ -97,10 +97,10 @@ export interface BillingContext<Config extends AppConfigArg> {
    * <description>Redirect to a different page in the `onFailure` callback, where the merchant can select a billing plan.</description>
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, redirect } from "@remix-run/node";
+   * import { LoaderFunctionArgs, redirect } from "@remix-run/node";
    * import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { billing } = await authenticate.admin(request);
    *   const billingCheck = await billing.require({
    *     plans: [MONTHLY_PLAN, ANNUAL_PLAN],
@@ -154,10 +154,10 @@ export interface BillingContext<Config extends AppConfigArg> {
    * <description>Change where the merchant is returned to after approving the purchase using the `returnUrl` option.</description>
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs } from "@remix-run/node";
+   * import { LoaderFunctionArgs } from "@remix-run/node";
    * import { authenticate, MONTHLY_PLAN } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { billing } = await authenticate.admin(request);
    *   await billing.require({
    *     plans: [MONTHLY_PLAN],
@@ -209,10 +209,10 @@ export interface BillingContext<Config extends AppConfigArg> {
    * <description>Use the `billing.cancel` function to cancel an active subscription with the id returned from `billing.require`.</description>
    * ```ts
    * // /app/routes/cancel-subscription.ts
-   * import { LoaderArgs } from "@remix-run/node";
+   * import { LoaderFunctionArgs } from "@remix-run/node";
    * import { authenticate, MONTHLY_PLAN } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { billing } = await authenticate.admin(request);
    *   const billingCheck = await billing.require({
    *     plans: [MONTHLY_PLAN],

diff --git a/packages/shopify-app-remix/src/server/authenticate/admin/types.ts b/packages/shopify-app-remix/src/server/authenticate/admin/types.ts
@@ -33,11 +33,11 @@ interface AdminContextInternal<
    * ```
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session } = await authenticate.admin(request);
    *   return json(await getMyAppData({shop: session.shop));
    * };
@@ -59,11 +59,11 @@ interface AdminContextInternal<
    * ```
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session } = await authenticate.admin(request);
    *   return json(await getMyAppData({user: session.onlineAccessInfo!.id}));
    * };
@@ -91,11 +91,11 @@ interface AdminContextInternal<
    * <description>Use the `cors` helper to ensure your app can respond to requests from admin extensions.</description>
    * ```ts
    * // /app/routes/admin/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session, cors } = await authenticate.admin(request);
    *   return cors(json(await getMyAppData({user: session.onlineAccessInfo!.id})));
    * };
@@ -131,11 +131,11 @@ export interface EmbeddedAdminContext<
    * ```
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { sessionToken } = await authenticate.public.checkout(
    *     request
    *   );
@@ -156,10 +156,10 @@ export interface EmbeddedAdminContext<
    * <description>Use the `redirect` helper to safely redirect between pages.</description>
    * ```ts
    * // /app/routes/admin/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session, redirect } = await authenticate.admin(request);
    *   return redirect("/");
    * };
@@ -170,10 +170,10 @@ export interface EmbeddedAdminContext<
    * <description>Pass in a `target` option of `_top` or `_parent` to go to an external URL.</description>
    * ```ts
    * // /app/routes/admin/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { session, redirect } = await authenticate.admin(request);
    *   return redirect("/", { target: '_parent' });
    * };

diff --git a/packages/shopify-app-remix/src/server/authenticate/public/appProxy/types.ts b/packages/shopify-app-remix/src/server/authenticate/public/appProxy/types.ts
@@ -96,7 +96,7 @@ export interface AppProxyContextWithSession<
    * import { json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export async function action({ request }: ActionArgs) {
+   * export async function action({ request }: ActionFunctionArgs) {
    *   const { admin } = await authenticate.public.appProxy(request);
    *
    *   const response = await admin.graphql(
@@ -129,7 +129,7 @@ export interface AppProxyContextWithSession<
    * import { json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export async function action({ request }: ActionArgs) {
+   * export async function action({ request }: ActionFunctionArgs) {
    *   const { admin } = await authenticate.public.appProxy(request);
    *
    *   const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`);

diff --git a/packages/shopify-app-remix/src/server/authenticate/public/checkout/types.ts b/packages/shopify-app-remix/src/server/authenticate/public/checkout/types.ts
@@ -25,11 +25,11 @@ export interface CheckoutContext {
    * <description>Get store-specific data using the `sessionToken` object.</description>
    * ```ts
    * // app/routes/public/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { sessionToken } = await authenticate.public.checkout(
    *     request
    *   );
@@ -47,11 +47,11 @@ export interface CheckoutContext {
    * <description>Use the `cors` helper to ensure your app can respond to checkout extension requests.</description>
    * ```ts
    * // app/routes/public/my-route.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { sessionToken, cors } = await authenticate.public.checkout(
    *     request,
    *     { corsHeaders: ["X-My-Custom-Header"] }

diff --git a/packages/shopify-app-remix/src/server/authenticate/public/types.ts b/packages/shopify-app-remix/src/server/authenticate/public/types.ts
@@ -14,10 +14,10 @@ interface AuthenticatePublicObject {
    * <caption>Authenticating a checkout extension request</caption>
    * ```ts
    * // /app/routes/public/widgets.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { sessionToken, cors } = await authenticate.public.checkout(
    *     request,
    *   );
@@ -34,10 +34,10 @@ interface AuthenticatePublicObject {
    * <caption>Authenticating an app proxy request</caption>
    * ```ts
    * // /app/routes/public/widgets.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   await authenticate.public.appProxy(
    *     request,
    *   );

diff --git a/packages/shopify-app-remix/src/server/clients/admin/types.ts b/packages/shopify-app-remix/src/server/clients/admin/types.ts
@@ -46,10 +46,10 @@ export interface AdminApiContext<
    *
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { admin, session } = await authenticate.admin(request);
    *   return json(admin.rest.resources.Order.count({ session }));
    * };
@@ -74,10 +74,10 @@ export interface AdminApiContext<
    *
    * ```ts
    * // /app/routes/**\/*.ts
-   * import { LoaderArgs, json } from "@remix-run/node";
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const loader = async ({ request }: LoaderArgs) => {
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
    *   const { admin, session } = await authenticate.admin(request);
    *   const response = await admin.rest.get({ path: "/customers/count.json" });
    *   const customers = await response.json();
@@ -97,10 +97,10 @@ export interface AdminApiContext<
    * <caption>Querying the GraphQL API.</caption>
    * <description>Use `admin.graphql` to make query / mutation requests.</description>
    * ```ts
-   * import { ActionArgs } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export async function action({ request }: ActionArgs) {
+   * export async function action({ request }: ActionFunctionArgs) {
    *   const { admin } = await authenticate.admin(request);
    *
    *   const response = await admin.graphql(

diff --git a/packages/shopify-app-remix/src/server/clients/storefront/types.ts b/packages/shopify-app-remix/src/server/clients/storefront/types.ts
@@ -12,10 +12,10 @@ export interface StorefrontContext {
    * <caption>Querying the GraphQL API.</caption>
    * <description>Use `storefront.graphql` to make query / mutation requests.</description>
    * ```ts
-   * import { ActionArgs } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export async function action({ request }: ActionArgs) {
+   * export async function action({ request }: ActionFunctionArgs) {
    *   const { storefront } = await authenticate.storefront(request);
    *
    *   const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`);

diff --git a/packages/shopify-app-remix/src/server/config-types.ts b/packages/shopify-app-remix/src/server/config-types.ts
@@ -96,12 +96,12 @@ export interface AppConfigArg<
    * export const authenticate = shopify.authenticate;
    *
    * // /app/routes/webhooks.jsx
-   * import { ActionArgs } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    *
    * import { authenticate } from "../shopify.server";
    * import db from "../db.server";
    *
-   * export const action = async ({ request }: ActionArgs) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { topic, shop } = await authenticate.webhook(request);
    *
    *   switch (topic) {
@@ -200,10 +200,10 @@ export interface AppConfigArg<
    * export const authenticate = shopify.authenticate;
    *
    * // /app/routes/auth/$.jsx
-   * import { LoaderArgs } from "@remix-run/node";
+   * import { LoaderFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../../shopify.server";
    *
-   * export async function loader({ request }: LoaderArgs) {
+   * export async function loader({ request }: LoaderFunctionArgs) {
    *   await authenticate.admin(request);
    *
    *   return null