T
TanStack•7mo ago
deep-jade

What happens here during code splitting?

I was showing my friends some of my code with Tanstack Start but did not know how to properly answer the following question. Take a look at this snippet 
const addSessionHistoryEntryFn = useMutation({
  mutationFn: useServerFn((props) => {
    const { data } = props;
    return sessionHistoryEntryMutation({ data });
  }),
  onSuccess: async () => {
    handleInvalidation();
  },
  onError: (error) => console.error("Unable to store message: ", error),
});
const addSessionHistoryEntryFn = useMutation({
  mutationFn: useServerFn((props) => {
    const { data } = props;
    return sessionHistoryEntryMutation({ data });
  }),
  onSuccess: async () => {
    handleInvalidation();
  },
  onError: (error) => console.error("Unable to store message: ", error),
});
What happens here during code splitting - how does the browser call the server function using useServerFn. Does the server function make it to the client at all?
1 Reply
correct-apricot
correct-apricot•7mo ago
useServerFn is not relevant for "splitting" createServerFn is the part where it happens on the client, our compiler replaces the function logic by a fetch call to the server (simplified explanation, but that's basically it)

Did you find this page helpful?