What is GraphQL? - Understanding GraphQL as a Frontend Developer

If you're new to fetching data from GraphQL APIs in React, you may have noticed that working with a GraphQL API is quite different from consuming a RESTful API. In this article, we'll dive into the benefits of GraphQL and explore how to handle data fetching from a GraphQL endpoint.

I break this article into two parts so that you won't be bored reading a long text. This is part 1 and the link to part 2 will be updated once it's ready.

So, let's start.

What is GraphQL?

GraphQL is a query language that allows you to retrieve and manipulate data in a client-server architecture.

It's a runtime for APIs that was originally built by Facebook (now Meta) and is now maintained by a thriving community of open-source contributors.

The idea behind this technology is to eliminate stress and expensive operations that comes with RESTful APIs.

And how is GraphQL doing this? Let's talk about it.

1. Fetch What You Need

One of the key benefits of GraphQL is that it enables you to fetch only the data you need. With a RESTful API, you typically receive an entire resource, even if you only require a specific subset of data. This can slow down your application and make it less efficient.

To illustrate this point, imagine that you're building a user profile page and you need to retrieve the user's age and username. With a RESTful API, you might need to retrieve the entire user object, which could include a lot of unnecessary data. With GraphQL, you can simply query the User object and retrieve only the fields that you need.

Example:

{
  user(user_id: "205") {
    username
    age
  }
}

By using GraphQL, you can greatly reduce the amount of data being transferred between your client and server, resulting in a faster, more efficient application.

RELATED: How to Fetch Your DEV.to Articles in Reactjs

2. One Endpoint for Your Entire Application

With RESTful APIs, you usually need different endpoints for different logic. For example, to handle user login, you might have an endpoint like https://api.domain.com/login, and for registration, you might have another endpoint like /register. This can get confusing and difficult to manage, especially as your application grows.

However, with GraphQL, you only need one endpoint for your entire application. Whether you're logging in, registering a user, or setting a password, you can do it all using the same endpoint. This makes it easier to manage your API and keep everything organized.

3. Strictly Typed API

GraphQL API is strictly typed, meaning that the backend developer designing the API has to define certain data types and inputs that must be strictly adhered to by the frontend developer.

This is similar to using TypeScript interfaces, where you define the structure of an object and the types of its properties.

For example, if there is an interface defined for a user like this:

interface iUser {
  username: string;
  age: number;
}

You must pass values for username and age, and they must be of the correct data type, otherwise, your application will throw an error.

This also happens when you're interacting with a GraphQL endpoint, you must adhere to the schema definitions.

This helps to prevent bugs and errors that could occur due to incorrect data types or inputs.

4. Dedicated playground

When a backend developer creates a GraphQL API, a dedicated playground is available for that endpoint making it available for you as a frontend developer to explore and test the API easily.

This playground is like an IDE where you can see the documentation and schema of the endpoint.

For example, if your endpoint URL is https://api.domain.com, your dedicated playground will be available on https://api.domain.com/graphql.

Although this playground URL depends on the developer and how s/he structures the endpoint, but the normal convection is that GraphQL's playgrounds are available via /graphql.

This makes it easy for frontend developers to test and explore the API without having to constantly contact the backend developer for more information.

5. Introspection

GraphQL is introspective, meaning that you can examine or journal it. This means that right from the playground, you can see the documentation and schema of the endpoint.

Check this GraphQL playground mockup by @ekafyi 👇

This helps developers to understand the API and how it works, without having to constantly contact the backend developer.

There are many more benefits of using GraphQL including the fact that it's built by the team behind React.

In part 2 of this article, I will talk about consuming GraphQL endpoints, and we'll work with a practical example by building a Simple app that fetches a list of countries.

Conclusion: Learn GraphQL as a frontend Developer

GraphQL is a powerful technology that is transforming the way we think about API development. As a frontend developer, learning how to use GraphQL can make your work more efficient and enjoyable, by providing a flexible and intuitive way to interact with your backend systems.

By implementing GraphQL in your projects, you can avoid the limitations of traditional REST APIs and easily retrieve only the data you need, reducing the number of network requests and improving your app's performance. Additionally, you can take advantage of features like schema stitching, caching, and subscriptions, to build more complex and dynamic applications.

Whether you are a seasoned developer or just starting out, investing time in learning GraphQL can pay off in many ways. With the wealth of resources available online and the growing community around this technology, now is the perfect time to dive in and see what GraphQL can do for you. So why not give it a try and see how it can improve your frontend development workflow?