Forem: Shadid Haque

[Boost]

Shadid Haque — Thu, 03 Apr 2025 23:27:51 +0000

Shadid Haque

Apr 3 '25

How to build MCP servers with TypeScript SDK

#ai #llm #node #programming

Comments 1

8 min read

How to build MCP servers with TypeScript SDK

Shadid Haque — Thu, 03 Apr 2025 20:48:36 +0000

This blog post demonstrates how to get started building your own MCP (Model Context Protocol) servers. There are a lot of resources in the internet that attempts to explain this topic. Although these resources are great, I couldn’t find a comprehensive guide and decided to piece together this blog post. This guide consolidates key information into a clear, step-by-step walkthrough for developers ready to build their own MCP servers.

MCP in Layman's term

Model Context Protocol (MCP) is an open standard that connects LLMs like Claude to your data sources. It enables LLMs to:

Analyze local files (such as logs, pdfs, CSVs in your file system)
Access and query databases
Retrieve documents from Google Drive
Browse the internet

In essence, MCP servers act as bridges that give LLMs controlled access to specific data sources or enable them to perform specialized tasks.

You first MCP server

Let’s create a new project. Create a new folder and change directory into it.

mkdir my-mcp-server
cd my-mcp-server

Next, initialize a new project

npm init -y

Install, necessary dependencies

npm install @modelcontextprotocol/sdk zod
npm install -D @types/node typescript

Create a src directory and a src/index.ts file

mkdir src
touch src/index.ts

Open up the package.json file and add the following lines to it

{
    // ... rest of the code
  "type": "module",
  "bin": {
    "weather": "./build/index.js"
  },
  "scripts": {
    "build": "tsc && chmod 755 build/index.js"
  },
  "files": [
    "build"
  ],

}

We will also create a tsconfig.json file in the root of our project.

// tsconfig.json

{
    "compilerOptions": {
      "target": "ES2022",
      "module": "Node16",
      "moduleResolution": "Node16",
      "outDir": "./build",
      "rootDir": "./src",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

Next, let’s update the index.ts file. Add the following code to index.ts file

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { 
  StdioServerTransport 
} from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const server = new Server({
    name: "my-mcp-server",
    version: "1.0.0"
  }, {
    capabilities: {
      resources: {},
      tools: {},
    }
});

The code above is initializing a new MCP server. It imports Server and StdioServerTransport from MCP SDK. The Server class is used to initialize a new server instance. The StdioServerTransport allows the server to communicate through standard input/output (stdin/stdout).

Provide custom data to LLM using Resources

Resources are a core primitive. It is used to provide data as context to the LLM. The data can be any of the following format

File content (txt, pdf, csv, images)
Database records
Live system data
Logs and more

Back in your index.ts file add the following code:

// List available resources
server.setRequestHandler(ListResourcesRequestSchema, async () => {
    return {
      resources: [
        {
          uri: "file:///Users/Documents/my-mcp-server/logs.txt",
          name: "Application Logs",
          mimeType: "text/plain"
        }
      ]
    };
});

// Read resource contents
server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
    const uri = request.params.uri;
    if (uri === "file:///Users/Documents/my-mcp-server/logs.txt") {
        const logContents = await readLogFile();
        return {
        contents: [
            {
                uri,
                mimeType: "text/plain",
                text: logContents
            }
        ]
        };
    }
    throw new Error("Resource not found");
});

In the code above we have two handlers.

The ListResourcesRequestSchema handler returns a list of resources that clients can access. In this case, it exposes just one resource - an application log file located at the absolute path defined
The ReadResourceRequestSchema handler is responsible for actually retrieving the content of a requested resource.

Finally add the following code in the index.ts file:

// ... rest of the code
async function readLogFile() {
    try {
        // Get the absolute path to the log file
        // Note: You might need to adjust this path based on your system
        const logPath = 
          path.resolve('file:///Users/Documents/my-mcp-server/logs.txt');

        // Read the file
        const data = await fs.readFile(logPath, 'utf8');
        return data;
    } catch (error) {
        console.error('Error reading log file:', error);
        return "Error reading log file: " + 
          (error instanceof Error ? error.message : String(error));
    }
}

// Start the server with stdio transport
async function main() {
    try {
        const transport = new StdioServerTransport();
        await server.connect(transport);
        console.error("Server started and listening on stdio");
    } catch (error) {
        console.error("Failed to start server:", error);
        process.exit(1);
    }
}

main();

The readLogFile helper function handles the file reading operations. The main function initializes a StdioServerTransport instance which enables communication over standard input/output. Finally it connects the previously defined server with the transport.

Next, run the build script:

npm run build

Copy the absolute path of the generated build/index.js file. You will need to add this to Claude desktop client config.

Configuring Claude desktop client

The easiest way to test your MCP servers in to use Claude desktop client. Open the settings of your Claude desktop client and navigate to Developer > Edit Config.

Open the claude_desktop_config.json file and add the following JSON object.

{
  "mcpServers": {
        "my-mcp-server": {
            "command": "node",
            "args": [
                "/Users/Documents/my-mcp-server/build/index.js"
            ]
        }
  }
}

Make sure to replace /Users/Documents/my-mcp-server/build/index.js with the absolute path of your index.js file path you copied earlier.

Open your Claude desktop app and you should see a new plug icon for the MCP.

Click on the button and you should be able to use the MCP server resources in your next chat.

You can now interact with your data using the LLM.

Debugging MCP servers

We can use the @modelcontextprotocol/inspector package to visually inspect and debug MCP server functionality.

Run the following command to get the inspector running

npx @modelcontextprotocol/inspector node /your-build-path/index.js

Learn more about the inspector here.

Execute functions using MCP Tools

Tools gives LLM the ability to perform actions. For instance

LLM can execute an API call gather required data to answer questions.
Using tools you can give LLMs can browse the internet
You can make LLMs write and execute queries in your database using tools

Let’s create a new MCP server that can gather data from the CocktailDB API and gives us drinks recipes.

Create a new folder and setup a new TypeScript project following the previous steps. Next, add the following code to your index.ts file

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { 
  StdioServerTransport 
} from "@modelcontextprotocol/sdk/server/stdio.js";
import {
  CallToolRequestSchema,
  ListToolsRequestSchema
} from "@modelcontextprotocol/sdk/types.js";
import z from "zod";

// Create the server
const server = new Server({
  name: "cocktail-api-server",
  version: "1.0.0"
}, {
  capabilities: {
    tools: {}
  }
});

// Define tool schema using zod
const getCocktailSchema = z.object({
  name: z.string().describe("Cocktail name to search for")
});

// Register tools
server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: "get_cocktail",
        description: "Search for cocktail recipes by name",
        inputSchema: {
          type: "object",
          properties: {
            name: {
              type: "string",
              description: "Cocktail name to search for"
            }
          },
          required: ["name"]
        }
      }
    ]
  };
});

In the code above we are registering a new tool for the server. You have to define the Tools using a valid JSON structure. You can learn more about this JSON structure in the official documentation page.

Next, create a function for handling the tools function. Add the following code:

// Implement the tool handler
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "get_cocktail") {
    try {
      // Parse and validate arguments using zod
      const args = getCocktailSchema.parse(request.params.arguments);

      // Make the API call to CocktailDB
      const url = `
       https://www.thecocktaildb.com/api/json/v1/1/search.php?
       s=${encodeURIComponent(args.name)}
      `;
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error(`CocktailDB API error: ${response.statusText}`);
      }

      const data = await response.json();

      // Check if any drinks were found
      if (!data.drinks) {
        return {
          content: [
            {
              type: "text",
              text: `
               No cocktails found matching "${args.name}". 
               Try a different search term.
              `
            }
          ]
        };
      }

      // Format each cocktail recipe
      const cocktailRecipes = data.drinks.map(formatCocktail);

      // Create the formatted response
      const result = `
        Found ${data.drinks.length} cocktail(s) matching 
        "${args.name}":\n\n${cocktailRecipes.join('\n\n')}
      `;

      return {
        content: [
          {
            type: "text",
            text: result
          }
        ]
      };
    } catch (error) {
      console.error("Error in get_cocktail tool:", error);

      return {
        isError: true,
        content: [
          {
            type: "text",
            text: `Error searching for cocktail: 
${error instanceof Error ? error.message : 'Unknown error'}`
          }
        ]
      };
    }
  }

  // Handle unknown tool
  return {
    isError: true,
    content: [
      {
        type: "text",
        text: `Unknown tool: ${request.params.name}`
      }
    ]
  };
});

The above code:

Validates incoming search parameters
Queries TheCocktailDB's API for cocktails matching the provided name
Returns formatted results if found, or a helpful message if none exist
Handles errors appropriately throughout the process
Rejects requests for unknown tools

This response is then send to the LLM. The LLM then creates an answer based on this context.

Let’s also add a helper function to format the response from the API.

// ... rest of the code
function formatCocktail(drink: any) {
  // Create an array of ingredients paired with measurements
  const ingredients = [];
  for (let i = 1; i <= 15; i++) {
    const ingredient = drink[`strIngredient${i}`];
    const measure = drink[`strMeasure${i}`];

    if (ingredient) {
      ingredients.push(`${measure ? measure.trim() : ''} ${ingredient}`);
    }
  }

  return `
🍸 ${drink.strDrink} 🍸
-----------------
Category: ${drink.strCategory}
Glass: ${drink.strGlass}
Alcoholic: ${drink.strAlcoholic}

Ingredients:
${ingredients.map(i => `• ${i.trim()}`).join('\n')}

Instructions:
${drink.strInstructions}
  `.trim();
}

Your complete code in index.ts should look as follows:

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { 
  StdioServerTransport 
} from "@modelcontextprotocol/sdk/server/stdio.js";
import {
  CallToolRequestSchema,
  ListToolsRequestSchema
} from "@modelcontextprotocol/sdk/types.js";
import z from "zod";

// Create the server
const server = new Server({
  name: "cocktail-api-server",
  version: "1.0.0"
}, {
  capabilities: {
    tools: {}
  }
});

// Define tool schema using zod
const getCocktailSchema = z.object({
  name: z.string().describe("Cocktail name to search for")
});

// Register tools
server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: "get_cocktail",
        description: "Search for cocktail recipes by name",
        inputSchema: {
          type: "object",
          properties: {
            name: {
              type: "string",
              description: "Cocktail name to search for"
            }
          },
          required: ["name"]
        }
      }
    ]
  };
});

// Helper function to format a cocktail recipe nicely
function formatCocktail(drink: any) {
  // Create an array of ingredients paired with measurements
  const ingredients = [];
  for (let i = 1; i <= 15; i++) {
    const ingredient = drink[`strIngredient${i}`];
    const measure = drink[`strMeasure${i}`];

    if (ingredient) {
      ingredients.push(`${measure ? measure.trim() : ''} ${ingredient}`);
    }
  }

  return `
🍸 ${drink.strDrink} 🍸
-----------------
Category: ${drink.strCategory}
Glass: ${drink.strGlass}
Alcoholic: ${drink.strAlcoholic}

Ingredients:
${ingredients.map(i => `• ${i.trim()}`).join('\n')}

Instructions:
${drink.strInstructions}
  `.trim();
}

// Implement the tool handler
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "get_cocktail") {
    try {
      // Parse and validate arguments using zod
      const args = getCocktailSchema.parse(request.params.arguments);

      // Make the API call to CocktailDB
      const url = `
       https://www.thecocktaildb.com/api/json/v1/1/search.php?
       s=${encodeURIComponent(args.name)}
      `;
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error(`CocktailDB API error: ${response.statusText}`);
      }

      const data = await response.json();

      // Check if any drinks were found
      if (!data.drinks) {
        return {
          content: [
            {
              type: "text",
              text: `No cocktails found matching "${args.name}". Try a different search term.`
            }
          ]
        };
      }

      // Format each cocktail recipe
      const cocktailRecipes = data.drinks.map(formatCocktail);

      // Create the formatted response
      const result = `
        Found ${data.drinks.length} cocktail(s) matching 
        "${args.name}":\n\n${cocktailRecipes.join('\n\n')}
      `;

      return {
        content: [
          {
            type: "text",
            text: result
          }
        ]
      };
    } catch (error) {
      console.error("Error in get_cocktail tool:", error);

      return {
        isError: true,
        content: [
          {
            type: "text",
            text: `Error searching for cocktail: ${error instanceof Error ? error.message : 'Unknown error'}`
          }
        ]
      };
    }
  }

  // Handle unknown tool
  return {
    isError: true,
    content: [
      {
        type: "text",
        text: `Unknown tool: ${request.params.name}`
      }
    ]
  };
});

// Connect the transport
async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("Cocktail API server running on stdio");
}

main().catch(err => {
  console.error("Fatal error:", err);
  process.exit(1);
});

Build the code with following command:

npm run build

Copy the absolute path of your dist/index.js file. Update your claude_desktop_config.json file to include the new MCP server.

{
    "cocktail-api-server": {
        "command": "node",
        "args": [
            "absolute-path/build/index.js"
        ]
    }
}

Restart your Claude desktop and you will be able to ask questions about cocktail recipes and Claude will use the data pulled from CocktailDB API as context.

Prompt template

MCP servers also gives you the ability to store reusable prompts. This is a straight forward implementation. You can learn more about this in the documentation.

And that’s a wrap for this short tutorial. If you think this blog post was helpful then give me a follow on LinkedIn and X.

Where to go from here?

Checkout the official documentation site for MCPs. If you want to see some hands on examples checkout the Awesome MCP GitHub repository.

What is a Bloom Filter and What are they used for?

Shadid Haque — Wed, 02 Oct 2024 13:40:21 +0000

What is a Bloom Filter?

A Bloom filter is like a "quick check" tool that helps you know if something might be in a list, without needing to store the whole list. It's really fast and uses very little space, but sometimes it might say something is in the list when it's actually not. However, if it says something is not in the list, you can be 100% sure it's not.

A Bloom filter is a space-efficient probabilistic data structure used to test whether an element is a member of a set. It is very fast and consumes minimal memory, making it ideal for applications where quick membership checks are needed. However, it comes with a trade-off: false positives are possible, but false negatives are not.

How does it work?

To build a bloom filter we need an array of bits and a couple fast hash functions.

Say we have an empty Bloom filter with 10 bits: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0].
Suppose we want to insert the element "apple", and we have 3 hash functions that hash "apple" to positions 1, 4, and 7 in the array.
We set those bits to 1: [0, 1, 0, 1, 0, 0, 1, 0, 0, 0].
Now, if we check for "apple", we hash it again and check bits 1, 4, and 7. Since they are all 1, the Bloom filter says "apple" is probably in the set.
If we query for "orange", and any of the corresponding bits (based on its hash) are 0, we know it's definitely not in the set.

Use cases of Bloom Filters?

*In Content Delivery Networks (CDNs): *

Bloom filters are widely used in Content Delivery Networks (CDNs) to optimize efficiency, especially when handling large amounts of data. Their primary role in a CDN is to help in quickly determining whether a content or a resource is cached at a particular edge server or not, without requiring an exhaustive search.

The Bloom filter is used to quickly check if a particular object (e.g., a web page, video segment) is possibly cached. If the filter returns a negative response, it means the object is definitely not in the cache.

Akamai Technologies, a leading content delivery network (CDN) provider, uses Bloom filters in an innovative way to optimize their cache performance.

Cache Filtering in Databases: Databases may use Bloom filters to reduce cache lookup times by ensuring that only relevant data is fetched into the cache. If the Bloom filter indicates that a key is not present, it avoids unnecessary cache queries.

Key reasons Bloom filters are used:

Speed: Queries (to check for membership) are performed in constant time, O(k), where k is the number of hash functions used. This makes it very fast for applications where quick lookups are essential. Bloom filters are in memory lookup. When you use Redis for cache you are still using an external service that adds latency. Fun fact Redis (the database) internally uses bloom filters.

Space Efficiency: Bloom filters are highly space-efficient compared to other data structures like hash tables or arrays when it comes to storing large sets. They use a bit array and several hash functions to achieve this, which results in significant memory savings, especially when the set of possible elements is large.

Avoiding Expensive Lookups: In scenarios where querying an actual database or collection is costly (in terms of time or computation), a Bloom filter can be used as a preliminary step. If the filter says the item is not present, no further lookup is needed.

JavaScript implementation of a Bloom Filter

The following code implements a simple bloom filter in javascript.

class BloomFilter {
    constructor(size = 100) {
        this.size = size;
        this.bitArray = new Array(size).fill(0);
    }

    // Simple hash functions (these are not cryptographic hash functions)
    hash1(value) {
        let hash = 0;
        for (let i = 0; i < value.length; i++) {
            hash = (hash + value.charCodeAt(i) * i) % this.size;
        }
        return hash;
    }

    hash2(value) {
        let hash = 0;
        for (let i = 0; i < value.length; i++) {
            hash = (hash + value.charCodeAt(i) * (i + 1)) % this.size;
        }
        return hash;
    }

    // Insert element into Bloom Filter
    add(value) {
        const hash1 = this.hash1(value);
        const hash2 = this.hash2(value);

        this.bitArray[hash1] = 1;
        this.bitArray[hash2] = 1;
    }

    // Check if an element might be in the set
    contains(value) {
        const hash1 = this.hash1(value);
        const hash2 = this.hash2(value);

        return this.bitArray[hash1] === 1 && this.bitArray[hash2] === 1;
    }
}

// Example usage
const bloom = new BloomFilter(50); // Bloom filter with a bit array of size 50

bloom.add("apple");
bloom.add("banana");

console.log(bloom.contains("apple")); // true (or possibly true)
console.log(bloom.contains("banana")); // true (or possibly true)
console.log(bloom.contains("grape")); // false (definitely not in the set)

Demystifying the `this` keyword in JavaScript

Shadid Haque — Sun, 07 Jul 2024 21:29:01 +0000

There is a lot of confusion around the this keyword in JavaScript. The way this is described in the official MDN web docs is not very intuitive. If you feel similarly, let's learn about this keyword using some practical examples.

What is `this` ?

The this keyword refers to the context where a piece of code should run. If we console log the following in our browser what do we get?

console.log(this)

The result of running the above code is the entire browser Window object. If you run it in Node instead, you get the global object. Therefore, this represents the context of where the code is defined.

Let's take a look at an example. Below we have an object called student and inside the object we will define a function called testFunction.

const student = {
  name: "Jon",
  phone: 415887231,

  testFunction: function () {
    console.log(this);
  },
};
student.testFunction();

Output:


{
    name: "Jon"
    phone: 415887231
    testFunction: ƒ testFunction()
}

We are console logging this from inside the testFunction. Since testFunction is defined inside the student object we get the entire student object as an output. The student object is the context where the function is defined.

`this` and the `strict` mode in Node

When you are using the strict mode in Node the behaviour of this is different. The following example demonstrates the behaviour.

'use strict';

// Top level
console.log(this);  // {}

function strictFunction() {
    console.log(this);  // undefined
}

strictFunction();

In the top level in a module this is still the global object. However, inside a function this is now undefined.

Why would this be useful? There are many use cases of the strict mode. The following are some of them.

Avoiding accidental Globals:

'use strict';
x = 10; // ReferenceError: x is not defined

Assigning a value to an undeclared variable creates a global variable. Strict mode prevents this.

Duplicates in object literals:

'use strict';

var obj = {
    prop: 1,
    prop: 2 // SyntaxError: Duplicate data property in object literal
};

Strict mode throws an error for duplicate property names in object literals.

Catch silent errors:

In non-strict mode, assigning a value to a non-writable property does nothing silently. In strict mode, it throws an error.

// non strict mode
var obj = {};
Object.defineProperty(obj, 'x', { value: 42, writable: false });

obj.x = 9; // Fails silently, obj.x remains 42
console.log(obj.x); // 42

'use strict';

var obj = {};
Object.defineProperty(obj, 'x', { value: 42, writable: false });

obj.x = 9; // TypeError: Cannot assign to read only property 'x' of object '#<Object>'

How does `this` behave inside regular functions and arrow functions?

Understanding how this behaves in different scenarios is important for writing clean and predictable JavaScript code, especially when dealing with object methods and callbacks.

The following example shows the behaviour of this in a regular callback function that is defined inside a function.

const student = {
  name: "Jon Doe",
  printAllCourses: function () {
    const subjects = ["cs-101", "cs-202", "econ-101"];
    subjects.forEach(function (sub) {
      console.log(sub);
      console.log("Student Name", this.name);
    });
  },
};

student.printAllCourses();

// outputs

/**
cs-101
Student Name undefined
cs-202
Student Name undefined
econ-101
Student Name undefined
**/

Notice the callback function for forEach is trying to access the name property but is returning undefined.

Now turn the callback function into an arrow function and run the code again.

const student = {
  name: "Jon Doe",
  printAllCourses: function () {
    const subjects = ["cs-101", "cs-202", "econ-101"];
    subjects.forEach((sub) => {
      console.log(sub);
      console.log("Student Name", this.name);
    });
  },
};

student.printAllCourses();

// outputs

/**
cs-101
Student Name Jon Doe
cs-202
Student Name Jon Doe
econ-101
Student Name Jon Doe
**/

Notice that this time it is able to access the name property as expected.

What’s actually happening here?

this inside a regular function depends on how the function is called. When a regular function is used as a callback, only then this refers to the global object (window in browsers), which is the case in the above example. Alternatively, if the function is not called as a callback function it can access the parent objects' properties using this. So, basically, a callback function is always treated as a function that is defined in the global context.

Arrow functions, on the other hand, do not have their own this context. Instead, they lexically inherit this from the surrounding code. This simply means that the arrow function has access to the properties of the object it is defined in. So this inside an arrow function is the same as this outside the arrow function.

const student = {
  name: "Jon Doe",
  printAllCourses: function () {
    const subjects = ["cs-101", "cs-202", "econ-101"];
    console.log("outside arrow func", this); // this here is the same this inside the callback arrow function below
    subjects.forEach((sub) => {
      console.log("inside arrow func", this); // same this as above
    });
  },
};
student.printAllCourses();

Hey if you are enjoying this post and want to see more like it don't forget to give me a follow on dev.to, X or LinkedIn

How does `this` work in es6 class context?

In ES6 classes, this keyword is more predictable and consistent compared to traditional JavaScript functions. When using this inside methods of a class, it generally refers to the instance of the class on which the method was called.

Consider a simple ES6 class:

class Person {
  constructor(name) {
    this.name = name;
  }

  printName() {
    console.log(this.name);
  }
}

const person = new Person('Alice');
person.printName(); // Outputs: Alice

In the example this inside the constructor method refers to the new instance of the class being created.

this inside the printName method refers to the instance of the Person class on which the printName method was called.

Now let’s take a look at an example that shows potential issues when using class methods as callbacks and how to address them:

class Person {
  constructor(name) {
    this.name = name;
  }

  printName() {
    console.log(this.name);
  }

  printNameDelayed() {
    setTimeout(function() {
      console.log(this.name);
    }, 1000);
  }

  printNameDelayedWithArrow() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }

  printNameDelayedWithBind() {
    setTimeout(function() {
      console.log(this.name);
    }.bind(this), 1000);
  }
}

const person = new Person('Bob');
person.printName(); // Outputs: Bob
person.printNameDelayed(); // Outputs: undefined (or error in strict mode)
person.printNameDelayedWithArrow(); // Outputs: Bob
person.printNameDelayedWithBind(); // Outputs: Bob

Notice, in printNameDelayed method the callback function passed to setTimeout is a regular function, so this inside it does not refer to the instance of Person. Instead, it refers to the global object (or undefined in strict mode).

Using an arrow function as the callback preserves the this context from the enclosing method, so this refers to the instance of Person. The printNameDelayedWithArrow is a possible solution to the callback problem.

Another way to solve this callback problem is through binding. In printNameDelayedWithBind we explicitly bind the callback function to this . It ensures that this inside the callback refers to the instance of Person.

Final words

I hope, this article gave you a better understanding of this.

Think of this as JavaScript's mischievous trickster—always keeping you on your toes. But now, you're in on the joke. Keep experimenting and soon this will be your trusty sidekick, not your nemesis.

So next time someone says JavaScript is confusing, just wink and say, "I know exactly who this is!" Go forth and conquer, and may the this be with you!

If you enjoyed this post give me a follow on X or LinkedIn

I created a free course on Next.js

Shadid Haque — Fri, 28 Jun 2024 20:15:55 +0000

Hey all, I recently authored a free video course on Egghead.io. You can find it here.

In this hands-on course, you'll learn how to create a real-time chat application using of Next.js 14 and Fauna streams.

Next.js has been a game-changer in the world of web development, and with version 14, it's only getting better. The introduction of the ‘app’ router, previously known as the ‘pages’ router, brings a new level of control and efficiency. But with great power comes great responsibility – you'll need to decide between server-side and client-side rendering based on your needs. Don't worry; I'll guide you through the trade-offs and help you make the best decisions for your project.

You can find the course here.

I would love it if you guys go over it and give me some feedback. Drop me a follow if you like my content. You can find me on X and Linkedin

Embarking on a Self-Taught Machine Learning Journey: From Software Engineer to ML Engineer

Shadid Haque — Wed, 19 Jun 2024 04:05:18 +0000

Hello world, I am Shadid. I have been a Software Engineer for the last 8 years. Although I was interested in Machine Learning and AI in college, I never had the opportunity or patience to pursue that passion.

Now, when the ML field grew exponentially in 2023, with the latest innovations in large language models, I have a terrible longing for the road not taken. What if I choose to study Machine learning? What if I decided to pursue my career as an ML engineer? What would have happened if I had gone to graduate school?

Being stupidly optimistic, I decided to learn about Machine learning independently.

Partly this crazy idea was also partly inspired by Scott Young’s ted talk video titled: “Can you get an MIT education for $2,000?”. Scott talks about how he finished a computer science degree just by following MIT curriculums and self studying. After. which he was also able to land a entry level position.

I Googled around for self-taught ML Engineers. I got quite a few mixed reviews from Reddit. At this point, I am not sure whether it is possible to be a self-taught ML engineer. The only way to figure it out was to try to attempt it myself. However, I am optimistic.

I plan on taking courses from open-source courses available online, such as MIT Open Courseware and Coursera. The goal is to teach myself everything I can within the next 6~8 months.

To be clear, my goal here is not to build the next groundbreaking model. I simply want to see if I can get an interview for a junior-level Machine Learning or Data Engineering job after this experiment. This is purely an experiment and I am not trying to transition into a role in ML. So, if you are interested, join me on my journey. I plan on journaling about it weekly and documenting everything that I study.

Another disclaimer: I am not starting from scratch. As I did my undergraduate degree in Computer Engineering, I understand some of the fundamentals needed to pull this off. I have solid background knowledge of single and multivariable calculus, linear algebra, and statistics, as I took these courses in school about a decade ago.

I am going to follow this learning roadmap. However, I am going to omit many of these courses. I am going to focus mainly on Machine Learning, Deep learning, and Transformer Architecture.

https://roadmap.sh/ai-data-scientist

For the first 4 weeks I am going to focus on finishing Machine Learning Specialization from Andrew Ng. The goal is to speed run through these first 3 courses and get a solid understanding of the basics.

That is all for today, see you in a week or two.

Parametric Polymorphism in TypeScript and how it can help you to write better code

Shadid Haque — Mon, 24 Apr 2023 18:41:36 +0000

Parametric Polymorphism

Polymorphism is a widely used concept in Object Oriented Programming. However, did you know there is more than one type of Polymorphism? In functional programming, there is this concept called Parametric Polymorphism. In JavaScript/TypeScript, this concept is used to write flexible, reusable, type-safe code.

function logArray<T>(arr: T[]): void {
  arr.forEach(element => console.log(element));
}

let numbers = [1, 2, 3];
logArray<number>(numbers); 
// 1
// 2
// 3

let words = ["hello", "world"];
logArray<string>(words);
// "hello"
// "world"

// union types [mixed]
let mixed = ["Some", "Mixed", 3, 5];
logArray<string | number>(mixed);
// "Some"
// "Mixed"
// 3
// 5

In this example, the logArray function is a generic function that takes an array of elements of any type T, and logs each element to the console. The type of T is specified when calling the function, using the angle brackets syntax. You can also make a type T union of multiple types.

Let me give you another example to convey the usefulness of this. Take the following code snippet, for instance. The following code ensures improved type safety in your application.

function add<T>(a: T, b: T): T {
  return a + b;
}

let sum = add<number>(2, 3);
console.log(sum); // 5

// Compile-time error: 
// Argument of type '"hello"' is not assignable to parameter of type 'number'.
sum = add<number>("hello", 3);

This forces you to catch errors in compile time and ensures predictability in your code.

Let’s take a look at a more practical application of this. Let’s say we have different types of products in an e-commerce application. Some products have discounts property; some products have international shipping etc. Now assume we want to display a slightly different view based on the product type. We can do this by creating a generic render function. The function can take in a diverse array of products, and based on type, it will render the appropriate view.The following code snippet demonstrates this.

type Product {
  name: string;
  price: number;
}

type DiscountedProduct = {
  name: string;
  price: number;
  discountAmout: number;
}

type InternationalShippingProduct = {
  name: string;
  price: number;
  limitedEdition: boolean;
}

function renderProducts<T>(arr: T[]): void {
  arr.forEach(item => {
   if(typeof item === 'object') {
     if(item.hasOwnProperty("discountAmout")) {
       // Render Product with Discount Amount
        console.log(`Discounted Product ${item.name}`)
      } else if (item.hasOwnProperty("limitedEdition")) {
       // Render International Shipping Product
        console.log(`International Shipping Product ${item.name}`)
      } else {
       // Render Normal Product
        console.log(`Product ${item.name}`)
      }
    }
  })
}

const productA: Product = {
 name: "T Shirt",
 price: 23.00
}

const productB: DiscountedProduct = {
 name: "Nike Shoe",
 price: 100.00,
 discountAmout: 10
}

const productC: InternationalShippingProduct = {
 name: "Designer Bag of some kind",
 price: 200.00,
 limitedEdition: true
}

const products = [productA, productB, productC]

renderProducts(products)interface Product {
  name: string;
  price: number;
}

type DiscountedProduct = {
  name: string;
  price: number;
  discountAmout: number;
}

type InternationalShippingProduct = {
  name: string;
  price: number;
  limitedEdition: boolean;
}

function renderProducts<T>(arr: T[]): void {
  arr.forEach(item => {
   if(typeof item === 'object') {
     if(item.hasOwnProperty("discountAmout")) {
       // Render Product with Discount Amount
        console.log(`Discounted Product ${item.name}`)
      } else if (item.hasOwnProperty("limitedEdition")) {
       // Render International Shipping Product
        console.log(`International Shipping Product ${item.name}`)
      } else {
       // Render Normal Product
        console.log(`Product ${item.name}`)
      }
    }
  })
}

const productA: Product = {
 name: "T Shirt",
 price: 23.00
}

const productB: DiscountedProduct = {
 name: "Nike Shoe",
 price: 100.00,
 discountAmout: 10
}

const productC: InternationalShippingProduct = {
 name: "Designer Bag of some kind",
 price: 200.00,
 limitedEdition: true
}

const products = [productA, productB, productC]

renderProducts(products)

In computer science, Parametric polymorphism is essential because it allows functions and data types to be written generically so that they can handle values uniformly regardless of their data type. Parametric polymorphism can lead to more efficient code since it avoids the need for type-specific implementations. I hope this article gave you a basic understanding of what it is and how it can be used to write better code. That’s all for today. See you next time ✌️

DynamoDB pain points: How to address them and exploring possible alternatives

Shadid Haque — Mon, 30 Jan 2023 14:54:50 +0000

DynamoDB is a robust NoSQL database that has become increasingly popular due to its performance, scalability, relative simplicity, and low operational overhead. However, it has its drawbacks. Some of the main disadvantages of DynamoDB include limited querying options, limited storage capacity (400kb per document), no multi-region ACID support (eventual consistency), and difficulties in replicating data in multi-region setups.

In this article, we will explore the main pain points of DynamoDB, how to overcome them, and explore some of the DynamoDB alternatives.

Indeed, there are areas where DynamoDB is the most compelling solution when it comes to speed. DynamoDB is a low-latency, fully managed NoSQL database that is ideal for applications where speed is more important than strong consistency.

DynamoDB automatically scales up and down (when you use provisioned capacity) based on the application traffic pattern. It supports automated sharding, so you do not need to manage shards manually. If your application requires high scalability and speed and doesn't need complex data relationships or transactions, DynamoDB is the way to go. However, Dynamo does have some drawbacks, which I will explore below.

See a side-by-side comparison of serverless databases.

Limited querying capabilities

If you have worked with DynamoDB to some extent, then you know that relational data modeling is tedious with DynamoDB. There are no foreign key joins in DynamoDB like most people are used to in relational databases. You can, however, handle complex data access patterns similar to relational databases. In DynamoDB, you can model relationships such as one-to-many, many-to-many, and one-to-one. You can use a variety of strategies, such as denormalization, duplication, and composition of primary keys. However, these solutions require a fair amount of engineering effort and introduce a number of other limitations to consider.

Follow Alex DeBrie’s article to learn more about data access patterns in DynamoDB.

DynamoDB can only perform query operations on tables with a single primary key. Consider the following table for example. The primary key of this table is the user ID, a unique identifier for each user. The table might have other attributes like name, email, and address, as demonstrated below.

You cannot query the table on other attributes like name and email. You need to set up the global secondary indexes (GSI) with the attributes you want to query and then use the query operation on the GSI. Those of us using DynamoDB for a while are okay with this pattern of storing data. Nevertheless, this is a limitation.

Moreover, you have to consider the cost of using GSIs. GSIs consume additional read and write capacity units (RCUs and WCUs). Learn more about GSI costs here.

Let's say you have a DynamoDB table called “Products” with a primary key of product_id and a few other attributes like "name" and "price". The table is provisioned with 1,000 RCUs and 1,000 WCUs. If you want to create a GSI for querying on the "name" attribute, it will require additional RCUs and WCUs to perform queries on the "name" attribute. So now you need to provision 1,000 RCUs and 1,000 WCUs for the primary key and an additional 1,000 RCUs and 1,000 WCUs for the GSI, doubling your DynamoDB usage cost. As your application grows, GSI optimization is an additional overhead you must be mindful of. In a relational database, you don't have to worry about these.

Comparing a SQL database to a NoSQL database is like comparing apples to oranges. NoSQL databases such as DynamoDB are excellent for horizontal scalability, high availability, and flexibility for handling unstructured and semi-structured data. However, features such as foreign key constraints and ACID (Atomicity, Consistency, Isolation, Durability) transactions, which we take for granted in a relational database, are not present by default in DynamoDB. Manually configuring these capabilities takes a lot of engineering effort and specialized knowledge. In brief, you have to deal with increasing application complexity because of GSI.

If you are exploring Amazon DynamoDB alternatives that are NoSQL and have better-querying capabilities, there are a few to choose from, but the one I will be covering here is Fauna. Fauna combines the querying capabilities of relational databases (SQL databases) with the flexibility of NoSQL databases.

A database management solution like Fauna bridges the gap between a traditional relational database and a flexible NoSQL database by allowing data to store in JSON-like documents while also giving the ability to create SQL-like data relationships among collections.

Learn more about Fauna’s document-relational model.

Like DynamoDB, Fauna is also a fully managed NoSQL database with low latency. It also auto-scales, ensures high availability, and adapts to your application traffic. DynamoDB has been around for 10+ years now, whereas Fauna is relatively new.

Challenges of multi-region data replication

While DynamoDB global tables provide a way to replicate data across multiple regions, it can be a complex and costly process that requires additional setup, management, and code — and it may only support some features or data replication across all indexes.

You have to create the same table in multiple regions with the same schema, indexes, and throughput settings. Additionally, data replication between different regions needs to be configured and managed. There is no zero-configuration solution to replicate data across multiple regions with DynamoDB.

Furthermore, certain features are not available in global tables. DynamoDB Time to Live (TTL), which is the ability to expire items after a specified period of time, is not available with global tables.

Another unsupported feature is DynamoDB Streams. Additionally, local secondary indexes (LSIs) and global secondary indexes (GSIs) are not replicated across all replicas in global tables. You must manually create those LSIs and GSIs in different regions; otherwise, you cannot query data efficiently.

DynamoDB global tables do not provide fault-tolerant support by default

In the case of an outage or a failure in one region, DynamoDB does not automatically switch to another region to ensure data availability.

If distributed data across many regions is one of the core requirements of your application, you are better off using one of the alternatives of DynamoDB, such as Amazon Aurora, Fauna, or Apache Cassandra.

DynamoDB uses an "eventual consistency" model for global data, meaning that updates may take some time to propagate to all replicas fully.

Applications that require immediate consistency across all regions may need to use a different database solution or implement additional logic to handle eventual consistency in DynamoDB. Since data may not be immediately available in all regions, read and write operations may be slower in certain regions. This can affect the performance and user experience of the application.

Fauna is one of the strong competitors to Amazon DynamoDB for its multi-region data replication. Fauna provides multi-region data with strong consistency. It automatically routes your requests to the nearest replica, ensuring that your application experiences low latency. Fauna automatically replicates your data across all regions, ensuring that your data is always up-to-date and available — even in case of a regional outage or failure. Unlike DynamoDB, Fauna requires zero configuration for global replication. Strong data persistence in all regions is always guaranteed. If you compare Fauna to DynamoDB, you realize that Fauna offers all the features of DynamoDB without the drawbacks.

Apache Cassandra is also another alternative to Amazon DynamoDB. It is a free, distributed wide-column, NoSQL, open source database that can handle a large amount of data across multiple regions. However, you must manage your infrastructure and clusters if you decide to use Apache Cassandra. Managing your clusters can be challenging, even though Cassandra has robust documentation and an active community behind it.

Another database you may be interested in as an alternative is MongoDB Atlas, the managed service for MongoDB.

Learn how Fauna stacks up against MongoDB.

Storage limitations

Another pain point with DynamoDB is the item size limit. An individual item has a maximum of 400kb in size. The item size limit impacts the way data is modeled. The application may need to denormalize the data or split it across multiple items to work within the item size limit. The storage limitation is not a big deal for most applications out there, but if you plan to grow and scale your application to millions of users, you should start thinking about the additional complexity you need to handle.

DynamoDB competitors such as MongoDB, Fauna, or Cassandra don't have this issue.

Building scalable applications on DynamoDB

DynamoDB is well known for its low latency and scalability. However, as you build and scale your application with DynamoDB, you must be aware of some common pitfalls. As discussed in the previous section, an individual item in DynamoDB can be at most 400kb. While building with DynamoDB, it is crucial to understand the data model that best fits your application's use case and design the table schema accordingly. Failing to do this at the start will cost you as you scale your application.

Although possible, evolving your data with DynamoDB as your application grows is challenging. You need to choose the correct partition key. Selecting the right partition key ensures that the data is evenly distributed and read and write requests are distributed evenly across all partitions.

Limited ability to perform advanced analytics

DynamoDB is optimized for storing and retrieving large amounts of data quickly, but it is ill-suited for performing advanced analytics on that data. It doesn't support advanced features such as aggregate functions or window functions.

SUM, COUNT, AVG, and MAX are commonly used in SQL to perform calculations on groups of data. DynamoDB alternatives MongoDB and Fauna have equivalent features to perform these analytics tasks. In MongoDB, you get aggregate functions such as $group, $match, $project, etc. Fauna also provides aggregate functions through Fauna Query Language (FQL) for advanced analytics.

Window functions are another advanced SQL feature that DynamoDB does not support. These functions allow users to perform calculations over a set of rows related to the current row in a query. Fauna also does not have built-in window functions, but it is possible to perform calculations similar to window functions using the Map-Reduce function and a combination of other functions. MongoDB does not have built-in window functions either. However, it does have the $bucket operator, which can be used to perform similar calculations.

If you insist on using DynamoDB and need robust analytics, then your best bet is to use third-party analytics tools such as Apache Hive or Apache Pig to perform complex queries and advanced analytics on the data stored in DynamoDB. You have to consider the additional cost of these extra resources, however.

Conclusion

To conclude, DynamoDB is well-suited for use cases that require high scalability, high performance, and low latency. It seamlessly integrates with other AWS services and supports document and key-value data models. However, it also comes with its limitations. Limited query capabilities, little support for the transaction, eventual consistency, and limited support for analytics are some of the main pain points with DynamoDB. With enough engineering resources and time, you can overcome these pain points.

Everything in software engineering is about tradeoffs. Every database management solution has its pros and cons. It is up to you and the developers to choose your company's best solutions. This article gives you a clear picture of the various limitations of DynamoDB and some of the alternatives to DynamoDB so you can make the best-informed decision while choosing a database for your next project.

Though DynamoDB has much to offer, Fauna is a much newer offering that comes with a host of powerful and unique features that enhance the serverless experience for organizations of all sizes. Read more at “Modernization of the database: DynamoDB to Fauna.”

If you're experiencing any of the DynamoDB pain points mentioned above and are looking for a more robust and efficient solution, consider reaching out to either me or the team of experts at Fauna.

Building a full stack app with Deno Fresh and Fauna

Shadid Haque — Fri, 16 Dec 2022 17:43:59 +0000

Building a full stack app with Deno Fresh and Fauna

The best way to learn about new technology is by building something practical. In this tutorial, you will build a simple blogging platform with the Fresh framework and explore various features of Fresh.

Fresh is a next-generation JavaScript framework built on top of Deno. Fresh requires no configuration and comes with cool features such as just-in-time rendering, no build step, out-of-box Typescript support, and island architecture (also known as partial hydration).

You can play around with the live demo app here. You can also find the complete code for this tutorial in this Github repository.

Pre-requisites

Deno 1.x
Familiarity with React
Some Familiarity with TypeScript

Creating a Fresh App

Run the following commands to scaffold a new Fresh application.

deno run -A -r https://fresh.deno.dev my-project
cd my-project
deno task start

Visit localhost:8080 and you are presented with a new Fresh app.

Open the project in your favourite code editor. You will observe a folder structure similar to the following one.

If you are familiar with React you will feel right at home with Fresh. Fresh uses Preact, a minimal version of React.

Fresh uses server side rendering. It compiles javascript in the server side and ships pure HTML to the client. Parts of a server-rendered page can then be independently re-hydrated with interactive widgets (islands). This architecture pattern is called island architecture. You can learn more about Fresh architecture here.

Creating a Navbar and application layout

Create a new file components/NavComponent.tsx and add the following code.

// components/Navbar.tsx

const logoStyle = `inline-flex items-center border-b-2 border-purple-500 px-1 pt-1 text-sm font-medium text-gray-900`;

export default function Navbar() {
  return (
    <nav class="bg-white shadow">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-16 justify-between">
          <div class="flex">
            <div class="ml-6 flex space-x-8">
              <a 
                href="/"
                class={logoStyle}
              >
                Fresh Blogs 🌿
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

Next, create a new file, routes/_app.tsx and add the following code.

// routes/_app.tsx

import { AppProps } from "$fresh/server.ts";
import NavComponent from "../components/Navbar.tsx";

export default function App({ Component }: AppProps) {
  return (
    <>
      <NavComponent />
      <Component />
    </>
  );
}

You define your application layout in this file. Notice that you are importing the NavComponent in the _app.tsx file. This makes the NavComponent visible in every pages of your application.

Next, go ahead and update the index.tsx file with following code.

// routes/index.tsx

export default function Home() {
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <h1 class="my-6 text-3xl">
        Welcome to `🥤 Fresh Blogs 🍋`!
      </h1>
      <p class="my-6">Fresh ideas everyday</p>
    </div>
  );
}

Now you have an application layout. Next, let’s go ahead and create some page routes.

Creating new routes (New Post page)

Create a new file routes/posts/new.tsx and add the following code.

// routes/posts/new.tsx 

import { PageProps } from "$fresh/server.ts";
import { Fragment } from "preact";

export default function NewPostPage(props: PageProps) {
  return (
    <Fragment>
      <div class="p-4 mx-auto max-w-screen-md">
        New Post Page
      </div>
    </Fragment>
  )
}

In the code above you are exporting a new react component.

Fresh automatically generates a new route for your application when you create a new react component inside the routes directory. Observe the fresh.gen.ts file and you will notice that your newly created routes are added to this file automatically.

Visit the /posts/new route and notice that the component above gets rendered.

You can also create a handler function in your routes file. The handler function will be executed on the server side whenever someone visits the route. Here's an example.

// routes/posts/new.tsx 
import { PageProps } from "$fresh/server.ts";
import { Fragment } from "preact";
import { HandlerContext, Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  GET(req: Request, ctx: HandlerContext) {
    console.log('Inside GET handler');
    return ctx.render({
      message: "Hello New Post 📝",
    });
  },
};

export default function NewPostPage(props: PageProps) {
  return (
    <Fragment>
      <div class="p-4 mx-auto max-w-screen-md">
        {props.data.message}
      </div>
    </Fragment>
  )
}

You can also pass data from your handler function to your component using the context render function as shown in the previous code block.

Next, let’s create a form to create new posts. A form has client side interactivity. In fresh you use islands to handle client side interactivity.

Islands are isolated Preact components that are rendered on the client. Islands are defined by creating a file in the islands/ folder in a Fresh project. Islands are re-hydrated as needed which gives Fresh the extra performance boost unlike other SSR solutions for React.

Create a new file islands/PostForm.tsx and add the following code.

// islands/PostForm.tsx

import { useState } from "preact/hooks";
export const inputStyle = `p-4 border-2 border-purple-400 radius rounded-md flex w-9/12`;

export default function PostForm() {

  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const createPost = (e: Event) => {
    e.preventDefault();
  }

  return (
    <div class="p-5 m-5">
      <h1 class="text-xl">Post Form</h1>
      <div class="mt-1 flex">
        <input 
          class={`${inputStyle}`} 
          placeholder="Post Title"
          onChange={(e: any) => setTitle(e.target.value)}
          value={title}
        />
      </div>
      <div class="mt-1 flex">
        <textarea 
          class={`${inputStyle}`} 
          placeholder="Write something..."
          onChange={(e: any) => setContent(e.target.value)}
          value={content}
        />
      </div>
      <button 
            onClick={createPost}
            class="rounded-md mt-3 border-transparent bg-purple-200 px-4 py-2"
          >
            Submit
          </button>
    </div>
  );
}

Import the island component in the routes/posts/new.tsx file.

// ...routes/posts/new.tsx

import PostForm from "../../islands/PostForm.tsx";

//...

export default function NewPostPage(props: PageProps) {
  return (
    <Fragment>
      <div class="p-4 mx-auto max-w-screen-md">
        <PostForm />
      </div>
    </Fragment>
  )
}

Dynamic routes (View Post page and Edit Post page)

Fresh supports dynamic routes similar to Next.js. Folder structure determines the routing mechanism. Create a new file routes/posts/[id]/index.tsx and add the following code.

// routes/posts/[id]/index.tsx
import { useState } from "preact/hooks";
import { Handlers, PageProps } from "$fresh/server.ts";

export const handler: Handlers = {
  GET(_req, ctx) {
    const { id } = ctx.params;
    return ctx.render({
      content: `Hello Post ${id} 📝`,
    });
  }
};

export default function PostPage(props: PageProps) {
  const [post, setPost] = useState<any>();
  setPost(props.data);

  if(!post) { 
    return <div>Loading...</div>
  }
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <h1>{post.content}</h1>
    </div>
  )
}

Notice that the directory has a folder with [<name>] syntax. Based on the folder structure the application sets up a /posts/:id route. Visit http://localhost:8000/posts/1 to make sure the age is loading as expected.

Let’s create an edit post page next. Create a new file routes/posts/[id]/edit.tsx and add the following code.

// routes/posts/[id]/edit.tsx

import { Handlers, PageProps } from "$fresh/server.ts";
import PostForm from "../../../islands/PostForm.tsx";
import { Fragment } from "preact";

export const handler: Handlers = {
  GET(_req, ctx) {
    const { id } = ctx.params;
    return ctx.render({
      data: { id },
    });
  },
};

export default function EditPostPage(props: PageProps) {
  return (
    <Fragment>
      <div class="p-4 mx-auto max-w-screen-md">
        <PostForm />
      </div>
    </Fragment>
  )
}

You now have all the pages ready. Next, let’s go ahead and add a database to the project so you can save and retrieve posts.

Adding Fauna database to the project

Head over to fauna.com and create a new account if you haven’t done already. Next create a new database.

Navigate to Security > Keys in your fauna dashboard. Select New Key to generate a new key.

Select Admin as role. Give your key a name and select Save.

You will recieve a key 🔑 like following. Do not share this key.

fnAEx.....

Configuring the Database

For this demo application you need 3 Collections in the database. User, Post and Comment. Additionally you need to define relationship between these collections. There is a has_many relationship between User to Post and Post to Comment. Fauna also provides out-of-box user registration and secure authentication.

You can create all these collections from Fauna dashboard in the UI or you can run this setup script to generate all the resources for you. Copy the script into utils/fauna-setup.ts file.

To run the script first export your fauna admin secret and domain in the shell.

$ export FAUNA_ADMIN_SECRET=<Your-admin-secret> \
  export FAUNA_DOMAIN=<Your-db-domain>

Next run the script.

$ deno run ./utils/fauna-setup.ts

What does the script generates?

When the script execution is complete all the collections and indexes will be created in your Fauna database. The script sets up several Fauna resources. It sets up three collections User Post and Comment. It also creates an index to search user by email.

The script will also create a server secret for your application. Your application will use this secret to communicate with the database. Export the server secret by running following command in your terminal.

export FAUNA_SECRET=fnAExE....

You can also create a .env file to store these environment variables variable. Following is an example of a .env file. Always make sure not to commit this file with your source control.

FAUNA_DOMAIN=db.us.fauna.com
FAUNA_SECRET=fnAEuxxxx.....
FAUNA_ADMIN_SECRET=fnADxxxxx.....

Finally, you can visit the Fauna dashboard and explore the generated resources in the UI.

Create a new file utils/db.ts and add the following code. Here you are instantiating a new database client. You use these helper functions to query the database.

// utils/db.ts
import * as faunadb from "https://deno.land/x/fauna@5.0.0-deno-alpha9/mod.js";

export const q = faunadb.query as any;

export const faunaClient = new faunadb.Client({ 
  domain: Deno.env.get("FAUNA_DOMAIN"),
  secret: Deno.env.get("FAUNA_SECRET"),
});

export const getFaunaClient = (secret: string) => new faunadb.Client({
  domain: Deno.env.get("FAUNA_DOMAIN"),
  secret,
});

Setting up user registration

Now that you have the database configured let's go ahead and implement user registration and user login functionality.
First, create a new route for user login. Create a new file, routes/signup.tsx and add the following code.

// routes/signup.tsx
import SignupForm from "../islands/SignupForm.tsx";

export default function UserSignup() {
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <h1 class="my-6 text-3xl">
        🚀 Let's get you signed up!🚀 
      </h1>
      <SignupForm />
    </div>
  );
}

Notice you have a SignupForm island imported in this page. Go ahead and create a new island islands/SignupForm.tsx and add the following code.

// islands/SignupForm.tsx

import { useState } from "preact/hooks";
import { inputStyle } from "./PostForm.tsx";

export default function SignupForm() { 
  const [state, setState] = useState({});

  const handleChange = (e: any) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  }

  const register = async () => { 
  }

  return (
    <div>
      <div class="pl-4 pt-4 mt-4">
        <input 
          onChange={handleChange} 
          type="text" 
          class={`${inputStyle}`} 
          placeholder="Name" 
          name="username"
        />
      </div>
      <div class="pl-4 pt-4 mt-1">
        <input 
          onChange={handleChange} 
          type="email" 
          class={`${inputStyle}`} 
          placeholder="Email" 
          name="email"
        />
      </div>
      <div class="pl-4 pt-2 mt-1">
        <input 
          onChange={handleChange} 
          type="password" 
          class={`${inputStyle}`} 
          placeholder="Password" 
          name="password"
        />
      </div>
      <div class="pl-4 pt-2 mt-1">
        <button 
          onClick={register} 
          class="rounded-md mt-3 border-transparent bg-purple-200 px-4 py-2"
        >
          Register
        </button>
      </div>
    </div>
  )
}

On the Register button click, you want to make a call to Fauna to register your users. You can make a direct HTTP call from your SignupForm island component. However, you will expose the Fauna's secret key by doing this. It is a good practice to make database interactions and third-party API calls from the server side. This way, your API secrets are never exposed on the client side.

You can create a new API route in Fresh, a server-side REST endpoint, then have your island component make a call to this API endpoint and handle all database interactions in the endpoint.

Fresh API routes are similar to Next.js API routes.

Create a new file routes/api/register.ts and add the following code.

import { Handlers } from "$fresh/server.ts";
import { faunaClient, q } from "../../utils/db.ts";

export const handler: Handlers = { 
  async POST(req: Request) {
    try {
      const body = await req.json();

      const newUser = await faunaClient.query(
        q.Create(
          q.Collection("User"),
          {
            credentials: { password: body.password },
            data: {
              email: body.email,
              username: body.username,
            },
          }
        )
      );

      return Response.json({
        data: {
          ...newUser.data,
        }
      });
    } catch (error) {
      return Response.json({
        error: error.message,
      });
    }
  }
};

Here you are creating a new User record in Fauna. You can learn more about Fauna CRUD operations in the official docs here.

Next, plug this api endpoint to your SignupForm register function as shown in the following code snippet.


// islands/SignupForm.tsx
export default function SignupForm() { 
  // ...
  const register = async () => { 
    try {
      const response = await fetch("/api/register", {
        method: "POST",
        body: JSON.stringify({
          ...state,
        }),
      });
      const data = await response.json();
      console.log(data);
      alert("Successfully registered!, try to log 🪵 in now");

    } catch (error) {
      alert("Something went wrong!");
    }
  }

  return (
    <div>
      ...
    </div>
  )
}

Visit http://localhost:8000/signup and try to register a new user. Once a new user is registered it should appear under User collection in Fauna.

Notice that your password is not saved as a string. This is because you defined password field as credentials type. This is a part of Fauna’s secure built in authentication feature.

User Login

You can follow the same pattern to setup user login functionality. Create a new file routes/login.tsx and add the following code.

// routes/login.tsx

import LoginForm from "../islands/LoginForm.tsx";
export default function UserLogin() {
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <h1 class="my-6 text-3xl">
        Login to your account and start blogging! 📝
      </h1>
      <LoginForm />
    </div>
  );
}

Create a LoginForm island component to handle the form.

Next, create a new api routes to handle Login.

// routes/api/login.ts

import { Handlers } from "$fresh/server.ts";
import { faunaClient, q } from "../../utils/db.ts";

export const handler: Handlers = { 
  async POST(req: Request) {
    try {
      const body = await req.json();

      const authUser: any = await faunaClient.query(
        q.Login(
          q.Match(q.FaunaIndex("users_by_email"), body.email),
          { password: body.password  },
        )
      );

      return Response.json({
        data: {
          token: authUser.secret,
        }
      });
    } catch (error) {
      console.log('==>>>', error);
      return Response.json({
        error: error.message,
      });
    }
  }
};

And finally create a LoginForm island to handle interactivity.

// islands/LoginForm.tsx

import { useState } from "preact/hooks";
import { inputStyle } from "./PostForm.tsx";

export default function LoginForm() { 
  const [state, setState] = useState({});

  const handleChange = (e: any) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  }

  const doLogin = async () => {
    try {
      const response = await fetch("/api/login", {
        method: "POST",
        body: JSON.stringify({...state}),
      })
      const data = await response.json();
      if(data.error) {
        alert(`${data.error} : Make sure you have a correct email and password`);
      } else {
        localStorage.setItem("token", data.data.token);
        alert("Successfully logged in!");
      }
    } catch (error) { 
      console.log(error);
      alert("Something went wrong!");
    }
  }

  return (
    <div>
      <div class="pl-4 pt-4 mt-4">
        <input 
          onChange={handleChange} 
          type="email" 
          class={`${inputStyle}`} 
          placeholder="Email" 
          name="email"
        />
      </div>
      <div class="pl-4 pt-2 mt-1">
        <input 
          onChange={handleChange} 
          type="password" 
          class={`${inputStyle}`} 
          placeholder="Password" 
          name="password"
        />
      </div>
      <div class="pl-4 pt-2 mt-1">
        <button 
          onClick={doLogin} 
          class="rounded-md mt-3 border-transparent bg-purple-200 px-4 py-2"
        >
          Signin
        </button>
      </div>
    </div>
  )
}

You use the Login function from Fauna to generate a temporary user secret (it is invalidated after some time). You save this secret in your local storage just like a jwt token. You need to pass this secret with your API call to Fauna when making protected requests (i.e. create or delete posts).

Head over to http://localhost:8000/login and try logging in with a registered user.

Notice on successful login the Fauna secret is saved in the local storage.

ℹ️ You can learn more about Fauna’s identity based authentication here.

Adding CRUD for Posts

Following a similar pattern, you can add CRUD operations for posts. Create a new API route to handle post CRUD operations. Create a new file routes/api/post.ts and add the following code.

// routes/api/post.ts

import { Handlers } from "$fresh/server.ts";
import { getFaunaClient, q } from "../../utils/db.ts";

export const handler: Handlers = {
  /**
   * Create a new post
   */
  async POST(req: Request) {
    try {
      const body = await req.json();
      const faunaClientWithAuth = getFaunaClient(req.headers.get("Authorization")!);
      const newpost = await faunaClientWithAuth.query(
        q.Create(
          q.Collection('Post'),
          { 
            data: { 
              ...body, 
              owner: q.CurrentIdentity(), 
              author: q.Select(["data", "username"], q.Get(q.CurrentIdentity()))
            } 
          },
        )
      );

      return Response.json({
        data: {
          _id: newpost.ref.id,
          ...newpost.data,
        }
      });
    } catch (error) {
      return Response.json({
        error: error.message,
      });
    }
  },
};

In the previous code block, you use the getFaunaClient function and pass in the Authorization header. The Authorization header is a Fauna secret that you save in your local storage on successful login.

On PostForm island component plug in the api call when submit button is clicked.

// islands/PostForm.tsx
...
export default function PostForm() {

  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const createPost = async (e: Event) => {
    e.preventDefault();
    const response = await fetch("/api/post", {
      headers: {
        "Authorization": localStorage.getItem("token") || "",
      },
      method: "POST",
      body: JSON.stringify({ title, content, author: localStorage.getItem("username") }),
    });
    const data = await response.json();
    console.log(data);
    if(data.error) {
      alert('⛔ Something went wrong! Are you logged in?');
      return;
    }
    alert('Post created!');
    setTitle("");
    setContent("");
  }

  return (
    <div class="p-5 m-5">
      ...
    </div>
  );
}

Navigate to http://localhost:8000/posts/new and try creating a new post. Make sure you are already logged in.

Showing a list of posts

In the home page a user should be able to view all the posts. In your routes/api/post.ts file add a new GET function to retrieve all the posts.

import { Handlers } from "$fresh/server.ts";
import { getFaunaClient, q, faunaClient } from "../../utils/db.ts";

export const handler: Handlers = {
  /**
   * Create a new post
   */
  async POST(req: Request) {
    //...
  },

   /**
   * Get all posts
   */
  async GET() {
    try {
      const posts: any[] = [];
      const { data } = await faunaClient.query(
        q.Map(
          q.Paginate(q.Documents(q.Collection('Post'))),
          q.Lambda("post", q.Get(q.Var("post")))
        )
      );
      data.forEach((post: any) => {
        posts.push({
          _id: post.ref.id,
          ...post.data,
        });
      })
      return Response.json({
        data: posts,
      });
    } catch (error) {
      return Response.json({
        error: error.message,
      });
    }
  },
};

Create a new island component, islands/PostList.tsx to display all the posts.

// islands/PostList.tsx
import { useState, useEffect } from "preact/hooks";

export default function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await fetch("/api/post");
        const remotePosts = await response.json();
        setPosts(remotePosts.data);
      } catch (error) {
        console.error(error);
        alert("Something went wrong!");
      }
    }
    fetchPosts();
  },[]);

  console.log(posts);

  return (
    <div class="p-5">
      <h1 class="text-xl">Post List</h1>
      {
        posts.map((post: any) => (
          <PostItem post={post} id={post._id} />
        ))  
      }
    </div>
  )
}

function PostItem({ post, id } : { post: any, id: string }) {
  return (
    <div class="p-5">
      <h4 class="text-md mb-3">{post.title}</h4>
      <a class="border mt-1 p-2 cursor:pointer" href={`/posts/${id}`}>View</a>
    </div>
  )
}

Add this island component into your index.tsx page.

// routes/index.tsx
import PostList from "../islands/PostList.tsx";

export default function Home() {
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <h1 class="my-6 text-3xl">
        Welcome to `🥤 Fresh Blogs 🍋`!
      </h1>
      <p class="my-6">Fresh ideas everyday</p>
      <PostList />
    </div>
  );
}

All the posts will now appear in your homepage.

Viewing a single post

Notice that when you select the View button for any post from post list it takes you to the /post/:id route. In this page you can retrieve the post information and display it.

In this case, you can use the handler function from fresh to retrieve the data from the database. Since the handler function runs on the server side, you are not exposing any secure information. Make the following changes to your routes/posts/[id]/index.tsx file.

import { useState } from "preact/hooks";
import { Handlers, PageProps } from "$fresh/server.ts";
import { faunaClient, q } from "../../../utils/db.ts";

export const handler: Handlers = {
  async GET(_req, ctx) {
    const { id } = ctx.params;
    try {
      const post = await faunaClient.query(
        q.Get(q.Ref(q.Collection('Post'), id))
      );
      return ctx.render({
        _id: post.ref.id,
        ...post.data,
      });
    } catch (error) {
      return Response.json({
        error: error.message,
      });
    }
  },
};

export default function PostPage(props: PageProps) {
  const [post, setPost] = useState<any>();
  setPost(props.data);

  if(!post) { 
    return <div>Loading...</div>
  }
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <h1 class="text-xl pl-4">{post.title}</h1>
      <div class="text-sm font-bold pl-4">By {post.author}</div>
      <p class="pl-4 text-left">{post.content}</p>
    </div>
  )
}

Deleting a post

Add a DELETE function to your routes/api/post.ts api route to handle post delete.

// routes/api/post.ts
import { Handlers } from "$fresh/server.ts";
import { getFaunaClient, q, faunaClient } from "../../utils/db.ts";

export const handler: Handlers = {
  /**
   * Create a new post
   */
  async POST(req: Request) {
    ...
  },

   /**
   * Get all posts
   */
  async GET() {
    ...
  },
  /**
   * Delete a post
   */
  async DELETE(req: Request) {
    try {
      const body = await req.json();
      const faunaClientWithAuth = getFaunaClient(req.headers.get("Authorization")!);
      const post = await faunaClientWithAuth.query(
        q.Delete(q.Ref(q.Collection('Post'), body._id))
      );
      return Response.json({
        data: post.data,
      });

    } catch (error) {
      return Response.json({
        error: error.message,
      });
    }
  },
};

Next, make the Delete call from your page component to delete the post.

// routes/posts/[id]/index.tsx
// ...
export default function PostPage(props: PageProps) {
  const [post, setPost] = useState<any>();
  setPost(props.data);

  const deletePost = async () => {
    const response = await fetch(`/api/post/`, {
      headers: {
        "Authorization": `${localStorage.getItem("token")}`,
      },
      method: "DELETE",
      body: JSON.stringify({
        _id: post._id
      })
    });
    const data = await response.json();
    if(data.error) {
      alert(data.error);
    } else {
      alert("Post deleted!");
      window.location.href = "/";
    }
  }

  if(!post) { 
    return <div>Loading...</div>
  }
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <h1 class="text-xl pl-4">{post.title}</h1>
      <div class="text-sm font-bold pl-4">By {post.author}</div>
      <p class="pl-4 text-left">{post.content}</p>
      <button class="border mt-1 p-2 cursor:pointer" onClick={deletePost}>Delete</button>
    </div>
  )
}

You can also apply the same pattern and have CRUD for comments. You can follow the completed code for this project here to implement comments CRUD functionality.

Final thoughts

Fresh really takes a fresh new approach to web dev. It is still quite new but the ecosystem is rapidly growing. Up until now the Deno ecosystem was a missing a full stack framework and Fresh seems to fill that void quite effectively. You can create scalable, performant applications with Fresh and Fauna quite easily. On top of that you can make fully serverless full stack applications on the edge when you deploy your Fresh app to Deno deploy, denoflare.dev or Netlify.

Building an edge serverless GraphQL backend with Cloudflare Workers and Fauna

Shadid Haque — Wed, 05 Oct 2022 13:41:04 +0000

This tutorial will teach you how to build a serverless GraphQL service on the edge with Cloudflare Workers and Fauna — allowing you to take advantage of two edge serverless compatible technologies. Try the live demo here. You can find the complete code for this demo here.

Before diving into the code, let’s explore what edge serverless is and why it matters.

What is edge serverless?

Edge serverless is an infrastructural evolution of cloud serverless in which the computing resources that deliver serverless functions are located geographically closer to the end user.

Cloudflare Workers are, by default, edge serverless functions. They are globally distributed in a way that the end user always hits the nearest compute instance, lowering latency.

There are three main benefits of building your GraphQL service on edge serverless:

You don't have to manage servers. Your application auto scales.
You pay per usage for your infrastructure.
Your app is faster. The computing resources that deliver serverless functions are located geographically closer to the end user which reduces latency for your application.

Why use Fauna as the database?

By default, Fauna is a serverless database with edge support. Like Cloudflare Workers, Fauna is distributed and the data gets replicated across different servers within a specified region group. When users request data, it always retrieves the data from the nearest geographical location reducing the latency.

You get the best of your edge infrastructure when your compute and database are both edge serverless compatible. In addition, Fauna is an easy-to-use database with zero administrative overhead.

Prerequisites

Make sure you have the following installed in your computer

Node.js 16 or higher
Cloudflare Wrangler CLI (install instructions)

Scaffolding a new Cloudflare Workers project

Run the following code to scaffold a new Cloudflare Workers project with Wrangler.

$ wrangler init <my-awesome-project>

The CLI wizard will walk you through some configuration questions and bootstrap your application. When it asks you Would you like to create a Worker select Yes and select Fetch handler option.

Open the src/index.ts file. You will see some code that reads as follows.

export interface Env {
}

export default {
    async fetch(
        request: Request,
        env: Env,
        ctx: ExecutionContext
    ): Promise<Response> {
        return new Response("Hello World!");
    },
};

Run wrangler dev and visit http://0.0.0.0:8787/. It should display “Hello World!”.

Setting up a GraphQL server in Cloudflare Workers

Run the following command to install all the dependencies.

$ npm i @graphql-yoga/common faunadb --save

Next, delete everything from index.ts file and add the following code. Here you are creating a simple GraphQL server with @graphql-yoga library.

import { createServer } from '@graphql-yoga/common'

const server = createServer({
  schema: {
    typeDefs: /* GraphQL */ `
      type Query {
        hello(msg: String): String
      }
    `,
    resolvers: {
      Query: {
        hello: async (_, { msg }) => {
          return `Hello, ${msg}`
        }
      },
    },
  },
})
server.start()

Run wrangler dev and visit http://0.0.0.0:8787/ in your browser. In your browser, a GraphQL playground will open.

Make the following query in GraphQL playground to make sure everything is working as expected.

{
  hello(msg: "adwwd")
}

Result:

{
  "data": {
    "hello": "Hello, adwwd"
  }
}

Next, let’s go ahead and replace the GraphQL schema with something more practical. We want CRUD (Create, Read, Update and Delete) operations in our GraphQL service. Make the following changes to the schema to add CRUD.

import { createServer } from '@graphql-yoga/common'

const server = createServer({
  schema: {
    typeDefs: /* GraphQL */ `
      type Post {
        id: ID!
        title: String!
        content: String!
      }
      type Query {
        getPost(id: ID!): Post
        listPosts: [Post]!
      }
      type Mutation {
        addPost(input: PostInput): Post
        deletePost(id: ID): Boolean
        updatePost(id: ID, input: PostInput): Post
      }
      type Subscription {
        onPostChange(id: ID): Post
      }
      input PostInput {
        title: String
        content: String
      }
    `,
    resolvers: {
      Query: {
      },
    },
  },
})
server.start()

You now have your schema ready. However, you cannot execute these queries and mutations since the resolvers are not yet implemented.

Before we can implement the resolver functions let’s go ahead and set up our database. We are using Fauna as our database.

Creating a Fauna database

Create a new collection called Post.

Next, go over to the Security tab and create a new server secret for your database.

Save the generated database secret. Make sure you do not reveal this secret in your version control.

Back in the code, add the Fauna database key and domain in your wrangler.toml file as follows.

# wrangler.toml
name = "edge-graphql"
main = "src/index.ts"
compatibility_date = "2022-09-23"
compatibility_flags = ["streams_enable_constructors"]
node_compat = true

[vars]
FAUNA_SECRET = "fnAxxx...."
FAUNA_DOMAIN = "db.us.fauna.com"

Next, create a new file src/db.ts and add the following code. In the following code snippet, you initialize the Fauna database.

import * as faunadb from "faunadb";

export const q = faunadb.query as any;
declare const FAUNA_DOMAIN: string;
declare const FAUNA_SECRET: string;

export const faunaClient = new faunadb.Client({ 
  domain: FAUNA_DOMAIN,
  secret: FAUNA_SECRET,
});

Implementing resolvers

Add post (Mutation)

First, you need to enable node_compat mode for Cloudflare Workers since you will use modular JavaScript. Go to wrangler.toml file and add the following line.

name = "ggop"
main = "src/index.ts"
compatibility_date = "2022-09-25"
node_compat = true

[vars]
...

Inside the src/index file, under resolvers field, add a new resolver function addPost as follows.

import { createServer } from '@graphql-yoga/common'
import { faunaClient, q } from './db'

const server = createServer({
  schema: {
    typeDefs: /* GraphQL */ `
      ...
    `,
    resolvers: {
      Query: {
      },
      Mutation: {
        addPost: async (parent, { input }) => {
          const post: any = await faunaClient.query(
            q.Create(q.Collection("Post"), { data: input })
          );
          return {...post.data, id: post.ref.id};
        },
      }
    },
  },
})
server.start()

You use the Fauna driver functions in the resolver to add a new post to the database. If you are new to Fauna, the documentation for how to perform CRUD operations in Fauna.

Run wrangler dev in your terminal. Visit http://localhost:8787/ to interact with your GraphQL playground. Create a new GraphQL mutation to add post.

mutation AddPost {
  addPost(input: {
    title: "New Tittle"
    content: "Another Post"
  }) {
    id
    title
    content
  }
}

# Result 
{
  "data": {
    "addPost": {
      "id": "343885948385230924",
      "title": "New Tittle",
      "content": "Another Post"
    }
  }
}

Go back to the Fauna dashboard and notice that under Post collection a new record is generated.

Update and delete post (Mutation)

Similarly, you can create update and delete resolvers to update and delete posts. Make the following changes to your code.

// ...
const server = createServer({
  schema: {
    typeDefs: /* GraphQL */ `
      // ...
    `,
    resolvers: {
      Query: {
      },
      Mutation: {
        addPost: async (parent, { input }) => {
          const post: any = await faunaClient.query(
            q.Create(q.Collection("Post"), { data: input })
          );
          return {...post.data, id: post.ref.id};
        },
        deletePost: async (_, { id }) => {
          await faunaClient.query(
            q.Delete(q.Ref(q.Collection("Post"), id))
          );
          return true;
        },
        updatePost: async (_, { id, input }) => {
          const post: any = await faunaClient.query(
            q.Update(q.Ref(q.Collection("Post"), id), { data: input })
          );
          return {...post.data, id};
        }
      }
    },
  },
})
server.start()

Run updatePost and deletePost mutation from your GraphQL playground to make sure everything is working as expected.

Get post and post list (Query)

Next, add the listPost and getPost resolver functions under Query.

import { createServer } from '@graphql-yoga/common'
  import { faunaClient, q } from './db'

  const server = createServer({
    schema: {
      typeDefs: /* GraphQL */ `
        //...
      `,
      resolvers: {
        Query: {
          getPost: async (_, { id }) => {
            const post: any = await faunaClient.query(
              q.Get(q.Ref(q.Collection("Post"), id))
            );
            return {...post.data, id};
          },
          listPosts: async () => {
            const posts: any = await faunaClient.query(
              q.Map(
                q.Paginate(q.Documents(q.Collection('Post'))),
                q.Lambda((x: any) => q.Get(x))
              )
            );
            return posts.data.map((post: any) => ({...post.data, id: post.ref.id}));
          }
        },
        Mutation: {
          // ...
        }
      },
    },
  })
  server.start()

In the GraphQL playground try out the queries and make sure that everything is working as expected.

Implementing subscription

Cloudflare Workers support Streams API. Using this Streams API, you can send server-sent events (SSE) to your client. A client subscribes to the server in real-time through SSE.

Fauna also has a streaming API to listen to real-time database changes. Combining these two allows you to implement a complete serverless GraphQL subscription solution on edge.
Keep in mind that there is no WebSocket involved in this implementation.

Add a new subscription function called onPostChange to your resolvers field, as follows.


let stream: any = null;

const server = createServer({
  schema: {
    typeDefs: /* GraphQL */ `
    `,
    resolvers: {
      Query: {
                // ...
      },
      Mutation: {
        // ...
      },
      Subscription: {
        onPostChange: {
          subscribe: async function* (_, { id }) {
            let currentSnap: any;
            let newVersion: any;
            const docRef = q.Ref(q.Collection('Post'), id);
            if(!stream) {
              stream = faunaClient.stream.document(docRef).on('snapshot', (snapshot: any) => {
                currentSnap = {
                  ts: snapshot.ts,
                  data: snapshot.data
                }
              }).start();
            } 
            stream.on('version', (version: any) => {
              newVersion = {
                ts: version.document.ts,
                data: version.document.data
              }
            });

            let subscriptionTime = 0; // Terminate Subscription after 1000 seconds

            while (subscriptionTime < 150) {
              await new Promise(resolve => setTimeout(resolve, 2000, null));
              subscriptionTime++;
              if(newVersion && newVersion.ts !== currentSnap.ts) {
                currentSnap = newVersion;
                subscriptionTime = 0; // Reset Subscription Time
                yield { onPostChange: { ...newVersion.data, id} }
              }
            }
            await new Promise(resolve => setTimeout(resolve, 1000, null));
            stream.close();
            yield { onPostChange: 'Disconnected' }
          }
        },
      },
    },
  },
})
server.start()

In the previous code snippet you use Fauna’s document streaming feature to subscribe to a database record. Whenever the record is updated or deleted, the Fauna client will be notified in real time. You can then emit this event to your GraphQL resolver.

Notice that this is an SSE implementation. This is why we have an iterator function that keeps track of a heartbeat (every two seconds) in the server. After five minutes you close the connection.

It is very important to close the connection to Fauna stream after a period of time, otherwise, you will be charged for the running connection.

Subscriptions can also be done through a Pub/Sub implementation. That way, you don’t have to consistently listen to database changes. Depending on your use case, a Pub/Sub layer might be more economical. However, Cloudflare Pub/Sub is currently in closed beta. Once this feature is generally available, we will create another tutorial using Cloudflare Pub/Sub and Fauna.

Where to go from here

Got questions about Fauna, Cloudflare, serverless, or GraphQL? Feel free reach out to us and ask questions in our forum or on our Discord.

Building scalable solutions with Apollo Federation and Fauna

Shadid Haque — Wed, 24 Aug 2022 16:21:00 +0000

This article explains how you can reduce complexity, develop features faster, and make your engineering teams more efficient using Apollo Federation and Fauna.

Apollo Federation is designed for implementing GraphQL in a microservice architecture. On the other hand, Fauna is a distributed serverless document-relational database delivered as an API. Fauna's native GraphQL API allows engineers to directly integrate it as a subgraph in Apollo Federation or use it as a database for individual microservices.

Apollo Federation combined with Fauna improves developer experience and increases productivity, solving the problem of schema stitching and addressing pain points such as coordination, separation of concerns, and brittle gateway code.

Challenges of modern application development and how to solve it

Many organizations find it challenging to deliver products and features with velocity. More and more organizations are investing massive amounts of resources to make their infrastructure resilient and flexible. Yet, scattered microservices, versioned REST endpoints, and complex database management systems result in slow delivery of features/product development.

GraphQL revolutionized the way organizations build applications. GraphQL, open-sourced by Facebook in 2015, helps engineering teams integrate their array of REST APIs and microservices into a unified schema that frontend developers can query, fetching only the data required to power an experience while being agnostic to the data source. Traditional REST APIs lead to under or over-fetching data.

Fast forward to 2022, and the complexity of modern APIs and applications has grown exponentially. Running everything through a single GraphQL server (read: monolith) with multiple teams rapidly contributing changes creates a bottleneck.

What if there was a way for each microservice to have its own graph that could be seamlessly composed into a supergraph? Enter Apollo Federation. With Apollo Federation, you can build a declarative, modular GraphQL architecture.

A supergraph is composed of smaller graphs called subgraphs, each with its own schema. Teams can evolve their subgraphs independently, and their changes will be automatically rolled into the overall supergraph, allowing them to deliver autonomously and incrementally.

Your application data layer (database) is a critical part of your application architecture. Fauna is a database designed with modern applications and GraphQL architecture in mind. Fauna can seamlessly integrate as a subgraph in your Apollo Federation supergraph.

Moreover, Fauna's custom GraphQL resolvers gives the engineers the ability to turn the database into a fully-fledged microservice. You can learn more about Fauna's GraphQL capabilities in the official docs.

Fauna is a database that gives you the ability to form your data from a declarative GraphQL schema while giving you the complete freedom to implement your resolver functions if you have to. The document-relation model of Fauna also makes it flexible for evolving applications. Fauna combines the simplicity of NoSQL, without sacrificing the ability to model complex relationships.

Fauna’s flexibility and GraphQL native API combined with Apollo Federation allows engineers to build robust solutions faster with more flexibility and less code.

Let’s walk through a few different approaches for how to integrate Apollo Federation and Fauna, depending on your needs and existing architecture.

Application architecture

Microservices and Fauna (Traditional subgraphs)

Having a separate database for each of your microservices is a common practice. You can use the Fauna database as your data layer in each microservices. Your services can connect to Fauna with any of the supported drivers.

This is a traditional microservice-based architecture. Each microservice is a subgraph in this case, and you compose these subgraphs into a supergraph using Apollo Federation.

Using Fauna-hosted GraphQL endpoints as subgraphs

Suppose your product is primarily frontend focused (Jamstack or serverless-native) and you are not ready to commit to multiple microservices yet but want separation of concerns in the data layer. In that case, this architecture pattern is for you.

In this pattern, you will ideally have three Fauna databases. Each database has its GraphQL schema. Each of these schemas is then combined into a Federation supergraph.

Hybrid model

In the hybrid model, you combine the two approaches discussed earlier. This is ideal when you are rapidly scaling your product and solutions.

Getting started with Fauna and Apollo Federation 2

Let’s create a federated e-commerce solution using Apollo Federation and Fauna. In this example app, we will combine a Fauna GraphQL subgraph that includes information about shops and products with one from Apollo that provides locations.

You can find the complete code in this repository.

Configure Fauna

Head over to dashboard.fauna.com and create a new database. Create a new GraphQL schema. You can use the following schema.

type Shop {
  name: String!
  description: String!
  coverImg: String!
  products: [Product]! @relation
  ownerID: String!
}

type Product {
  name: String!
  description: String!
  price: Float!
  category: String!
  imageUrl: String
  shop: Shop! @relation
}

type Query {
  products: [Product]
}

Upload the schema to your Fauna database. Select the GraphQL option in your Fauna dashboard then select import schema.

Once you upload the schema your collections in your database will be generated.

Add Records to Your Collection

Next, create some records in Fauna using the GraphQL playground. Run the following mutation to create a new product.

mutation CreateProduct {
  createProduct(
   data: {
    name: "fender stratocaster",
    description: "The world's greatest electric guitar",
    price: 1255,
    imageUrl: "guitar.png",
    category: "Music",
  }
 ) {
   _id
   name
 }
}

Next, create a Shop by running the following mutation.

mutation CreateShop {
  createShop(
   data: {
    ownerID: "1223302094",
    name: "Scarborough Music and Records",
    description: "some music shop",
    coverImg: "example-shop.png"
   }
  ) { _id }
}

Integrate Fauna and Apollo

To integrate Fauna as a subgraph with Apollo Federation, you need the full GraphQL SDL from Fauna. You can download this from the Fauna GraphQL playground. Select schema from the playground and download the schema.

Next, navigate to security section and generate a new server key for your database.

Setting up supergraph

Create a new supergraph-config.yaml file. This file will contain the supergraph specification as well as subgraphs url and schema. Add the following code to your supergraph-config.yaml file.

federation_version: 2
subgraphs:
  fauna:
   routing_url: https://graphql.fauna.com/graphql`
   schema:
     file: ./fauna.graphql
 locations:
   routing_url: https://flyby-locations-sub.herokuapp.com/
   schema:
     subgraph_url: https://flyby-locations-sub.herokuapp.com/

Here, we are federating two subgraphs — one being Fauna and the other is a sample microservice from Apollo.

Run the following command to generate the supergraph

$ rover supergraph compose --config ./supergraph-config.yaml > supergraph.graphql

The previous command composes a supergraph schema from the specified subgraphs. The supergraph schema is saved in the supegraph.graphql file.

Local composition service with Apollo Gateway and Federation

Next, you create a local composition service. Create a new file called index.js and add the following code. This service acts as the gateway to your supergraph.

const { ApolloServer } = require('apollo-server');
const { ApolloGateway, RemoteGraphQLDataSource } = require('@apollo/gateway');
const { readFileSync } = require('fs');

const supergraphSdl = readFileSync('./supergraph.graphql').toString();

class AuthenticatedDataSource extends RemoteGraphQLDataSource {
  willSendRequest({ request, context }) {
    request.http.headers.set('Authorization', context.token);
  }
}

const gateway = new ApolloGateway({
  supergraphSdl,
  buildService({ name, url }) {
    return new AuthenticatedDataSource({ url });
  },
});

const server = new ApolloServer({
  gateway,
  subscriptions: false,
  context: ({ req }) => {
    const token = req.headers.authorization || '';
    return { token };
  },
});

server.listen().then(({ url }) => {
  console.log(`🚀 Gateway ready at ${url}`);
}).catch(err => {console.error(err)});

Make sure to install the required dependencies for this service. Run the following command to install the dependencies.

npm i apollo-server @apollo/gateway --save

Query your federated subgraph

Run the service with node index.js command. Navigate to http://localhost:4000/ in your browser. It will open up Apollo Studio.

You now have a federated graph up and running that uses Fauna as a subgraph. Run the following composed query to make sure everything is working correctly.

query FindProductByID($findProductByIdId: ID!) {
  findProductByID(id: $findProductByIdId) {
    _id
    name
    description
  }
  locations {
    id
    name
  }
 }

In the Variables field you will need to supply a product ID from your Fauna DB:

Once you’ve supplied your variables, make sure you pass in the authorization header. Use the Fauna secret key as the token for our authorization header.Your authorization header should be the following format Bearer fnAEukxxx:

The previous query returns a composed response from Fauna and locations microservice.

If you’d like to continue exploring federation with the subgraphs we created above, you can find the code for this example in this repository.

Conclusion

Combining Apollo Federation and Fauna allows engineers to be flexible, anticipate future API changes, and implement them easily without "breaking changes". In modern application development, engineering time is the most valuable resource. Apollo Federation and Fauna both focus on developer experience, helping engineers to be more productive and ship features faster at scale.

Have questions about using Fauna with Apollo Federation? Join the Fauna community channels and we would be happy to answer any questions you have. If you want to learn more about the Apollo Community forum. For more reference architecture and code examples with Fauna and Apollo, follow fauna labs on github.

Comparing databases for Vercel and Netlify

Shadid Haque — Fri, 12 Aug 2022 20:24:12 +0000

Vercel and Netlify make it easy for developers to build and ship full-stack serverless applications. Both platforms provide features such as serverless edge functions, CDN (content delivery network), build tools, analytics, etc. While building full-stack applications on these platforms, developers have quite a few options for their data layer (database). This article compares the databases commonly used with Vercel and Netlify, so you can make an informed decision when picking a new database for your project.

PlanetScale

PlanetScale is an easy to use MySQL-compatible serverless database. MySQL is easy to get up and running. However, you have to scale up your MySQL instances as your database grows. Database sharding is a common technique that is used to scale MySQL.

Sharding is a scale-out technique in which database tables are partitioned and each partition is hosted on its own RDBMS server. In the case of MySQL, this means that each node is its own MySQL RDBMS, with its own set of data partitions.

PlanetScale uses Vitess sharding to scale up the databases. While Vitess makes it easier to administer database shards, PlanetScale doesn’t actually shard databases automatically, so this is something that needs to be engineered on your own. If you wish to scale your database in a distributed manner – either now or in the future – you need to take this limitation into consideration.

Shards can be complicated to get right. You occasionally have to worry about splitting bits which is complicated. Joins across shards are not easily doable. If you need cross-shard joining, you probably need a data warehouse.

At the moment, PlanetScale appears to provide limited functionality and has focused its key differentiator around its unique branching feature for schema migration. However, some core database features seem to be missing, such as support for foreign key constraints. It also does not have a GraphQL API, and does not have any streaming capabilities.

PlanetScale with edge architecture

One of the primary appeals of Vercel and Netlify is that they have serverless edge support. Edge offering allows you to keep your serverless functions closer to your users.

For instance, let's assume you have a Next.js application deployed on Vercel. A user from Spain tries to access your application. The application will then be served from the nearest location to Spain. Vercel distributes your application worldwide, so your users don't face the added latency.

However, if your database is not distributed, then your edge functions will not be as performant. For instance, if your database server is located in Ney York, USA, and your compute function is in Lisbon, Portugal, it will add a significant delay. Ideally, you need a database that is also distributed globally to reduce latency.

To learn more about edge vs serverless performance and what role databases play in the architecture refer to this video.

Since PlanetScale is not globally distributed, it might have some performance drawbacks. However, PlanetScale does offer multiple regions, and you can manually architect your application to fetch data from the nearest region.

If you are building an application that requires very low latency and strong consistency across multiple regions, PlanetScale might not be a solid choice.

Pros	Cons
MySQL compatible (easy for MySQL users)	Not a distributed database
Scales horizontally using Vitess sharding	Doesn’t shard automatically
Branching mechanism	No foreign key constraints
Relational data modeling	No realtime API
	No GraphQL support out of box

MongoDB (MongoDB Atlas)

Another popular choice is MongoDB. MongoDB is a NoSQL database with optional schemas. MongoDB is flexible and suitable for both structured and unstructured data. Mongo Atlas provides managed instances of the Mongo database. Mongo saves data in JSON format.

Assessing the performance of two different database systems is very difficult since both systems approach the task of data storage and retrieval in entirely different ways. MongoDB is also optimized for write performance. Due to its document-oriented nature and prioritizing speed over transaction safety, MongoDB usually outperforms traditional relational databases.

Unlike a relational database, MongoDB doesn’t support foreign key joins. Because of this modeling your data relationships can be tricky with Mongo. There are other ways to get around this problem in MongoDB. Review this thread to learn more about data modeling in MongoDB.

You create indexes in MongoDB to execute queries and access data efficiently. Without indexes, you must perform a collection scan in MongoDB. If your indexing is incorrectly implemented or has any discrepancies or other errors, it negatively impacts the speed and performance of MongoDB.

MongoDB Atlas supports GraphQL. You can also use change streams to implement real time functionality.

One limitation MongoDB is that it is not transactional. If your application requires transactional data MongoDB might not be the right fit. Incorrect or complex indexing coupled with lack of structured relationship can lead to data corruption in MongoDB if not careful.

MongoDB Atlas with edge architecture

MongoDB Atlas offers serverless instances of MongoDB; however this is not distributed. Meanwhile, the managed service (provisioned) Atlas offering support global replication of your data out of the box.

If you want to use your edge architecture to its full potential, you have to replicate data manually and have your database servers located close to your edge servers. Again this can be challenging.

he provisioned version of MongoDB Atlas also requires TCP/IP to connect with edge functions, which is incongruent with edge/serverless functions that are ephemeral in nature (as you’ll have to maintain connection pools with MongoDB even when the function isn’t being called.

If your application doesn't require a transactional database, out-of-box multi-region replication mechanism, and you don’t require complex RDBMS like data modeling, then go with MongoDB.

Pros	Cons
Flexible, easy to use query expression	Need to manage connection pooling
Reliable and easy to scale	Performance costs with distributed transactions
GraphQL support through MongoDB Atlas	Mongo has a hard limit of 16MB per document
More performant than any relational database	Atlas is (or can be) globally distributed, but you need to manage clusters and shard keys

Fauna

Fauna is a distributed document-relational database delivered as a cloud API. Fauna combines the best of both SQL and NoSQL. With Fauna, you get the flexibility of a NoSQL database and a SQL database's relational data modeling capabilities.

Fauna also has user-defined functions (UDFs) features which allow you to compute on your data and reduce the round trip to your database. Learn more about Fauna’s UDFs here.

On top of everything Fauna gives you a native GraphQL API to query your database. You get the ability to define your database as a GraphQL schema. You can update and merge the GraphQL schema as your application data evolves without breaking anything.

You also have the capability to build real-time applications with Fauna's streams API.

At its core, Fauna uses a proprietary query language called FQL (Fauna Query Language).

Tip

Fauna is natively integrated with Vercel and Netlify

These integrations make it easy to use Fauna as the database for your sites and functions.

Fauna and edge architectures

Fauna was built for modern applications. It requires zero configuration and management. Fauna is strongly consistent, serverless, and globally distributed. And because Fauna is globally distributed, your data is automatically replicated and placed closest to your edge servers.

Fauna is designed to take full advantage of the edge architecture and ensures that your users get the data from the nearest location. Fauna can be accessed through an HTTP call, and unlike MongoDB and some other NoSQL databases, it doesn’t directly rely on underlying TCP/IP for connection.

If you want the flexibility and performance of NoSQL with the reliability, data modeling, and strong consistency of SQL, then Fauna is the appropriate database for you.

Fauna's flexible document-relational data modeling (as it combines the best of SQL and NoSQL) makes it a smooth developer experience. Developers also have the option to choose either a driver or GraphQL API to query their database, which in turn makes developers more productive.

When you build on platforms like Netlify or Vercel, you focus on your code and delivering features fast without thinking about the servers, latency, or scaling up; these platforms take care of everything. Fauna follows the same philosophy. You spin up your database, connect your application, and everything else (i.e., scaling up, global distribution of data, region groups, replication) is taken care of by Fauna.

Pros	Cons
Document-relational database (Combines the flexibility and performance of NoSQL with the reliability of SQL)	Fauna Query Language is new and requires some time to get used to
Serverless and distributed
Auto scales (Pay per usage)
Allows compute on data with UDFs
Strong consistency
GraphQL support
Real time API support with streams

Final words

Platforms like Vercel and Netlify enable developers to quickly build applications and solutions while simultaneously improving the developer experience. These platforms abstract away server management, scaling, and infrastructure so you and your engineering team can focus on shipping features and writing code. The data layer is critical in developing, launching, and scaling a successful product, so why not choose a database that is also built with the philosophy of serverless edge architecture? You can signup for a free instance (no credit card required) of Fauna here and start building today. I hope this article helps you make an informed decision on your choice of a database while building with Vercel or Netlify.

Forem: Shadid Haque

[Boost]

How to build MCP servers with TypeScript SDK

How to build MCP servers with TypeScript SDK

MCP in Layman's term

You first MCP server

Provide custom data to LLM using Resources

Configuring Claude desktop client

Debugging MCP servers

Execute functions using MCP Tools

Prompt template

Where to go from here?

What is a Bloom Filter and What are they used for?

What is a Bloom Filter?

How does it work?

Use cases of Bloom Filters?

Key reasons Bloom filters are used:

JavaScript implementation of a Bloom Filter

Demystifying the `this` keyword in JavaScript

What is this ?

this and the strict mode in Node

How does this behave inside regular functions and arrow functions?

How does this work in es6 class context?

Final words

I created a free course on Next.js

Embarking on a Self-Taught Machine Learning Journey: From Software Engineer to ML Engineer

Parametric Polymorphism in TypeScript and how it can help you to write better code

Parametric Polymorphism

DynamoDB pain points: How to address them and exploring possible alternatives

Limited querying capabilities

Challenges of multi-region data replication

DynamoDB global tables do not provide fault-tolerant support by default

Storage limitations

Building scalable applications on DynamoDB

Limited ability to perform advanced analytics

Conclusion

Building a full stack app with Deno Fresh and Fauna

Building a full stack app with Deno Fresh and Fauna

Pre-requisites

Creating a Fresh App

Creating a Navbar and application layout

Creating new routes (New Post page)

Dynamic routes (View Post page and Edit Post page)

Adding Fauna database to the project

Configuring the Database

Setting up user registration

User Login

Adding CRUD for Posts

Showing a list of posts

Viewing a single post

Deleting a post

Final thoughts

Building an edge serverless GraphQL backend with Cloudflare Workers and Fauna

What is edge serverless?

Why use Fauna as the database?

Prerequisites

Scaffolding a new Cloudflare Workers project

Setting up a GraphQL server in Cloudflare Workers

Creating a Fauna database

Implementing resolvers

Add post (Mutation)

Update and delete post (Mutation)

Get post and post list (Query)

Implementing subscription

Where to go from here

Building scalable solutions with Apollo Federation and Fauna

Challenges of modern application development and how to solve it

Application architecture

Microservices and Fauna (Traditional subgraphs)

Using Fauna-hosted GraphQL endpoints as subgraphs

Hybrid model

Getting started with Fauna and Apollo Federation 2

Configure Fauna

Add Records to Your Collection

Integrate Fauna and Apollo

Setting up supergraph

Local composition service with Apollo Gateway and Federation

Query your federated subgraph

Conclusion

Comparing databases for Vercel and Netlify

What is `this` ?

`this` and the `strict` mode in Node

How does `this` behave inside regular functions and arrow functions?

How does `this` work in es6 class context?