T
TanStack•2y ago
robust-apricot

loaderData

so I managed to get my route loader to work 
export const Route = createFileRoute('/subscription')({

  loader: async ({ context }) => {
     ({
      queryKey: ['todos', { data: context.auth.userId }],
      queryFn: await getUserData(context.auth.userId)
    })
  },
  component: SubsPage,
});

function SubsPage() {
  const subbed = Route.useLoaderData();
return ( etc. ) }
export const Route = createFileRoute('/subscription')({

  loader: async ({ context }) => {
     ({
      queryKey: ['todos', { data: context.auth.userId }],
      queryFn: await getUserData(context.auth.userId)
    })
  },
  component: SubsPage,
});

function SubsPage() {
  const subbed = Route.useLoaderData();
return ( etc. ) }
but the subbed object is undefined loader triggers and gets the data. Isn't that the correct way to access the loaded data with const subbed = Route.useLoaderData(); or const subbed = useLoaderData({from: "/subscription"}) ?
12 Replies
like-gold
like-gold•2y ago
Are you using react-query? If so, you need to: 
beforeLoad: () => {
  return { dataOptions: { queryKey: [...], ... } }
},
loader: async ({ context: { queryClient, dataOptions } }) => {
  await queryClient.ensureQueryData(dataOptions)
}
beforeLoad: () => {
  return { dataOptions: { queryKey: [...], ... } }
},
loader: async ({ context: { queryClient, dataOptions } }) => {
  await queryClient.ensureQueryData(dataOptions)
}
and 
function Page() {
  const context = Route.useRouteContext()
  const query = useSuspenseQuery(context.dataOptions)
  // ..
}
function Page() {
  const context = Route.useRouteContext()
  const query = useSuspenseQuery(context.dataOptions)
  // ..
}
robust-apricot
robust-apricotOP•2y ago
I have to pass the queryClient in the context in the root route for that to work right ? I'm using clerk for auth and have to wait for that response - that I have already in the context
like-gold
like-gold•2y ago
That means, you aren't using react-query for the data fetching. Then, 
loader: async ({ context }) => {
  return { userData: await getUserData(context.auth.userId) }
}
loader: async ({ context }) => {
  return { userData: await getUserData(context.auth.userId) }
}
and 
function Page() {
  const { userData } = Route.useLoaderData()
  // ..
}
function Page() {
  const { userData } = Route.useLoaderData()
  // ..
}
robust-apricot
robust-apricotOP•2y ago
I'm using tan stack query but it's my first time using tsq so yeah let me try that simpler getuserData - I missed that return function !
like-gold
like-gold•2y ago
Yeah, its a matter of where the actual data fetching is happening. If you are using Tanstack Query then you need to follow those conventions, if not if is just a fetch then you can return it from the loader.
like-gold
like-gold•2y ago
See the Basic + React Query (file-based) example. https://stackblitz.com/github/tanstack/router/tree/main/examples/react/basic-react-query-file-based
StackBlitz
Router Basic React Query File Based Example - StackBlitz
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
robust-apricot
robust-apricotOP•2y ago
allright. thx for your help. have you seen I added another fix for the documentation of rect router in the router chat
like-gold
like-gold•2y ago
Could you link that here?
robust-apricot
robust-apricotOP•2y ago
https://tanstack.com/router/v1/docs/framework/react/guide/router-context // src/routes/todos.tsx export const Route = createFileRoute('/todos')({ component: Todos, loader: ({ context }) => { await context.queryClient.ensureQueryData({ queryKey: ['todos', { userId: user.id }], queryFn: fetchTodos, }) }, }) is the example with loader and context shouldn't that be loader: async ({ context }) => { because await later ? @Sean Cassiere async missing
like-gold
like-gold•2y ago
Yup you are right.
robust-apricot
robust-apricotOP•2y ago
I know 🙂 lol
like-gold
like-gold•2y ago
I don't have merge access, so when I get up in the morning I'll ping Tanner or Manuel on that.

Did you find this page helpful?