TanStack•3y ago•

1 reply

then-purple

Typesafe context for FileRoute

Hi,
Is there any way to make the route context typesafe with the new FileRoutes? I followed the TanStack Query tutorial (https://tanstack.com/query/latest/docs/react/examples/react/react-router), adding the

beforeLoad

beforeLoad

loader

loader

and

pendingComponent

pendingComponent

properties to the route config, but when I try to request the context inside

component

component

like this:

const { queryOptions } = useRouterContext({ from: "/plan" });

const { queryOptions } = useRouterContext({ from: "/plan" });

I get an IDE error "Property 'queryOptions' does not exist on type 'RouteContext'.". There is a generic property

TContext

TContext

, but it's at the end of the list of generic properties (and I don't want to redefine all properties).

Is there any way for TanStack Router to infer the data returned by

beforeLoad

beforeLoad

or is there any way I can explicitly define it, without redefining a dozen other generic values? Data returned by

validateSearch

validateSearch

is being properly infered, and inside the

loader

loader

function, the

search

search

parameter is properly typed as

{ id: string }

{ id: string }

Code snippet:

export const route = new FileRoute("/plan").createRoute({
  component: () => {
    const { queryOptions } = useRouterContext({ from: "/plan" }); // Error here - TS2339
    return (...);
  },
  beforeLoad: ({ search }): { queryOptions: ... } => {
    ...
    return {
      ...,
      queryOptions: {...},
    };
  },
  validateSearch: (search: Record<string, unknown>): { id: string } => {
    ...
  },
  loader: async ({ search, context }) => {
    await queryClient.ensureQueryData((context as any).queryOptions);
  },
  pendingComponent: () => <Text>Loading...</Text>,
});

export const route = new FileRoute("/plan").createRoute({
  component: () => {
    const { queryOptions } = useRouterContext({ from: "/plan" }); // Error here - TS2339
    return (...);
  },
  beforeLoad: ({ search }): { queryOptions: ... } => {
    ...
    return {
      ...,
      queryOptions: {...},
    };
  },
  validateSearch: (search: Record<string, unknown>): { id: string } => {
    ...
  },
  loader: async ({ search, context }) => {
    await queryClient.ensureQueryData((context as any).queryOptions);
  },
  pendingComponent: () => <Text>Loading...</Text>,
});

TanStack Router version:

0.0.1-beta.174

0.0.1-beta.174

React Query React Router), Example | TanStack Query Docs

An example showing how to implement React Router), in React Query

TanStack•3y ago•

1 reply

then-purple

Typesafe context for FileRoute

beforeLoad

beforeLoad

loader

loader

and

pendingComponent

pendingComponent

properties to the route config, but when I try to request the context inside

component

component

like this:

const { queryOptions } = useRouterContext({ from: "/plan" });

const { queryOptions } = useRouterContext({ from: "/plan" });

I get an IDE error "Property 'queryOptions' does not exist on type 'RouteContext'.". There is a generic property

TContext

TContext

, but it's at the end of the list of generic properties (and I don't want to redefine all properties).

Is there any way for TanStack Router to infer the data returned by

beforeLoad

beforeLoad

or is there any way I can explicitly define it, without redefining a dozen other generic values? Data returned by

validateSearch

validateSearch

is being properly infered, and inside the

loader

loader

function, the

search

search

parameter is properly typed as

{ id: string }

{ id: string }

Code snippet:

export const route = new FileRoute("/plan").createRoute({
  component: () => {
    const { queryOptions } = useRouterContext({ from: "/plan" }); // Error here - TS2339
    return (...);
  },
  beforeLoad: ({ search }): { queryOptions: ... } => {
    ...
    return {
      ...,
      queryOptions: {...},
    };
  },
  validateSearch: (search: Record<string, unknown>): { id: string } => {
    ...
  },
  loader: async ({ search, context }) => {
    await queryClient.ensureQueryData((context as any).queryOptions);
  },
  pendingComponent: () => <Text>Loading...</Text>,
});

export const route = new FileRoute("/plan").createRoute({
  component: () => {
    const { queryOptions } = useRouterContext({ from: "/plan" }); // Error here - TS2339
    return (...);
  },
  beforeLoad: ({ search }): { queryOptions: ... } => {
    ...
    return {
      ...,
      queryOptions: {...},
    };
  },
  validateSearch: (search: Record<string, unknown>): { id: string } => {
    ...
  },
  loader: async ({ search, context }) => {
    await queryClient.ensureQueryData((context as any).queryOptions);
  },
  pendingComponent: () => <Text>Loading...</Text>,
});

TanStack Router version:

0.0.1-beta.174

0.0.1-beta.174

React Query React Router), Example | TanStack Query Docs

An example showing how to implement React Router), in React Query

Typesafe context for FileRoute

Similar Threads

Typesafe context for FileRoute

Similar Threads

Similar Threads

Similar Threads