genetic-orange

What version should I use to match the documentation?

Hey everyone, first time poster here. I found TanStack because i was looking for a typesafe router for react, now I am stumped when using the latest beta release while following the documentation. I am following this doc about loading data: https://tanstack.com/router/v1/docs/guide/data-loading#the-loader-route-option and get the type error in the attached image. I figure this is because the documentation of a beta product may not be in sync with the code. - Am I doing something wrong > am I missing something in the documentation? - Or is there a better version that you recomend using to match the documentation? - Or is there an up to date example of how to use the library that I could use to see how things work?

Data Loading | TanStack Router Docs

Data loading is a common concern for web applications and is extremely related to routing. When loading any page for your app, it's ideal if all of the async requirements for those routes are fetched and fulfilled as early as possible and in parallel. The router is the best place to coordinate all of these async dependencies as it's usually the...

9 Replies

genetic-orangeOP•3y ago

@Tanner Linsley after the last update I don't get those type errors anymore! so that is an improvement, however the types do not yet match the documentation. That means it is also not working with typesafety as I hoped. as you can see in the attachment all generic types are any. Anyways let me know how I can make this typesafe again please. I could then help you update the documentation if you'd like

ambitious-aqua•3y ago

Tanstack loader is currently in Alpha. Would consider using something different when testing the router. (If you want it to be stable/work)

eager-peach•3y ago

please share code insead of images and also can you post code for the function fetch room

deep-jade•3y ago

Yep. I need a CodeSandBox with as little as possible to debug.

eager-peach•3y ago

for sure i know loaders are type safe as i have used them for a project it returns any if you haven't declared loaders module if used with loaderClient

genetic-orangeOP•3y ago

I'm going to try and make a CodeSandbox or something similar later, but to be honest, I am not looking for the fix for my code. More looking for a working example as to how to set them up with the current version since the documentation does not seem to match the current interface. this documentation: https://tanstack.com/router/v1/docs/guide/data-loading#the-loader-route-option states that this is valid code:

// Access the loader's data, in this case with the useLoader hook
    const posts = useLoader({ loader: postsLoader })

// Access the loader's data, in this case with the useLoader hook
    const posts = useLoader({ loader: postsLoader })

while when I do this:

    const room= useLoader({ loader: roomLoader });

    const room= useLoader({ loader: roomLoader });

I get this error:

Argument of type '{ loader: Loader<"room", unknown, { room: Room[]; }, Error>; }' is not assignable to parameter of type '{ key: unknown; track?: ((loaderStore: LoaderStore<any, any>) => any) | undefined; } & { variables?: any; }'.
  Object literal may only specify known properties, and 'loader' does not exist in type '{ key: unknown; track?: ((loaderStore: LoaderStore<any, any>) => any) | undefined; } & { variables?: any; }

Argument of type '{ loader: Loader<"room", unknown, { room: Room[]; }, Error>; }' is not assignable to parameter of type '{ key: unknown; track?: ((loaderStore: LoaderStore<any, any>) => any) | undefined; } & { variables?: any; }'.
  Object literal may only specify known properties, and 'loader' does not exist in type '{ key: unknown; track?: ((loaderStore: LoaderStore<any, any>) => any) | undefined; } & { variables?: any; }

Data Loading | TanStack Router Docs

genetic-orangeOP•3y ago

This is the minimum amount of code for the full reproduction in 1 tsx file (I have little experience with CodeSandBox so that will require some more effort/learning to set up)

import { Loader, useLoader } from "@tanstack/react-loaders";
import { RootRoute, Route, useParams } from "@tanstack/router";

const rootRoute = new RootRoute({
  component: () => <div></div>,
});

type RoomType = { name: string }

const roomLoader = new Loader({
  key: "room",
  loader: async (params) => {
    const res = await Promise.resolve([{ name: "test" }] as RoomType[]);
    return { room: res };
  },
});

const roomRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "$roomId",
  async loader({ params }) {
    await roomLoader.load(params.roomId);
  },
  component: Room,
});

export default function Room() {
  const { roomId } = useParams({ from: roomRoute.id });

  const room = useLoader({ key: "room", variables: roomId });
  room[0].data;
  
  return (
    <div>
        <h2>{room.name}</h2>
    </div>
  );
}

import { Loader, useLoader } from "@tanstack/react-loaders";
import { RootRoute, Route, useParams } from "@tanstack/router";

const rootRoute = new RootRoute({
  component: () => <div></div>,
});

type RoomType = { name: string }

const roomLoader = new Loader({
  key: "room",
  loader: async (params) => {
    const res = await Promise.resolve([{ name: "test" }] as RoomType[]);
    return { room: res };
  },
});

const roomRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "$roomId",
  async loader({ params }) {
    await roomLoader.load(params.roomId);
  },
  component: Room,
});

export default function Room() {
  const { roomId } = useParams({ from: roomRoute.id });

  const room = useLoader({ key: "room", variables: roomId });
  room[0].data;
  
  return (
    <div>
        <h2>{room.name}</h2>
    </div>
  );
}

This results in a type error for room.name :

Property 'name' does not exist on type '[LoaderStore<any, any>, LoaderInstance<string, any, any, any>]'

Property 'name' does not exist on type '[LoaderStore<any, any>, LoaderInstance<string, any, any, any>]'

eager-peach•3y ago

you can check basic example in docs it has implementation of loaders

genetic-orangeOP•3y ago

🤦 I.. don't know how I overlooked those, going to have a look at those later, tnx!

Gaming

Programming

What version should I use to match the documentation?

Did you find this page helpful?