[Feature] Improve type safety by using react-router generated route specific types

.eslintrc.cjs

@@ -69,6 +69,14 @@ module.exports = {
  },
  },
  },
+ rules: {
+ "import/no-unresolved": [
+ "error",
+ {
+ ignore: ["^\\./\\+types/"],
+ },
+ ],
+ },
  extends: [
  "plugin:@typescript-eslint/recommended",
  "plugin:import/recommended",

app/routes/_index/route.tsx

@@ -1,11 +1,9 @@
-import type { LoaderFunctionArgs } from "react-router";
+import { Route } from "./+types/route";
 import { redirect, Form, useLoaderData } from "react-router";
-
 import { login } from "../../shopify.server";
-
 import styles from "./styles.module.css";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
  const url = new URL(request.url);
 
  if (url.searchParams.get("shop")) {

app/routes/app._index.tsx

@@ -1,21 +1,17 @@
+import { Route } from "./+types/app._index";
 import { useEffect } from "react";
-import type {
- ActionFunctionArgs,
- HeadersFunction,
- LoaderFunctionArgs,
-} from "react-router";
 import { useFetcher } from "react-router";
 import { useAppBridge } from "@shopify/app-bridge-react";
 import { authenticate } from "../shopify.server";
 import { boundary } from "@shopify/shopify-app-react-router/server";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
  await authenticate.admin(request);
 
  return null;
 };
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request }: Route.ActionArgs) => {
  const { admin } = await authenticate.admin(request);
  const color = ["Red", "Orange", "Yellow", "Green"][
  Math.floor(Math.random() * 4)
@@ -248,6 +244,6 @@ export default function Index() {
  );
 }
 
-export const headers: HeadersFunction = (headersArgs) => {
+export const headers: Route.HeadersFunction = (headersArgs) => {
  return boundary.headers(headersArgs);
 };

app/routes/app.tsx

@@ -1,11 +1,10 @@
-import type { HeadersFunction, LoaderFunctionArgs } from "react-router";
+import { Route } from "./+types/app";
 import { Outlet, useLoaderData, useRouteError } from "react-router";
 import { boundary } from "@shopify/shopify-app-react-router/server";
 import { AppProvider } from "@shopify/shopify-app-react-router/react";
-
 import { authenticate } from "../shopify.server";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
  await authenticate.admin(request);
 
  // eslint-disable-next-line no-undef
@@ -31,6 +30,6 @@ export function ErrorBoundary() {
  return boundary.error(useRouteError());
 }
 
-export const headers: HeadersFunction = (headersArgs) => {
+export const headers: Route.HeadersFunction = (headersArgs) => {
  return boundary.headers(headersArgs);
 };

app/routes/auth.$.tsx

@@ -1,14 +1,13 @@
-
-import type { HeadersFunction, LoaderFunctionArgs } from "react-router";
+import { Route } from "./+types/auth.$";
 import { authenticate } from "../shopify.server";
 import { boundary } from "@shopify/shopify-app-react-router/server";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
  await authenticate.admin(request);
 
  return null;
 };
 
-export const headers: HeadersFunction = (headersArgs) => {
+export const headers: Route.HeadersFunction = (headersArgs) => {
  return boundary.headers(headersArgs);
 };

app/routes/auth.login/route.tsx

@@ -1,18 +1,17 @@
+import { Route } from "./+types/route";
 import { AppProvider } from "@shopify/shopify-app-react-router/react";
 import { useState } from "react";
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
 import { Form, useActionData, useLoaderData } from "react-router";
-
 import { login } from "../../shopify.server";
 import { loginErrorMessage } from "./error.server";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
  const errors = loginErrorMessage(await login(request));
 
  return { errors };
 };
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request }: Route.ActionArgs) => {
  const errors = loginErrorMessage(await login(request));
 
  return {
@@ -30,18 +29,18 @@ export default function Auth() {
  <AppProvider embedded={false}>
  <s-page>
  <Form method="post">
- <s-section heading="Log in">
- <s-text-field
- name="shop"
- label="Shop domain"
- details="example.myshopify.com"
- value={shop}
- onChange={(e) => setShop(e.currentTarget.value)}
- autocomplete="on"
- error={errors.shop}
- ></s-text-field>
- <s-button type="submit">Log in</s-button>
- </s-section>
+  <s-section heading="Log in">
+  <s-text-field
+  name="shop"
+  label="Shop domain"
+  details="example.myshopify.com"
+  value={shop}
+  onChange={(e) => setShop(e.currentTarget.value)}
+  autocomplete="on"
+  error={errors.shop}
+  ></s-text-field>
+  <s-button type="submit">Log in</s-button>
+  </s-section>
  </Form>
  </s-page>
  </AppProvider>

app/routes/webhooks.app.scopes_update.tsx

@@ -1,21 +1,21 @@
-import type { ActionFunctionArgs } from "react-router";
+import { Route } from "./+types/webhooks.app.scopes_update";
 import { authenticate } from "../shopify.server";
 import db from "../db.server";
 
-export const action = async ({ request }: ActionFunctionArgs) => {
-  const { payload, session, topic, shop } = await authenticate.webhook(request);
-  console.log(`Received ${topic} webhook for ${shop}`);
+export const action = async ({ request }: Route.ActionArgs) => {
+ const { payload, session, topic, shop } = await authenticate.webhook(request);
+ console.log(`Received ${topic} webhook for ${shop}`);
 
-  const current = payload.current as string[];
-  if (session) {
-  await db.session.update({ 
-  where: {
-  id: session.id
-  },
-  data: {
-  scope: current.toString(),
-  },
-  });
-  }
-  return new Response();
+ const current = payload.current as string[];
+ if (session) {
+ await db.session.update({
+ where: {
+ id: session.id,
+ },
+ data: {
+ scope: current.toString(),
+ },
+ });
+ }
+ return new Response();
 };

app/routes/webhooks.app.uninstalled.tsx

@@ -1,8 +1,8 @@
-import type { ActionFunctionArgs } from "react-router";
+import { Route } from "./+types/webhooks.app.uninstalled";
 import { authenticate } from "../shopify.server";
 import db from "../db.server";
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request }: Route.ActionArgs) => {
  const { shop, session, topic } = await authenticate.webhook(request);
 
  console.log(`Received ${topic} webhook for ${shop}`);