Some Libraries to empower your Graphql stack
Tags: graphql, javascript, apollo, tutorial
Published: 2018-09-29 02:06:07


---
title: Some Libraries to empower your Graphql stack
published: true
description: List of libraries making your Graphql stack much more beneficial
tags: Graphql, js, javascript, Apollo, tutorial
---

![enter image description here](https://thepracticaldev.s3.amazonaws.com/i/be1cy1wdqw2ait8hapg2.png)

Hi DEV Community 👩‍💻👨‍💻,

It's been a couple of months since I worked with Graphql for the first time. Without any doubt, I can say it's significantly improved my code quality. If you eager to adopt this stack, I suggest you to have a look at this article about how Graphql advantages and disadvantages "[Why GraphQL: Advantages, Disadvantages & Alternatives](https://www.robinwieruch.de/why-graphql-advantages-disadvantages-alternatives/)".

I'm going to write about a set of tools I'm currently using with my Graphql which may help you to get the most out of a Graphql stack. 


### Graphql clients
A good Graphql client can highly improve both front-end and back-end code. They are providing different solutions to cover wide areas in your application like the authentication, caching, fetching data, handling errors and queries. These clients are growing fast and they're gathering a really cool community of developers and I think there is much more potential for them. 


I suggest Apollo, but the followings clients are so cool:

 1. [Apollo](https://www.apollographql.com/) (Client & Server)
 2. [Graph.Cool](https://graph.cool) (Only server side)
 3. [Prisma](https://www.prisma.io/) (A Graphql ORM for the server side)
 4. [Facebook Relay](https://facebook.github.io/relay)  (Front-end)

### Reuse Graphql files
Instead of putting everything in JS files, It's not a bad idea to keep non-JS code out of your Javascript files. To keep Graphql syntaxbeutiful out of our  JS, and also reusing it, we can create .graphql files then with a Webpack loader we can simply import .graphql files. 

`import { fetchActiveUsers } from './users.graphql';` 

### Graphql playgrounds

Graphql has amazing playgrounds which let you to query your API and fetch results. Exactly like what Postman does for normal API calls. Here is a list of playgrounds I have used:
1. [Prisma Playground](https://github.com/prisma/graphql-playground)
2. [Graphiql](https://github.com/graphql/graphiql)

### Query Batching & Caching
With Graphql you will get to a point where duplicate queries are being sent to a database and you will need a way to get around this problem. It usually happens when there is hierarchy structure in your data, like an array of posts and authors. For instance, you have 30 posts which are written by 2 authors. A normal Graphql resolver, will query these authors for each post separately. Facebook Dataloader will help you to get around this problem. It will cache data only in a single request so all other parts of the application will pull it from DataLoader cache instead of querying your database. 

>  DataLoader is a generic utility to be used as part of your
> application's data fetching layer to provide a simplified and
> consistent API over various remote data sources such as databases or
> web services via batching and caching.

 [Facebook DataLoader](https://github.com/facebook/dataloader)
 
*Note: DataLoader is not only for Graphql and it's applicable to any other kind of datastores and languages.* 

I can mention more libraries here, but these are the ones which I found essential to have a propper Graphql environment. Let me know if any other libaries appreared helpful in your projects.