Comments (7)
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;
from remix.
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;
from remix.
The same applies to the team and member loaders later in the tutorial.
from remix.
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)
from remix.
@anglee try using the data folder instead of the loaders folder. It should work.
I'm getting null in either case
from remix.
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 };
from remix.
Not applicable anymore.
from remix.
Related Issues (20)
- Upgrade `isbot` (again) HOT 6
- remix routes does not work with vite HOT 1
- Wrong type in `LayoutComponent` exported from `@remix-run/react` HOT 1
- Hosting Remix + Vite on Vercel: `Cannot find package '@remix-run/dev' imported from /vercel/path0/vite.config.ts.timestamp-[number].mjs` HOT 8
- Requested module 'use-query-params' is a CommonJS module HOT 3
- Link with button on top still triggers HOT 11
- Hydration errors with `export Layout` in root HOT 3
- remix vite:dev via npm run in workspace causes error when cancelled
- encoded character in url causes "Initial URL does not match URL at time of hydration" HOT 2
- Type mismatch when returning from useLoaderData HOT 6
- Streaming Breaks on Firefox
- Ignore `.tsbuildinfo` files from publishing to npm
- SPA Mode: get invalid HTML when `HydrateFallback` is omitted (using `Layout`) HOT 2
- SPA Mode: `remix reveal` generate entries files with unexpected content HOT 8
- cannot create a /server route HOT 2
- Error boundary not rendered inside component with `clientLoader.hydrate`
- Manifest is not created if `buildDirectory` is set to `lib` HOT 3
- [Vite] Noisy error βModule level directives cause errors when bundled, "use client" was ignored.β when running `remix vite:build` on a project that includes a dependency file which includes the `"use client"` directive. HOT 4
- Vite template doesn't detect the `.server` modules HOT 1
- Remix returns a 500 for POST requests against routes without an action instead of a 405 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remix.