What is the best config for fetching user data?

So in my tanstack start , all of my auth route has this code :

import { getSession } from '@/lib/auth-client' //better-auth
export const getSessionFn = createServerFn({ method: 'GET' }).handler(
  async () => {
    const headers = getRequestHeaders()
    return await getSession({
      fetchOptions: {
        headers,
      },
    })
  },
)
export const Route = createFileRoute('/(auth)')({
  component: RouteComponent,
  beforeLoad: async () => {
    const session = await getSessionFn()
    if (!session.data?.user) {
      throw redirect({ to: '/sign-in' })
    }
    return { user: session.data.user }
  },
})

import { getSession } from '@/lib/auth-client' //better-auth
export const getSessionFn = createServerFn({ method: 'GET' }).handler(
  async () => {
    const headers = getRequestHeaders()
    return await getSession({
      fetchOptions: {
        headers,
      },
    })
  },
)
export const Route = createFileRoute('/(auth)')({
  component: RouteComponent,
  beforeLoad: async () => {
    const session = await getSessionFn()
    if (!session.data?.user) {
      throw redirect({ to: '/sign-in' })
    }
    return { user: session.data.user }
  },
})

I notice that everytime I change page within my dashboard. It always refetching.
Also using

defaultPreload: 'intent'

defaultPreload: 'intent'

when hovering my

<Link>

<Link>

tag it is refetching again. Even when I mistakanly hover over a

<Link>

<Link>

tag. Example when I open a shadcn sidebar, the cursor accidently hover over the brand logo.

I think within 1 user journey there will be 10+ fetching happened.
Is this normal? (like in real world apps, I'm still learning btw),
if not.. please give me a feedback..
thanks

TanStack•3mo ago•

9 replies

slow-yellow

What is the best config for fetching user data?

So in my tanstack start , all of my auth route has this code :

import { getSession } from '@/lib/auth-client' //better-auth
export const getSessionFn = createServerFn({ method: 'GET' }).handler(
  async () => {
    const headers = getRequestHeaders()
    return await getSession({
      fetchOptions: {
        headers,
      },
    })
  },
)
export const Route = createFileRoute('/(auth)')({
  component: RouteComponent,
  beforeLoad: async () => {
    const session = await getSessionFn()
    if (!session.data?.user) {
      throw redirect({ to: '/sign-in' })
    }
    return { user: session.data.user }
  },
})

import { getSession } from '@/lib/auth-client' //better-auth
export const getSessionFn = createServerFn({ method: 'GET' }).handler(
  async () => {
    const headers = getRequestHeaders()
    return await getSession({
      fetchOptions: {
        headers,
      },
    })
  },
)
export const Route = createFileRoute('/(auth)')({
  component: RouteComponent,
  beforeLoad: async () => {
    const session = await getSessionFn()
    if (!session.data?.user) {
      throw redirect({ to: '/sign-in' })
    }
    return { user: session.data.user }
  },
})

I notice that everytime I change page within my dashboard. It always refetching.
Also using

defaultPreload: 'intent'

defaultPreload: 'intent'

when hovering my

<Link>

<Link>

tag it is refetching again. Even when I mistakanly hover over a

<Link>

<Link>

What is the best config for fetching user data?

Similar Threads

What is the best config for fetching user data?

Similar Threads

Similar Threads

Similar Threads