#manage huge loaders

1 messages · Page 1 of 1 (latest)

green cradle
#

Hello, I have some files that contains a lot of lines of code in the export const loader.
My approach is to create a loaders files on a loader folder.

shy tapir
#

I would see what you're doing on those loaders and try to move it to different functions

#

e.g. a function to fetch data from a specific endpoint or a function to query the DB for get some specific resource

#

like getUserById

green cradle
#

Im trying this approach

#

But the value hi is not showing

shy tapir
#

is that file in the routes folder?

green cradle
#

yes

#

/app/routes/loaders/loadertest.jsx

green cradle
#

loads undefined

#

but its because im not in the fileroute, there is anyway i can load that component from a different file?

thorny rain
#

Is your goal to just cleanup your page, so the loader data is handled somewhere more clean?

I just write a loaderFunction.server.tsx file, and that seemed to work fine for cleanup.

Screen_Shot_2022-10-26_at_12.33.40_PM.png
green cradle
thorny rain
#

Yea, this is in routes.

green cradle
#

on jsx can i return loaderfunction also?

thorny rain
#

have you used useLoaderData?

green cradle
#

yes

thorny rain
#

That's how you'd get the data from the loader function, into your page as JSX

green cradle
#

yes yes, but i want to know if this code works with jsx

thorny rain
#

you want to call your serverside loader function, client side?

green cradle
#

because its written on typescript

#

i can return on js the loaderfunction?

thorny rain
#

If the function requires request, context, params you cannot use it client side, you have to run it server side and return data

#

Are you asking if you can execute typescript files in your JS files?

green cradle
#

no

candid flame
#

You probably should move that loaders file out of the routes folder as it will be understood as an actual url segment

#

I also use that approach of defining loaders and actions on normal files and import them inside the routes folder

green cradle
#

so create a loaders folder on /app/components

#

and create all the loaders there, and then if i want to use a code on loader i import it

candid flame
#

Yep

green cradle
#

can you show me how you do it?

#

ss your file?

candid flame
green cradle
#

and how u use it on your component?

thorny rain
#

/app/components/page/loader

export const loaderFunction: LoaderFunction = async ({ request, context, params }) => {
    const url = new URL(request.url);
    
    const data = {
        url, 
    }
    return json({ data });
};

/app/routes/page

export const loader: LoaderFunction = async ({ request, context, params }) => {
    return await loaderFunction({ request, context, params });
};
candid flame
green cradle
#

yes from that loader you are exporting

shy tapir
#

useLoaderData on the route component

green cradle
#

``
let userId = await getUserId(request);

let userT = await getUserTotal(userId)
`` this is one function

keen glen
#

hi guys, is there a way to use loaders directly like? ```ts
export const userLoader = async () => {
return json(user,{status:200});
}

import { userLoader } from '../loaders/userLoader'

const user = useLoaderData<typeof userLoader>();```

shy tapir
keen glen
#

i try - but can't working for me 😦

# 
import { userLoader } from './api/users'

const user = useLoaderData<typeof userLoader>();

<p>{user.name}</p>
``` `TypeError: Cannot read properties of undefined (reading 'name')`
keen glen
#

what could be the problem here? Remix 1.7.3

shy tapir
#

you're not exporting it

#

you're importing it

#

you need to export it again

# 
import { userLoader } from "./api/users"
export let loader = userLoader
#

I recommend you to don't move loaders to another file

#

move functions you call in your loaders

#

so instead of userLoader create a getUserById and create a loader that calls getUserById

keen glen
keen glen
shy tapir
keen glen