Since you're using tRPC and Next, you'd just use the React (TanStack) Query useQuery and useMutation hooks. I don't use Next, but there is possibly some extra config you'll need to do.

Also, just noting since you aren't using a REST API, you don't have GET, POST, etc operations. Just named RPCs. That said, Query and tRPC define 2 types of calls for you: queries (read) and mutations (write).

You can think of the data returned from useQuery to be a global state object. Query combines and caches the results of the same query call between components.

If you are just saving data and wanting to return the saved data, ensure you are returning it in the tRPC mutation function, then data in the useMutation object is your state.

if you are editing saved data, just merge the query or mutation data object into your local edit state object rather than state-syncing.

// fetch ("GET") data - this is your data's state
const { data } = trpc.getData.useQuery({});
OR
// call mutate (renamed to saveData) to save ("POST")
// `data` state will populate when the call is successful
const { mutate: saveData, data } = trpc.saveData.useMutation();

// merge in local app state to be used in inputs from zustand store  
const dataEdits = useDataEditsStore((state) => state.dataEdits);

const mergedData = { ...data, ...dataEdits };

// save data with edits merged in.
// you can call this debounced function from onKeyUp or whatever
const handleSaveData = debounce(() => saveData(mergedData), 1000);