// How should Zustand and TanStack Query work together?
// Teaching excerpts; see the explanation and boundaries on the episode page.

// Store the selection. Fetch the product.
const useSelection = create(() => ({
  selectedId: 1
}));

useSelection.setState({
  selectedId: 2
});

// Selection drives the query key.
const id = useSelection(
  s => s.selectedId
 );
const product = useQuery({
  queryKey: ["product", id],
  queryFn: () => getProduct(id)
});

// Refresh one source of truth.
await savePrice(id, price);
await queryClient.invalidateQueries({
  queryKey: ["product", id]
});

// One reader? Keep it local.
const [id, setId] = useState(1);