[TanStack Start] How does one invalidate specific server functions (in between components)?

[alexwork1611]

Hi,

Let's say we have two components. One of them calls a server function that has a side effect of creating a notification. Notifications are displayed by a different component (in the navbar, for example). How do I invalidate the notifications server function call from within the component that triggers the handler with the side effect of adding a notification?

I know that tRPC and TanStack Query offer this sort of functionality, but how can I achieve it with server functions? See my example below.

Thanks!

[schiller-manuel]

if you call the server function from a component, there is nothing to invalidate. nothing is cached. I might be misunderstanding your question, so an actual example would be helpful.

[alexwork1611]

Here's an example:

https://codesandbox.io/p/devbox/naughty-pateu-dzl4dk?file=%2Fapp%2Futils%2Fposts.tsx%3A10%2C1

More specifically, this line:

So how do I invalidate a fetchPosts server function (that's called in some component) after I call the post server function createPost (that's called in another component)?

[schiller-manuel]

when called in components, you would need to call again. a server function is just ... a function. it does not have state. you handle this. or just use query to call it and then you can invalidate via query

[alexwork1611]

when called in components, you would need to call again. a server function is just ... a function. it does not have state. you handle this. or just use query to call it and then you can invalidate via query

Good to know. Going with tRPC, then.

[alexwork1611]

when called in components, you would need to call again. a server function is just ... a function. it does not have state. you handle this. or just use query to call it and then you can invalidate via query

By the way, my thinking behind going for tRPC is that tRPC automatically provides invalidation calls. I think you should consider adding a more robust and developer-friendly API for invalidating server functions (with Query).

[schiller-manuel]

just use query to call a server function then? what do you think is missing?

[alexwork1611]

Well, I think you should add a helper function that automatically computes the keys. The current API is too verbose (see image below). TanStack Start has really compact and powerful APIs, and I think it's missing in this regard.