T
TanStack•7mo ago
national-gold

Using global variable store in @tanstack/start dangerous? or just acceptable in @tanstack/router?

I'm looking at the tanstack/router examples for data loading, and I will see this pattern 
//https://tanstack.com/router/latest/docs/framework/react/guide/external-data-loading
//THIS IS A GLOBAL VARIABLE
let postsCache = []

export const Route = createFileRoute('/posts')({
  loader: async () => {
    postsCache = await fetchPosts()
  },
  component: () => {
    return (
      <div>
        {postsCache.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </div>
    )
  },
})
//https://tanstack.com/router/latest/docs/framework/react/guide/external-data-loading
//THIS IS A GLOBAL VARIABLE
let postsCache = []

export const Route = createFileRoute('/posts')({
  loader: async () => {
    postsCache = await fetchPosts()
  },
  component: () => {
    return (
      <div>
        {postsCache.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </div>
    )
  },
})
Or 
//From basic-react-query example in @tanstack/router
//THIS IS A GLOBAL VARIABLE
const queryClient = new QueryClient()

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  // Since we're using React Query, we don't want loader calls to ever be stale
  // This will ensure that the loader is always called when the route is preloaded or visited
  defaultPreloadStaleTime: 0,
  scrollRestoration: true,
  context: {
    queryClient,
  },
})
//From basic-react-query example in @tanstack/router
//THIS IS A GLOBAL VARIABLE
const queryClient = new QueryClient()

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  // Since we're using React Query, we don't want loader calls to ever be stale
  // This will ensure that the loader is always called when the route is preloaded or visited
  defaultPreloadStaleTime: 0,
  scrollRestoration: true,
  context: {
    queryClient,
  },
})
I understand that @tanstack/router it is 100% on the client, so this should be fine. But can I use this pattern in @tanstack/start as well? Since it will be run on the server, will these global variables LEAK if they are run for different authenticated users for example? Or is tanstacks/start implementation that these are run inside some closure? In @tanstack/start 
export function createRouter() {
//Inside Closure
  const queryClient = new QueryClient()

  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      defaultPreload: 'intent',
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
    }),
    queryClient,
  )
}
export function createRouter() {
//Inside Closure
  const queryClient = new QueryClient()

  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      defaultPreload: 'intent',
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
    }),
    queryClient,
  )
}
2 Replies
national-gold
national-goldOP•7mo ago
The queryClient is inside a closure and is only passed via the router context. But is this pattern dangerous in tanstack/start? 
export const queryClient = new QueryClient()
//OR
export const appStore = createAppStore()

//ElseWhere
import { queryClient } from './app.ts'
import { appStore } from './app.ts'
export const queryClient = new QueryClient()
//OR
export const appStore = createAppStore()

//ElseWhere
import { queryClient } from './app.ts'
import { appStore } from './app.ts'
sensitive-blue
sensitive-blue•7mo ago
you should not use global vars with start make sure to create whatever you need inside of the e.g. createRouter() function, as this will be called per request

Did you find this page helpful?