DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Pedram marandi
Pedram marandi

Posted on

Some Libraries to empower your Graphql stack

enter image description here

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".

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 (Client & Server)
  2. Graph.Cool (Only server side)
  3. Prisma (A Graphql ORM for the server side)
  4. Facebook 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
  2. 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

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.

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await