In which folder should I put all my loaders/actions logic?

[theocerutti]

My loaders and actions are starting to become really big so I want to split them into multiples files.
However I have no idea where should I put them.

Is this example good ?

routes/
   users/
     loaders/
        loadDataFromFacebook.ts
        loadUser.ts
        loadXYZ.ts
        index.tsx
     action/
        deleteUser.ts
        createUser.ts
        index.ts
   users.tsx

[sergiodxa]

I like to convert my routes to folders and create a queries file inside.

routes/
  users/
    route.tsx
    queries.ts

In queries.ts I export functions that extracts the logic inside the loader and action, e.g. I could have a deleteUser function or a queryUserById function.

Then in in route.tsx I put the actual loader and action functions, in the loader/action I do anything related to HTTP, e.g. get search params from the URL, validate params and search params, authenticate the user, read the request body (in an action) and validate it, and finally send the response or catch any error in the queries and throw responses.

Then I call the functions from the queries.ts file

export async function loader({ request, params }: LoaderFunctionArgs) {
  await authenticate(request);

  let userId = params.userId;
  assertIsUUID(userId);

  try {
    // call the query functions
    let [user, followers] = await Promise.all([
      queryUserById(userId),
      queryFollowersOfUser(userId)
    ]);

    return json({ user, followers }); // return a response
  } catch (exception) {
    if (exception instanceof Response) throw exception; // re-throw responses

    // handle specific errors you know the queries will throw
    if (exception instanceof Error && exception.name === "User not found") {
      throw json({ error: "NOT_FOUND" }, 404);
    }

    throw exception; // always re-throw unhandled exceptions
  }
}

export async function action({ request, params }: ActionFunctionArgs) {
  let currentUser = await authenticate(request);

  let userId = params.userId;
  assertIsUUID(userId);

  let formData = await request.formData();

  // if there's no intent, throw an error
  if (!formData.has("intent")) throw new Error("MISSING_INTENT")

  if (formData.get("intent") === INTENTS.followUser) {
    await followUser(currentUser.id, userId); // call the query function
    throw redirect(`/users/${userId}`); // I always throw redirects on actions
  }

  // validate more intents here and keep calling query functions

  // finally throw a response error for any invalid intent
  throw json({ error: "INVALID_INTENT", intent: formData.get("intent") }, 400);
}