Router with Tanstack Query - Why not useLoaderData ?

If I have a route that looks like this:

const userQueryOptions = (userId: string) => {
  queryKey: ["userDetails", { userId: userId }],
  queryFn: async () => await apiClient.get_user_details(userId),
});

const userDetailsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "userDetails",
  loaderDeps: ({ search }) => ({
    userId: search.userId
  }),
  loader: async ({ context: { apiClient }, deps: { userId }}) => {
    await apiClient.ensureQueryData(userQueryOptions(userId));
  },
  component: UserDetailsComponent,
});

const userQueryOptions = (userId: string) => {
  queryKey: ["userDetails", { userId: userId }],
  queryFn: async () => await apiClient.get_user_details(userId),
});

const userDetailsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "userDetails",
  loaderDeps: ({ search }) => ({
    userId: search.userId
  }),
  loader: async ({ context: { apiClient }, deps: { userId }}) => {
    await apiClient.ensureQueryData(userQueryOptions(userId));
  },
  component: UserDetailsComponent,
});

Then the recommendation I've seen to get the data in my component is to use

const { data } = useSuspenseQuery(userQueryOptions(userId);

const { data } = useSuspenseQuery(userQueryOptions(userId);

Which means that I need to grab the

userId

userId

out of the routes search params again to do so.

Is it possible to just use

useLoaderData

useLoaderData

or something similar so that I don't need to parse the search params again in the component, and instead just use the data I already told the loader to fetch?

TanStack•3y ago•

2 replies

then-purple

Router with Tanstack Query - Why not useLoaderData ?

If I have a route that looks like this:

const userQueryOptions = (userId: string) => {
  queryKey: ["userDetails", { userId: userId }],
  queryFn: async () => await apiClient.get_user_details(userId),
});

const userDetailsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "userDetails",
  loaderDeps: ({ search }) => ({
    userId: search.userId
  }),
  loader: async ({ context: { apiClient }, deps: { userId }}) => {
    await apiClient.ensureQueryData(userQueryOptions(userId));
  },
  component: UserDetailsComponent,
});

const userQueryOptions = (userId: string) => {
  queryKey: ["userDetails", { userId: userId }],
  queryFn: async () => await apiClient.get_user_details(userId),
});

const userDetailsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "userDetails",
  loaderDeps: ({ search }) => ({
    userId: search.userId
  }),
  loader: async ({ context: { apiClient }, deps: { userId }}) => {
    await apiClient.ensureQueryData(userQueryOptions(userId));
  },
  component: UserDetailsComponent,
});

Then the recommendation I've seen to get the data in my component is to use

const { data } = useSuspenseQuery(userQueryOptions(userId);

const { data } = useSuspenseQuery(userQueryOptions(userId);

Which means that I need to grab the

userId

userId

out of the routes search params again to do so.

Is it possible to just use

useLoaderData

useLoaderData

or something similar so that I don't need to parse the search params again in the component, and instead just use the data I already told the loader to fetch?

Router with Tanstack Query - Why not useLoaderData ?

Similar Threads

Router with Tanstack Query - Why not useLoaderData ?

Similar Threads

Similar Threads

Similar Threads