DEV Community: Zende Aditya

What is GraphQL - Day 3 Of #100DaysOfFullStackChallnege

Zende Aditya — Mon, 05 Aug 2024 17:12:57 +0000

Today's blog is about a graphql. what is graphql? why it is so popular? And How to use Next.js.

Let's understand what is graphql.

Graphql is an open-source alternative to REST APIs. Graphql has been created and maintained by Facebook since 2012.

GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. It provides a more efficient, powerful, and flexible alternative to REST.

What is the exact problem how does graphql solve it?

Imagine you are working on a recipe-sharing project and you want to display an image, title, and author name on the recipe card. Traditionally, when you hit the API request to get the data, it might fetch all the data related to the recipe, including unused fields like detailed instructions, ingredients, and timestamps. This leads to over-fetching, where more data than necessary is retrieved, making the application slower and less efficient.

Here, GraphQL comes into the picture and solves this problem. With GraphQL, you can specify exactly which fields you want to retrieve in your query. This gives you the freedom to fetch only the required data, improving efficiency and performance.

Let's see how graphql solves this problem and what is the syntax of graphql Before that let's understand some of the key concepts of graphql.

Here is the list of common concepts in Graphql

Schema: Defines the structure of your data and the queries/mutations you can perform.

Query: Used to fetch data.

Mutation: Used to modify data

Resolver: Functions that resolve a value for a type or field in the schema.

Types: Define the shape of data (e.g., Recipe, Author).

To understand the graphql concepts better I created a project Recipe Haven 🍲

Where you can list the recipe you want and you can read, update, create, and delete the recipe. you can perform the total Recipe Haven 🍲 operations.

Here is the project structure,

So, here is the schema I defined for this project


import { pgTable, serial, text, timestamp, integer, date, pgTableCreator, pgEnum } from "drizzle-orm/pg-core";
import { InferInsertModel } from "drizzle-orm"

export const createTable = pgTableCreator(
    (name) => `nomad_competition_${name}`,
);
export const MealTypeEnum = pgEnum('meal_type', ['breakfast', 'lunch', 'dinner', 'dessert']);

export const recipeTable = pgTable("recipes", {
    id: serial("id").primaryKey(),
    name: text("name").notNull(),
    description: text("description").notNull(),  
    instructions: text("instructions").notNull(),
    createdAt: date("created_at").notNull().defaultNow(),
    category: text("category")  
});

export const categoriesTable = pgTable("categories", {
    id: serial("id").primaryKey(),
    type: MealTypeEnum("type").notNull()
});

export const recipeCategoriesTable = pgTable("recipe_categories", {
    id: serial("id").primaryKey(),
    recipeId: integer("recipe_id").references(() => recipeTable.id),
    categoryId: integer("category_id").references(() => categoriesTable.id),
});

export type RecipeTable = InferInsertModel<typeof recipeTable>;
export type CategoriesTable = InferInsertModel<typeof categoriesTable>;
export type RecipeCategoriesTable = InferInsertModel<typeof recipeCategoriesTable>;

So I created three tables for this project.

I created a different folder to store all the files related a graphql

Let's go through each file and understand the code.

First, let's see the code to set up a graphql server with an Apollo server. Inside the src/app a folder, I created another folder graphql you can name whatever you want. inside the graphql folder create a file name route.ts.


import { ApolloServer, } from "@apollo/server";
import { startServerAndCreateNextHandler } from '@as-integrations/next';
import { typeDefs } from "../../../../graphql/typeDef";
import { resolvers } from "../../../../graphql/resolvers";

const server = new ApolloServer({ typeDefs, resolvers });

const handler = startServerAndCreateNextHandler(server);

export { handler as GET, handler as POST };

In this folder, I imported both the typeDefs & resolvers and set up an ApolloServer. you can check out the code above.

What is typeDefs in Graphql?

In GraphQL, typeDefs (short for type definitions) are a crucial part of defining your GraphQL schema. They describe the types of data your GraphQL API can return, the structure of those types, and the available queries and mutations.

Here are important components of TypeDefs

Types: Define the shape of your data.

Queries: Define the read operations.

Mutations: Define the write operations.

Here are the typeDefs defined for our project


import { gql } from "@apollo/client"
export const typeDefs = gql`
    type Recipe {
        id: ID!
        name: String
        instructions: String
        description: String
        createdAt: String
        category: String
    }

    type Query { 
        getAllRecipes: [Recipe!]
        recipeByName(name: String!): [Recipe!]
        recipesByCategory(category: String!): [Recipe!]
    }

    type Mutation {
        createRecipe(id: ID, name: String, instructions: String, description: String, createdAt: String, category: String): Recipe
        updateRecipe(id: ID, name: String, instructions: String, description: String, createdAt: String, category: String): Recipe
        deleteRecipe(id: ID!): Recipe
    }
`;

gql is used for the syntax highlighting inside the typeDefs. So let me explain what I write for this project.

Types:

Recipe: Represents a recipe with various fields like id, title, image, author, instructions, ingredients, and createdAt.

Queries:

recipeByName(name: String!): Fetches a single recipe by its name.

getAllRecipes: Fetches all recipes.

recipesByCategory: Get recipes by category name.

Mutations:

createRecipe: Creates a new recipe with the specified fields.

updateRecipe: Updates an existing recipe identified by id.

deleteRecipe: Deletes a recipe by id and returns a boolean indicating success.

Mutations are more or less Database functions that perform for the different operations.

Here is the whole code for the mutations :


import { gql } from "@apollo/client"
import { db } from "../lib/db/dbconnect"
import { recipeTable } from "../lib/db/schema"
import { eq } from "drizzle-orm";


export const mutation = {
    createRecipe: async (parent: any, args: any) => {
        const { id, name, instructions, description, createdAt, category } = args;
        if (!instructions) {
            throw new Error("Instructions are required.");
        }
        const newRecipe = await db.insert(recipeTable).values({
            id,
            name,
            instructions,
            description,
            createdAt,
            category,
        }).returning();

        return newRecipe[0];
    },
    updateRecipe: async (parent: any, args: any) => {
        const { id, name, instructions, description, createdAt, category } = args;
        console.log('Updating recipe with ID:', id);
        console.log('New values:', { name, instructions, description, createdAt, category });

        const updatedRecipe = await db.update(recipeTable)
            .set({
                name,
                instructions,
                description,
                createdAt,
                category
            })
            .where(eq(recipeTable.id, id)).returning();

        if (updatedRecipe.length === 0) {
            throw new Error("Recipe not found or no changes made.");
        }

        return updatedRecipe[0];
    },
    deleteRecipe: async (parent: any, args: any) => {
        const { id } = args;
        const deletedRecipe = await db.delete(recipeTable)
            .where(eq(recipeTable.id, id))
            .returning();

        if (deletedRecipe.length === 0) {
            throw new Error("Recipe not found or could not be deleted.");
        }

        return deletedRecipe[0];
    },
}

For this project, I use the Postgres database so the syntax is like that.

Here is a detailed description of what this mutation does:

createRecipe:

Inserts a new recipe into the database with the provided details.

Returns the newly created recipe.

updateRecipe:

Updates an existing recipe in the database based on the given id and new details.

Returns the updated recipe or throws an error if no changes were made.

deleteRecipe:

Deletes a recipe from the database identified by the given id.

Returns the deleted recipe or throws an error if the recipe was not found.

Then let's look at the queries that

import { eq } from "drizzle-orm";
import { db } from "../lib/db/dbconnect";
import { recipeTable } from "../lib/db/schema";


export const queries = {
    getAllRecipes: async () => db.select().from(recipeTable).execute(),

    recipeByName: async (parent: any, args: any) => {
        const { name } = args;
        return db.select().from(recipeTable).where(eq(recipeTable.name, name)).execute();
    },
    recipesByCategory: async (parent: any, args: any) => {
        const { category } = args;
        console.log(category);
        return db.select().from(recipeTable).where(eq(recipeTable.category, category)).execute();
    }
}

Here are concise descriptions for each query:

getAllRecipes:

Fetches all recipes from the database.

Returns an array of recipe objects.

recipeByName:

Fetches recipes from the database that match the provided name.

Returns an array of matching recipe objects.

recipesByCategory:

Fetches recipes from the database that belong to the specified category.

Returns an array of matching recipe objects.

let's look at the resolvers,

import { mutation } from "./mutation";
import { queries } from "./quries";

export const resolvers = {
    Query: {
        ...queries,
    },
    Mutation: {
        ...mutation,
    }
};

For a good project structure, I defined Query & Mutation in different files.

Conclusion

In this tutorial, we've explored how GraphQL can be a powerful tool for optimizing your API interactions by allowing clients to specify exactly what data they need. Using our recipe-sharing project as an example, we saw how to define typeDefs for our schema, implement resolvers for queries and mutations, and handle complex relationships like recipes and their categories.

GraphQL's flexibility and efficiency make it an excellent choice for modern web applications, especially when working with data-intensive projects. By leveraging GraphQL, you can build APIs that are both robust and performant, providing a better experience for both developers and users.

Happy coding! 🚀

What is Docker? - Day 3 Of #100DaysOfFullStackChallnege

Zende Aditya — Thu, 11 Jul 2024 17:27:53 +0000

This Blog is about the basics of Docker.
What is Docker?

So, let's start,
*## What is Docker? *
Docker is a Platform as a Service. (PaaS). The main use case of docker is to containerization of the app.

There are two main components of Docker

Docker Image.
Docker Container.

Docker Image

Docker Image is a stand-alone executable package that contains all of the components required to run a piece of software, including the code, a runtime, libraries, environment variables, and configuration files is called a Docker image.

Docker Container

A Docker Container is a runtime instance of an image. Containers make development and deployment more efficient since they contain all the dependencies and parameters needed for the application it runs completely isolated from the host environment.

How to build a Docker Image

To create a Docker Image you need to create a dockerfile file in your project root directory. Make sure you use the same name and this does not have any extension.

There are several dockerfile commands

1. FROM [:]

Specifies the base image to use for the subsequent instructions. The base image can be any valid Docker image, including OS images like alpine and Ubuntu, or application-specific images like node, python, etc.

This is the command that is executed first before any other commands.

Syntax :
FROM

Example :
FROM node:latest. You can write like FROM node:vesion_you_want.

2. RUN

Executes a command in a new layer on top of the current image and commits the result. Commonly used for installing dependencies.

Syntax :
RUN < Command + ARGS>

Example :
RUN apt-get update && apt-get install -y curl

This command will update the package list and install curl in the image.

3. COPY

This command is used to copy the file or a folder while creating a docker image.

Syntax :
COPY

Example :
COPY . /app

you can write
COPY . .

4. ADD

We can download the files while creating a image

Syntax :
ADD

Example :
ADD https://example.com/file.tar.gz /app/

Downloads a file from the given URL and extracts it into the /app/ directory.

5. WORKDIR

Sets the working directory for any subsequent RUN, CMD, ENTRYPOINT, COPY, and ADD instructions.

Syntax :
WORKDIR

Example :
WORKDIR /src

Changes the working directory to /src

6. CMD

The main purpose of the CMD command is to start the process inside the container and it can be overridden.

Syntax :
CMD ["executable","param1","param2"]

Example :
CMD ["node", "index.js"]

Specifies that node index.js should be run when a container is started from the image.

This is how dockerfile look like



# Use an official Node.js image as the base image
FROM node:14

# Set environment variables
ENV NODE_ENV=production

# Create and change to the app directory
WORKDIR /usr/src/app

# Copy application dependency manifests to the container image
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the local code to the container image
COPY . .

# Expose the port the app runs on
EXPOSE 3000

# Define the default command to run the app
CMD ["node", "index.js"]

That's all for today!

Thank you for joining me on this journey through the 100 Days Full Stack Challenge. Each day brings new insights, challenges, and opportunities for growth, and I'm thrilled to share every step with you. Your support and feedback mean the world to me, and I'm excited to continue building and learning together. 🚀

Don't forget to follow my progress on my personal website and stay connected on Dev.to, Medium, and Hashnode. Let's keep pushing the boundaries of what's possible in web development! 🌐💻

Until next time, keep coding, keep creating, and keep pushing forward. 💪✨

Exploring the concept of the Typescript - Day 2 Of #100DaysOfFullStackChallnege

Zende Aditya — Sat, 06 Jul 2024 17:58:30 +0000

So, Welcome back everyone 👋
I'm Aditya, and I'm starting a new series for the next 100 days to become an excellent Full-stack Developer.
Today is the Day 2 of my journey. Today I learned about typescript.
Introduction to TypeScript -> TypeScript is nothing but JavaScript with the Types. Let's see what I mean by types. Here is a short example to start with.

1. Types In Ts

1. String type in ts Let's define string in javascript

let language = "typescript";

and if we console this it will give output

typescript

here typescript gives you an extra edge in that you can define type something like

let language:string = "typescript";

so the language variable only stores the string data type into it.
It helps to reduce runtime errors and make code more readable.

It is okay that you can write

let language = 10;

so JavaScript gives you an output

but in typescript, if you mention the variable type in this case it is string you cannot assign different data type values. You have to assign a string in this case.

here is another example that shows you how typescripts work
If you create a simple object in javascript,

const user = {
    name:"aditya",
    age:21,
}

now if you access the property that does not exist in the user object javascript will return you an undefined

//js code
console.log(user.location) //undefined

but in the case of typescripts, you get an error

Property 'location' does not exist on type '{ name: string; age: number; }'.

2. number type in ts.

same as string, you can declare the variable that can only store the number and not other data types than numbers. e.g

const age:number = 20;

in the variable age, you can't store the data type other than a number.

you can use all javascript primitives data types like this.

Let's move to another important concept of typescript that I learned today
3. Array
Let's talk about how to declare an array in ts.

here is how do we declare an array in js

const arr= [1,,2,3,4,5,"aditya"];

you can store any data inside the array in js but when it comes to typescript it restricts to store of the data other than you write with : notation.

For example

const arr:number[]= [1,,2,3,4,5,"aditya"];
console.log(arr);

I write string inside number array so typescript is telling me that Type 'string' is not assignable to type 'number'. You have to write numbers and If you want to store data of different data types like numbers and string what you can do is you can use something called Union Type. In this type, you can two or more data types by separating them using the pipe symbol |.
For the above example, we can write typescript code as

const arr: (number | string)[] = [1, 2, 3, 4, 5, "aditya", 'string'];
console.log(arr);

This way you can store numbers and strings in the same array.

2. Type Aliases

TypeScript's type aliases allow you to create a new name for a type. This can be useful for simplifying complex type definitions and improving code readability. You can create type aliases for various types including primitive types, union types, object types, and more.

Let's see what is type aliases with some examples,
Suppose you want to define an object with some property inside it like we mentioned above

const user = {
    name:"aditya",
    age:21,
}

so what you can do is you can define a type alias for the whole object.
To define the type alias you have to use the keyword type.

type User= {
  name: string;
  age: number;
};

and then you can assign it to an object like

const user:User = {
    name:"aditya",
    age:21,
}

You can use type alliance with string, number, booleans, object, array, and functions.

if you want to make any value optional then you can use ? to make it optional
for example, you want to make age an optional parameter so what you can do is that

type User= {
  name: string;
  age?: number;
};

3. Interface
In TypeScript, interfaces are a powerful way to define the structure of objects. They provide a way to define the shape of an object, including the types of its properties and the functions it can contain. Interfaces are especially useful for defining complex types and ensuring type safety in your code.

interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: "Aditya",
  age: 21,
};

Don't forget to follow my progress on my personal website and stay connected on Dev.to, Medium, and Hashnode. Let's keep pushing the boundaries of what's possible in web development! 🌐💻

Until next time, keep coding, keep creating, and keep pushing forward. 💪✨

Basic Of Javascript - Day 1 of #100DaysOfFullStackChallnege

Zende Aditya — Fri, 05 Jul 2024 17:35:59 +0000

So, Welcome back everyone 👋
I'm Aditya, and I'm starting a new series for the next 100 days to become an excellent Full-stack Developer.
Today is Day 1 of my journey. Today I revised the basic yet important concept in javascript.
Today I started with revising array, string, and object in javascript.
so whatever I learned today I want to share with you let's start

I started the revision with Objects in js.

## 1. Objects

So, an Object is nothing but a container that contains different types of values.
Here is the syntax of Object. There are mainly two types of Objects syntax

let obj = new Object();

this is the one way to create an object and the second and simple syntax is

let blogDetails = {
   author: "aditya",
   age: 21,
   blogsWriteOn : ["Dev.to", "Medium.com", "Hashnode.com"],
   location: "Pune"
}

this way you can create an object.
In the object, we store the data in the key: value pairs, we can store any type of data in an object.

Accessing the data from an object.

Using (.) notation:

let authorLocation = blogDetails.location; // Pune

Using ([]) notation:

let authorName = blogDetails['author']; // aditya

2. Arrays

Arrays -> It is used to store multiple items using one variable name.
In JavaScript, the array is resizable & can contain different types of data.
Here is what resizable means,
suppose the array is like this:

let fruits = ["apple", "orange", "banana", "pineapple"];

There are a total 4 elements in the array and if you push one element like

fruits[5] = "grapes";

This will be acceptable In js if we console this the output will remember that we skip the 4th index. but this still works.

[ 'apple', 'orange', 'banana', 'pineapple', <1 empty item>, 'grapes' ]

Array Methods:
There are almost 46 array methods for the array. We are discussing some but the important methods of array here!

To understand this method better way we are going to learn with example

let numbersArray = [1, 2, 3, 4, 5,6,7,8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18];

Array.at() This method is used to access a particular element from the array with the help of its index. Keep in mind that the index of the array starts with 0 not with 1.

If we want to access the element at index 0, we can write like

console.log(numbersArray.at(0)); // 1

If we want to access the last element of the array we can take the help of length property to get the total length of the array.
In this case numbersArray.length will output 18.
To access the last element

console.log(numbersArray[numbersArray.length-1]); // 18.

Array.concat() This method is used to combine two arrays into a single array. Here is simple example to demonstrate this

let numbersArray = [1, 2, 3, 4, 5,6,7,8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18];
let lettersArray = ["a", "b", "c", "d", "e", "f"];

The output of the above code is

console.log(numbersArray.concat(lettersArray)); 
// [1, 2, 3, 4, 5, 'a', 'b', 'c', 'd', 'e', 'f']

Array.filter() This method is used to filter the array element on certain conditions that you write as a callback function. For example, if you want to print all the event numbers from the array so you can write

let evennumbers = numbersArray.filter((num)=> num % 2 === 0);

the output will be

[2,  4,  6, 8, 10, 12, 14, 16, 18]

another example with object

// Filter on an array of  objects
const students = [
  { name: "aditya", age: 21, mark: 80 },
  { name: "rator", age: 19, mark: 89 },
  { name: "kevin", age: 22, mark: 38 },
  { name: "atharva", age: 18, mark: 80 },
  { name: "random", age: 25, mark: 80 },
];

and the output is

const eligible = students.filter((std)=> std.age>20 && std.mark>50);
console.log(eligible); 
// [ { name: 'aditya', age: 21, mark: 80 }, { name: 'random', age: 25, mark: 80 }]

The filter function takes two parameters

callbackFun
thisArg

callbackFun - is a simple function that you provide the perform certain tasks.
thisArg - This is an optional parameter. A value to use as this when executing callbackFn.

filter returns the shallow copy of the original array after performing the callback function.

Array.forEach() This method executes the callback function on each element of the array Here is example of forEach

let numbersArray = [1, 2, 3, 4, 5];

numbersArray.forEach((num , idx)=>{
  console.log(`The number at index ${idx} is ${num}`);
})

and the output will be

The number at index 0 is 1
The number at index 1 is 2
The number at index 2 is 3
The number at index 3 is 4
The number at index 4 is 5

Array.map() This is the method of array creates a new array populated with the results of calling a provided function on every element in the calling array.

the example of map is

let mapfun = numbersArray.map((num)=>num*2);

and the output is

[ 2, 4, 6, 8, 10 ]

Preparing for the 100 Days Full Stack Challenge: Goals, Plan, and Expectations

Zende Aditya — Thu, 04 Jul 2024 12:19:19 +0000

Hello developers 👋,

I’m Aditya Zende, a Full Stack Developer from Pune, India. Tomorrow I’m taking on the #100DaysOfFullStackChallenge to improve my full-stack skills and become job-ready in the next 100 days 🚀.

My Goals 🎯

Improve my coding skills 🧑‍💻 and create outstanding full-stack projects.
Build and deploy at least three full-stack projects.
Master Framer Motion for animation purposes.

My Tech Stack 🛠️

Framework: Next.js
CSS Libraries: TailwindCSS & Bootstrap
Components Libraries: Shadcn UI & Acernity UI
Database: MongoDB, PostgreSQL
Dev Tools: Git, VS Code, GitHub

My Plan 📅

I plan to become an outstanding full-stack developer in the next 100 days. Here’s a short overview of my journey:

Days 1-10

Deep dive into the basics of JS and Next.js (I already know React.js) and the frontend part.

Days 11-20

Explore the basics of backend development with Node.js, MongoDB, and PostgreSQL.

Days 21-30

Create basic and responsive frontend projects.

Days 31-40

Learn about DevOps and write code for backend projects.

Days 41-50

Dive into React-Redux and state management in React.

Days 51-60

Start creating full-stack projects.

Days 61-70

Explore new technologies like Cloud, Kafka, and other full-stack tools.

Days 71-80

Build a SaaS project for practice purposes.

Days 81-90

Learn about authentication and authorization technologies.

Days 91-100

Build a proper portfolio site.

Suggestions Welcome! 💬

Add your suggestions to improve my journey. What should I follow or avoid?

Thanks for reading! Follow my journey on Dev.to and check out my GitHub for project updates.

Open Source of Beginners

Zende Aditya — Fri, 27 Jan 2023 14:07:20 +0000

Find an open-source project that interests you: There are many open-source projects available on platforms like GitHub, GitLab, and SourceForge. Look for a project that aligns with your skills and interests.

Review the project's contributing guidelines: Most open-source projects have a set of guidelines for contributing. Make sure to read and understand these guidelines before you start working on the project.

Fork the project: A "fork" is a copy of the original project that you can work on. To create a fork, navigate to the project's main page on the platform and click the "Fork" button.

Clone the fork to your local machine: Use Git to clone the fork to your local machine. This will create a local copy of the project on your computer.

Create a new branch: Before making any changes to the code, it's a good practice to create a new branch. This allows you to work on your changes without affecting the main project.

Make your changes: Now you can start making your changes to the code. Make sure to follow the project's contributing guidelines and best practices.

Commit your changes: Use Git to commit your changes to the local copy of the project.

Push your changes to the fork: Use Git to push your changes to the fork on the platform.

Create a pull request: A pull request is a request to merge your changes into the main project. To create a pull request, navigate to the fork on the platform and click the "New pull request" button.

Review and merge: The maintainers of the project will review your pull request and merge it if it meets their standards.

Please note that, these steps may vary depending on the project and platform, it's always good to read the documentation of the project before contributing.