---
title: Up Your API Game with GraphQL
description: About to start your next IT project? Use GraphQL to make your APIs flexible, powerful, and easy to work with.
image: https://blog.avenuecode.com/hubfs/Screen%20Shot%202019-08-14%20at%205.23.59%20PM.png
---
[AvenueCode.com](https://avenuecode.com) [News](https://avenuecode.com/news) [Contact](https://avenuecode.com/contact)
[](https://blog.avenuecode.com/?hsLang=en-us) *menu*
- Technology
[Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us)
[Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us)
- [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us)
- [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us)
- [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us)
- [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us)
- [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us)
- [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us)
- [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us)
- [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us)
- [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us)
- [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us)
- [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us)
- [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us)
- [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us)
- [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us)
- [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us)
- [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us)
- [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us)
# [Up Your API Game with GraphQL](https://blog.avenuecode.com/up-your-api-game-with-graphql)
- [Tweet](https://twitter.com/share)
*perm\_identity* [Leandro Rezende Pinheiro](https://blog.avenuecode.com/up-your-api-game-with-graphql/author/leandro-rezende-pinheiro?hsLang=en-us)
*schedule* 8/28/19 2:00 PM
It's good practice to start new IT projects by considering how to easily and quickly consume and display data, and one of the first steps is creating or choosing the right API for your business. So why not choose an API that's a universal query language and provides a modern approach to accessing your data sources?
With its growing popularity, you have probably already heard about GraphQL, another great tool that Facebook developers make available to the world in addition to React. GraphQL was developed internally by Facebook in 2012 before being released to the public in 2015.
##### Advantages of GraphQL
1. A single endpoint.
2. No more over-fetching.
3. No more under-fetching.
4. Display changes in real time.
5. Access multiple data sources from a single point.
6. Front-end teams can easily test their applications by mocking up the required data structures.
7. Services usually respond using JSON, which is easy to read and debug.
8. Works with other JavaScript-based libraries and frameworks, such as Vue, Angular, and others.
9. Can be used with any back-end framework or programming language.
##### GraphQL vs Rest
Let's take a look at the Rest call image below:
Image courtesy of [How to GraphQL](https://www.howtographql.com/basics/1-graphql-is-the-better-rest/)
As [How to GraphQL](https://www.howtographql.com/basics/1-graphql-is-the-better-rest/) explains, "With REST, you have to make three requests to different endpoints to fetch the required data. You’re also *overfetching* since the endpoints return additional information that’s not needed."
One solution used in Rest API is query parameters. It works, but it requires complex logic and has no flexibility. Furthermore, working in this way slows the whole process of developing other data endpoints.
**How GraphQL Works in the Same Situation**
Image courtesy of [How to GraphQL](https://www.howtographql.com/basics/1-graphql-is-the-better-rest/)
Much simpler, don't you think?
##### How it Works
The syntax is simple and easy to understand. Developers who are familiar with JSON will quickly adapt to GraphQL. Look at the image below to see what this query returns.
##### **Schema & Type System**
GraphQL's Schema Definition Language (SDL) serves as the contract between the client and the server to define how a client can access the data.
**BASIC TYPES**
String
Int
Float
ID
Boolean
**OPERATION TYPES**
**Queries:** are data requests to the server based on your needs.
**Mutations:** are used to insert, update, or delete data.
** Subscriptions:** push data from the server to the clients who chose to listen to real-time messages from the server.
**RESOLVERS**
> Resolvers provide the instructions for turning a GraphQL operation into data. Resolvers are organized into a one to one mapping to the fields in a GraphQL schema. - [Apollo Docs](https://www.apollographql.com/docs/apollo-server/essentials/data/)
##### **GraphQL Best Practices**
The following recommendations are brief paraphrases of the best practices listed on [the GraphQL website](https://graphql.org/learn/best-practices/).
### HTTP
Avoid creating a suite of URLs. GraphQL supports this, but having a suite of URLs makes it harder to access GraphQL tools like the IDE, and you will also have other endpoints, which goes against the main idea behind GraphQL.
### JSON (with GZIP)
In a production GraphQL service, it's recommended that GZIP compression is enabled. So in client requests, we can set in the header:
```
Accept-Encoding: gzip
```
### Versioning
As with any other API, you can start versioning your GraphQL Project, but usually you have to do this when you have limited control over the data that is returned or when you have new features.
GraphQL only returns what is explicitly requested, so new capabilities can be added via new types and new fields on those types without introducing a big change in the code.
### Nullability
By default, all types in GraphQL are nullable and can go awry in a networked service backed by databases and other services.
### Pagination
The GraphQL type system allows for some fields to return [lists of values](https://graphql.org/learn/schema/#lists-and-non-null) but leaves the pagination of longer lists of values up to the API designer.
Ultimately, designing APIs with feature-rich pagination led to a best practice pattern called "Connections."
### Server-Side Batching & Caching
A naive GraphQL service can be very "chatty" or repeatedly load data from your databases. A good way to handle that is to collect multiple requests and later dispatch them in a single request.
A good tool is [Facebook DataLoader.](https://github.com/graphql/dataloader)
##### Some Front-End Clients to Make Your Life Easier
1. Relay
2. Apollo Client
### ** Some advantages: **
Data fetching
Caching logic
Easier pagination
##### GraphQL Examples for Two Different Scenarios
Below, I will give two very brief examples of GraphQL implementations, one for the flow and the other for the source code.
**CONSUMING AND PROVIDING DATA WITH APOLLO/GRAPHQL IN AN ORACLE DATABASE**
**Back-End Provider**
First, you need to define your endpoint:
```
const schema = graphqlTools.makeExecutableSchema({typeDefs, resolvers}); graphqlAC.use('/graphql', graphql({ graphiql: true, schema }));
```
Second, define your types:
```
const typeDefs = ` type Post { identifier: Int!, title: String! },`}
```
Then, define resolvers and operations:
```
const resolvers = { Query: { posts(root, args, context, info) { return getAllPosts(); }, }, };
```
Finally, define your business logic implementation method to get data from the Oracle database.
```
async function getAllPosts() { let sql = 'select * from posts'; const result = await database.simpleExecute(sql); let allPosts = []; for (let r of result.rows){ const newTitle = {"identifier": r.IDENTIFIER, "title": r.TITLE}; allPosts.push(newTitle); } return allPosts; }
```
**Front-End Consumer**
In your React application, you must connect your app component, wrapping it with the ApolloProvider tag:
```
const client = new ApolloClient({ uri: 'http://localhost:5000/graphql' });
```
Then consume data from the GraphQL API with Apollo from a functional component:
```
const GET_MOTIVO = gql`{ posts { identifier title }}`const Apollo = () => ( {({ loading, error, data }) => { if (loading) return
Loading...
; if (error) return
Error :(
; return data.motivos.map(({ identifier , title }) => (