T
TanStack•5w ago
wise-white

Differentiate between server and client on function level.

Using docker & developing outside docker. Use-case: - Imagine you are working with tanstack start and using dynamic server function in loader prop. And inside your server function, you want to fetch some data from the server running on docker. At first glance, you might think just use the docker service name instead of localhost. But it might not be that simple, because your loader function can also run on client side. Where the docker's internal service name will not work. Also when running tanstack-start in dev mode, api client will require localhost. Here is my solution, please feel free to provide any other solutions. I'm really looking forwards to see if there are any other great apis/solutions I could use instead of this. 
export const OapiClient = createClient({
  baseUrl:
    import.meta.env.DEV || !import.meta.env.SSR
      ? import.meta.env.VITE_BACKEND_URL
      : import.meta.env.VITE_SERVER_BACKEND_URL,
  credentials: "include",
});
export const OapiClient = createClient({
  baseUrl:
    import.meta.env.DEV || !import.meta.env.SSR
      ? import.meta.env.VITE_BACKEND_URL
      : import.meta.env.VITE_SERVER_BACKEND_URL,
  credentials: "include",
});
- import.meta.env.DEV to check if this function is called from development OR production environment. - import.meta.env.SSR to check if this function is called from server OR client.
2 Replies
conscious-sapphire
conscious-sapphire•5w ago
you can use createIsomorphicFn to build a function with different impls for client and server . not yet documented
wise-white
wise-whiteOP•5w ago
Thanks for the response. Btw, I just checked tests to explore how I should use it. Looks promising.

Did you find this page helpful?