T
TanStack•3y ago
other-emerald

Params type error

I'm trying to get an individual post on url: 
"/blog/$postslug"
"/blog/$postslug"
if I'm using code below it navigates to correct route but no data is loaded on page and show's in dev tools but if I add 
"blog/$postSlug"
"blog/$postSlug"
route doesn't appear in dev tools and Link throws type error for params. 
export const postRoute = blogRoute.createRoute({
  path: "$postSlug",
  onLoad: async ({ params: { postSlug } }) => postLoader.preload(postSlug),
  component: Post,
});
export const postRoute = blogRoute.createRoute({
  path: "$postSlug",
  onLoad: async ({ params: { postSlug } }) => postLoader.preload(postSlug),
  component: Post,
});
Router Config 
import {
  Loader,
  LoaderClient,
  LoaderClientProvider,
} from "@tanstack/react-loaders";
import { ReactRouter, RouterProvider } from "@tanstack/react-router"
import { indexRoute } from "./routes";
import { aboutRoute } from "./routes/about";
import { blogRoute } from "./routes/blog";
import { postRoute } from "./routes/post";
import { rootRoute } from "./routes/__root";
import { trpcVanilla } from "./utils/trpc";

export const postsLoader = new Loader({
  key: "posts",
  loader: async () => {
    return await trpcVanilla.contentful.getAllPosts.query({});
  },
});

export const postLoader = postsLoader.createLoader({
  key: "post",
  loader: async (postSlug: string) => {
    return await trpcVanilla.contentful.getPost.query({
      slug: postSlug
});
  },
});

export const loaderClient = new LoaderClient({
  loaders: [postsLoader, postLoader],
  defaultGcMaxAge: 3600,
});

const routeConfig = rootRoute.addChildren([
  indexRoute,
  aboutRoute,
  blogRoute.addChildren([postRoute]),
]);

export const router = new ReactRouter({
  routeConfig,
});

export function Router() {
  return (
    <>
      <LoaderClientProvider loaderClient={loaderClient}>
        <RouterProvider router={router} defaultPreload="intent" />
      </LoaderClientProvider>
    </>
  );
}

declare module "@tanstack/react-router" {
  interface RegisterRouter {
    router: typeof router;
  }
}

declare module "@tanstack/react-loaders" {
  interface RegisterLoaderClient {
    loaderClient: typeof loaderClient;
  }
}
import {
  Loader,
  LoaderClient,
  LoaderClientProvider,
} from "@tanstack/react-loaders";
import { ReactRouter, RouterProvider } from "@tanstack/react-router"
import { indexRoute } from "./routes";
import { aboutRoute } from "./routes/about";
import { blogRoute } from "./routes/blog";
import { postRoute } from "./routes/post";
import { rootRoute } from "./routes/__root";
import { trpcVanilla } from "./utils/trpc";

export const postsLoader = new Loader({
  key: "posts",
  loader: async () => {
    return await trpcVanilla.contentful.getAllPosts.query({});
  },
});

export const postLoader = postsLoader.createLoader({
  key: "post",
  loader: async (postSlug: string) => {
    return await trpcVanilla.contentful.getPost.query({
      slug: postSlug
});
  },
});

export const loaderClient = new LoaderClient({
  loaders: [postsLoader, postLoader],
  defaultGcMaxAge: 3600,
});

const routeConfig = rootRoute.addChildren([
  indexRoute,
  aboutRoute,
  blogRoute.addChildren([postRoute]),
]);

export const router = new ReactRouter({
  routeConfig,
});

export function Router() {
  return (
    <>
      <LoaderClientProvider loaderClient={loaderClient}>
        <RouterProvider router={router} defaultPreload="intent" />
      </LoaderClientProvider>
    </>
  );
}

declare module "@tanstack/react-router" {
  interface RegisterRouter {
    router: typeof router;
  }
}

declare module "@tanstack/react-loaders" {
  interface RegisterLoaderClient {
    loaderClient: typeof loaderClient;
  }
}
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?