DEV Community

Cover image for GraphQL VS API Graph with 2 same examples
Ahmed Elbilal
Ahmed Elbilal

Posted on

1 1 1 1 1

GraphQL VS API Graph with 2 same examples

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}`);
});
Enter fullscreen mode Exit fullscreen mode

GraphQL

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}`);
});

Enter fullscreen mode Exit fullscreen mode

API Graph

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 cost of import

api-graph cost of import

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

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry đź•’

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay