Over-fetching is when the server sends back more data than you need. For example, your React component only needs a user's name, but REST sends back the full user object including email, address, phone number, and preferences. Under-fetching is when you need multiple requests to get all your data. For example, getting a user, their posts, and their comments requires three separate requests in REST. GraphQL fixes both problems by letting the client decide exactly what data to request. Instead of the server deciding what to send, the client writes a query asking for only the specific fields it needs, all in a single request. This makes data fetching more efficient and faster.
REST has many endpoints, with each resource having its own URL such as /api/users, /api/posts, and /api/comments. The more resources your app has, the more endpoints you have to manage. GraphQL has only one single endpoint, typically /graphql, and everything goes through it. GraphQL's schema acts like a contract between the frontend and backend, telling developers exactly what data is available. This benefits frontend developers because they know what fields exist before writing any code, get autocomplete support in their code editor, and immediately see errors if they request a field that doesn't exist.
Caching is easier in REST because each URL always returns the same type of data. The browser can save that response and reuse it next time the same URL is requested. In GraphQL, caching is harder because everything goes through a single endpoint and the browser can't tell what data is inside each request just from the URL alone. However, GraphQL is worth the extra complexity when your app has multiple clients such as web, mobile, and tablet that all need different shapes of data from the same API.