GraphQL abstracts the downstream API calls from the frontend and all that frontend has to do is request fields in a query that are required for the rendering of the component. The frontend is not aware that a corresponding field might result in an API call or heavy computations on the backend side. This abstraction hits the performance when the GraphQL schema is not structured properly. Let's take an example to understand more:
Here's the query to get available rooms for a hotel:
hotel (id: $hotelId) { id rooms { id type name } }
The frontend doesn't know that the
rooms
field inside the query
hotel
will fire another API call even
type
field would be fetched from another API endpoint. These nested API calls worsen the performance if there are more rooms. We can effectively solve this structuring the schema well and using data loaders.