Forem: Ahmed Elbilal

GraphQL VS API Graph with 2 same examples

Ahmed Elbilal — Tue, 04 Apr 2023 08:41:18 +0000

GraphQL is all about asking the API for what exactly I need rather than it gives me the whole data, but introduced new concepts like resolvers and mutations and changes the whole way you use to write your APIs.

api-graph is also all about asking the API for what exactly I require rather than it gives me the complete data, but without changing anything that you use to write.

We will go throughout to two examples that do the same thing, the first one uses GraphQL and the second uses api-graph.

It's a simple example that don't use any database, all the data are stored in memory. The two examples have an array of warriors data that includes id and name then we will try to extract one of those two fields but the two libraries GraphQL and api-graph.

GraphQL example

this example is from digitalocean

import express from "express";
import cors from "cors";
import { graphqlHTTP } from "express-graphql";
import { makeExecutableSchema } from "@graphql-tools/schema";

const app = express();
const port = 4000;

// In-memory data store
const data = {
  warriors: [
    { id: "001", name: "Ahmed" },
    { id: "002", name: "Abdalla" },
  ],
};

// Schema
const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`;

// Resolver for warriors
const resolvers = {
  Query: {
    warriors: (obj, args, context) => context.warriors,
  },
};

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Entrypoint
app.use(
  "/graphql",
  graphqlHTTP({
    schema: executableSchema,
    context: data,
    graphiql: true,
  })
);

app.listen(port, () => {
  console.log(`Running a server at http://localhost:${port}`);
});

api-graph example

import express from "express";
import cors from "cors";
import apiGraph from "api-graph";

const app = express();
const port = 4000;

// In-memory data store
const data = {
  warriors: [
    { id: "001", name: "Jaime" },
    { id: "002", name: "Jorah" },
  ],
};

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(apiGraph({ extract: "query" }));
app.post("/api-graph", (req, res) => res.json(data));
app.listen(port, () => {
  console.log(`Running a server at http://localhost:${port}`);
});

Differences

api-graph saves the way you use to write apis and GraphQL uses resolvers, mutations and changes every thing.
The memory cost of import in GraphQL is height, while in api it's low.

GraphQL More writing while api-graph less writing
GraphQL { warriors { id } } api-graph { warriors : [ { id } ] } GraphQL use graph query language, but api-graph uses string JSON without values.
GraphQL has a playground that you can send request from it in the development process, which means it has documents for API, api-graph don't have.

Graph query your data in REST API without GraphQL

Ahmed Elbilal — Sun, 02 Apr 2023 10:07:37 +0000

API-Graph

Specify exactly what you want from the API.

Why

Use graph queries in your rest API without the need for graphQl and without editing any parts of your logic in the endpoints code, it just works, but adding one middleware in your app.

Installation

npm install api-graph

Usage

To use this package, you will need to import it and use it as middleware in your express application. Here is an example of how to use it:

import apiGraph from "api-graph";
import express from "express";

const user = {
  id: 1,
  name: "ahmed",
  age: 23,
  photos: [
    { id: 1, path: "img1" },
    { id: 2, path: "img2" },
  ],
};

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(apiGraph({ extract: "graph" }));
app.get("/", (req, res) => res.json(user));
app.listen(3000, () => console.log("server running at 3000"));

Then you pass what fields you want to return in body fields when you request the endpoint

body : { graph : "{id, name}" }

and that's it, only the name and id will be returned from the endpoint

Postman

An image that showing sending a request from postman

How it works
The imported middleware apiGraph which is the main function that must add to the app, it takes one parameter the extract which is the key that the server will look at when trying to get the query send from the client, and the default value for it is graphQuery. The server then gets the values from the key to parse it and extract data from the object that was passed to res.json function, in case no query was sent from the client then the whole data will be returned.

Errors

property not found in case you were trying to ask for fields in the data that are not exits.
Parsing error in case you send an invalid query.

Links

Feel free to take look at api-graph sites in GitHub and in NPM

Building “.ignore” mechanism with 30 lines of code

Ahmed Elbilal — Sun, 27 Nov 2022 14:51:16 +0000

Recently we have seen .Ignore files a lot in many places, GitHub has .gitignore to ignore file that will not be committed also prettier .prettierignore to ignore files that will not be formatted and more others. So how can I build such a mechanism ?

How it will work ?

We will load the file and change all of it's content to regex so that we can make the comparing functionality more efficient.

fs module

We will be using fs module which is one of NodeJS core modules, fs have promises object which contains a promise version of core fs functions like raedFile and writeFile to help us work with async/await to make the code cleaner.

Loading the file

const fs = require("fs");
const loadIgnoreFile = async (file) => {
  let loadedFile = await fs.promises.readFile(path, { encoding: "utf8" });
};

Change * to .* for pattern ignore

In .ignore files, a person could want to ignore a pattern of files, for example all *.json files, but regex could understand * with a character before because * means that the preceding character can be repeater more than one time.

  //change all * to .*
  loadedFile = loadedFile.replace(/\*/g, ".*");

File content to array

  //change file to array
  loadedFile = loadedFile.split("\n");

Resolve array items to paths

For example, if a person wanted to ignore dist folder he could enter dist, ./dest or /dist which can make the comparison operation more difficult. So we change what ever he entered to a full file path, so the three options of dist folder will be for example /home/user/project/dist.

  //resolve all files
  loadedFile = loadedFile.map((item) => join(resolve("."), item));

Change paths to groups of regex

A group in regex in something between two () for example (ABC) is a group. And then separate each group from other by or operator | and then to make the regex only restricted to that path we will add ^ $ to each regex path. So in our work if we have two paths, let us say /home/user/project/dist and /home/user/project/node_mdules they are at the end after converting them to regex will be (^/home/user/project/dist&)|(^/home/user/project/node_mdules$)

  //add (^filename$) to all content
  loadedFile = "(^" + loadedFile.join("$)|(^") + "$)";

Returning the result in RegExp object

  //change loaded file content to regex
  return new RegExp(loadedFile);

We could also add some checks to see if the file exits and return a default regex if not before we go to all these steps.

Final code

const fs = require("fs");
const { resolve, join } = require("path");

//load ignore file
const loadIgnoreFile = async (  const path = ".ignore") => {
  const dfReg = "(.git$)|(node_modules$)";

  //check if .ignore exits
  const ptIgnoreExits = fs.existsSync(path);
  if (!ptIgnoreExits) return new RegExp(dfReg);

  //load .ignore
  let loadedFile = await fs.promises.readFile(path, { encoding: "utf8" });

  // add .git and node_modules to loaded file
  loadedFile += "\n.git\nnode_modules";

  //change all * to .*
  loadedFile = loadedFile.replace(/\*/g, ".*");

  //change .ignore to array
  loadedFile = loadedFile.split("\n");

  //resolve all files
  loadedFile = loadedFile.map((item) => join(resolve("."), item));

  //add (^filename$) to all content
  loadedFile = "(^" + loadedFile.join("$)|(^") + "$)";

  //change loaded file content to regex
  return new RegExp(loadedFile);
};

module.exports = loadIgnoreFile;

Test it

This is a simple test and will not contain any test runners or any frameworks like jest or others

Create a file say .ignore and add to it some dummy names say dist1 and dist2 and put the .ignore along with this code in the same folder. Create a new file called ignore.test.js and import the loadIgnore function and run a function in loadIgnore called test since loadIgnore is actually a regex object as we see above, the test function will return a boolean value.

const loadIgnore = require('./loadIgnore.js');
const filePath = join(resolve("."), "dist1"))
console.log(loadIgnore.test(filePath));

Automate project tree with protree

Ahmed Elbilal — Sat, 19 Nov 2022 11:11:51 +0000

Intro
Some projects use a tree structure in their README file as some form of good documentation, which may look something like this

.
├── file1
├── file2
└── dir1
│   └── file3
└── dir2
    └── file4

The Issue
The documentation may be forgotten by some developers, and if they remember, it may be a noisy process to move through the new files and then to align those tree characters └── ├── correctly.

Protree Automation
protree is a CLI tool build with JS to help in building the project tree structure. Protree can create a tree for your project and add it to your markdown with the code block format. Once you add new files to your project, all you have to do is run protree, and all changes will be handled automatically.

Usage

I will assume that you have a project with come folders in it.

1- First install protree

npm i protree

2- Command form

protree path out

3- Add script to your package.json file

{
...
"protree" : "protree . README.md"
...
}

4- Add a protree comment in your README.md file in the place you want the tree to be in

<!-- protree -->

5- Run command

npm run protree

Ingoring files
By default, protree ignores the .git and node_modules directories.
It is possible to exclude more files from being included in the tree structure by creating a .ptignore file and adding all the ignored files to it.
The .ptignore file works similarly to the .gitignore file. You can ignore files or patterns of files, for example, *.json files.

Feel free to read more about protree.