How to skip reloading data

Just curious if there's a way to dial in on loaders and skip running fetch functions on every single loader call.

Here's a contrived case where using search params I am conditionally rendering a modal, but the root loader also fetches pokemon.

It would be fantastic if there was a way for me to do something such that I can skip querying for all pokemon when only the modal search params change.

export const Route = createRootRouteWithContext<{ cache: Cache }>()({
  meta: () => [
    {
      charSet: "utf-8",
    },
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1",
    },
    {
      title: "TanStack Start Starter",
    },
  ],
  component: RootComponent,
  validateSearch: z
    .object({
      modalType: z.enum(["say-hello"]).optional(),
    })
    .optional().parse,
  loaderDeps: ({ search }) => {
    return {
      modalType: search?.modalType,
    };
  },
  loader: async () => {
    return {
      allPokemon: await getAllPokemon(),
    };
  },
  notFoundComponent: () => <div>Not Found</div>,
});

export const Route = createRootRouteWithContext<{ cache: Cache }>()({
  meta: () => [
    {
      charSet: "utf-8",
    },
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1",
    },
    {
      title: "TanStack Start Starter",
    },
  ],
  component: RootComponent,
  validateSearch: z
    .object({
      modalType: z.enum(["say-hello"]).optional(),
    })
    .optional().parse,
  loaderDeps: ({ search }) => {
    return {
      modalType: search?.modalType,
    };
  },
  loader: async () => {
    return {
      allPokemon: await getAllPokemon(),
    };
  },
  notFoundComponent: () => <div>Not Found</div>,
});

TanStack•17mo ago•

27 replies

progressive-amaranth

How to skip reloading data

export const Route = createRootRouteWithContext<{ cache: Cache }>()({
  meta: () => [
    {
      charSet: "utf-8",
    },
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1",
    },
    {
      title: "TanStack Start Starter",
    },
  ],
  component: RootComponent,
  validateSearch: z
    .object({
      modalType: z.enum(["say-hello"]).optional(),
    })
    .optional().parse,
  loaderDeps: ({ search }) => {
    return {
      modalType: search?.modalType,
    };
  },
  loader: async () => {
    return {
      allPokemon: await getAllPokemon(),
    };
  },
  notFoundComponent: () => <div>Not Found</div>,
});

export const Route = createRootRouteWithContext<{ cache: Cache }>()({
  meta: () => [
    {
      charSet: "utf-8",
    },
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1",
    },
    {
      title: "TanStack Start Starter",
    },
  ],
  component: RootComponent,
  validateSearch: z
    .object({
      modalType: z.enum(["say-hello"]).optional(),
    })
    .optional().parse,
  loaderDeps: ({ search }) => {
    return {
      modalType: search?.modalType,
    };
  },
  loader: async () => {
    return {
      allPokemon: await getAllPokemon(),
    };
  },
  notFoundComponent: () => <div>Not Found</div>,
});

How to skip reloading data

Similar Threads

How to skip reloading data

Similar Threads

Similar Threads

Similar Threads