Remix loader returning "undefined"

Question

I am giving remix a good first-time try and I think I love its approach to data handling. However, I am facing an issue with data returning "undefined" from the loader wrapper.

import { LoaderFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import axios from 'axios';
const url = 'https://jsonplaceholder.typicode.com/users'

export async function Members(){
const {data} = await axios.get(url);
 return data
} //I am sure it returns the expected data when I call on this function.

export const loader: LoaderFunction = async () => {
const response = await Members()
 return response
};

export const Architects = () => {
  const members = useLoaderData()
  console.log(members)

  return (
    ....
  )
}

What am I really missing here? I'll appreciate a pointer here. It wouldn't be wise to use other react based approaches that isn't remix's

Answer 1

This isn't even an issue but a misappropriation in writing the methods.

For anyone who might make this kind of silly mistake, please, do ensure you are calling these remix helpers in your ROUTES.

It will not work in any of your components files just like I tried to do it. The loader and useLoaderData and most of the remix's methods are mostly serverside. Nothing is wrong with the above code. Where I called it is what the problem was.

Thanks to all those who viewed this.

Answer 2

I would also like to point out that LoaderFunction should be imported like this:

import type { LoaderFunction } from "@remix-run/node";