First loader not getting gists data

[anglee]

I am trying to go through the tutorial and at step Your First Loader, after adding the file loaders/routes/gists.js, I am still seeing data being null, not seeing the gist
Here is what I have: https://github.com/anglee/my-remix-app
I tried to console.log in the gists loader but didn't see the log.


I have confirmed that I do see the gist when I visit https://api.github.com/gists in the browser or cURL in terminal.

[guido4000]

I wondered, too. But you can use the loader template from the index.ts file in the loaders folder.

import type { DataLoader } from "@remix-run/core";

let loader: DataLoader = async () => {
  return fetch("https://api.github.com/gists");
};

export = loader;

[guido4000]

The same applies to the team and member loaders later in the tutorial.

[mikeybinns]

This seemed odd to me as I had to create a loaders folder in the starter project. My guess is they renamed the "loaders" folder to "data" and forgot to update the docs on that page, or just missed it.
They also referenced "gists.ts" when on the previous page, we created a "gists.tsx" file, minor issue, but easy fix.

@anglee try using the data folder instead of the loaders folder. It should work.

Update:
I found this code in the source code which seems to confirm my suspicions. The docs are wrong, the folder should be data:

/**
 * Returns the data for the current route from `data/routes/*`.
 */
export declare function useRouteData<T = AppData>(): T;

[beerify]

They also referenced "gists.ts" when on the previous page, we created a "gists.tsx" file, minor issue, but easy fix.

I believe the gists.tsx is for the react component similar to jsx. Plain typescript files are just .ts. So theres a gists react component (tsx) and a gists loader (ts)

[beerify]

@anglee try using the data folder instead of the loaders folder. It should work.
I'm getting null in either case

[beerify]

edit: The reason certain routes are not loading is because there's an issue with the build process. Check data-build/routes to see if the route has been rendered there. If not, you're going to get null.

I'm not sure what the issue is but data seems to load or fail to load in an arbitrary fashion. I have gists working and now the team data is showing null much in the same was as gists were previously. Nothing changed to get gists to work, it just started working at some random point, perhaps the team will decide to start working as well.

Maybe there's something going on behind the scenes thats preventing data from loading?

data/routes/gists/ts:

import type { Loader } from "@remix-run/data";

let loader: Loader = () => {
  return fetch("https://api.github.com/gists");
};

export { loader };

data/routes/team.js

import type { Loader } from "@remix-run/data";

let loader: Loader = () => {
  return fetch("https://api.github.com/orgs/reacttraining/members");
};

export { loader };

[machour]

Not applicable anymore.