T
TanStack•2y ago
correct-apricot

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 out of the routes search params again to do so. Is it possible to just use 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?
2 Replies
harsh-harlequin
harsh-harlequin•2y ago
you must use useQuery or useSuspenseQuery to get all features react-query offers
harsh-harlequin
harsh-harlequin•2y ago

Did you find this page helpful?