Full Page Next JS, Node js, Mongodb, Express, GraphQL Example

import { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
    title: "Recent Jobs for IT in Bangalore",
    description: "IT Jobs in Bangalore for fresher and experience",
    keywords: "java jobs, php jojs, python jobs, react jobs"
};

const Jobs = async () => {
    type JobType = {
        id: string,
        title: string,
        city: string,
        salary: string,
        details: string,
        url : string
    }

    type ResponseTye = {
        data: {
            joblist: JobType[]
        }
    }
    const url = "http://localhost:1111/graphql";
    const postData = {
        headers: { 'Content-Type': 'application/json' },
        method: "post",
        body: JSON.stringify({ query: " { joblist {id title salary city details url} } " }),
        next: {
      revalidate: 60, // 5 minutes
    },
    }
    const response = await fetch(url, postData);
    const result: ResponseTye = await response.json();
    return (
        <section>
            <h1> Open Jobs : {result.data.joblist.length} </h1>
            <div className="job-list">
                {
                    result.data.joblist.map(job => {
                        return (
                            <div className="job-card" key={job.id}>
                                <div className="job-title1">
                                    <Link href={`/jobs/${job.url}`}> {job.title} </Link>
                                </div>

                                <div className="job-meta">
                                    <span>📍 {job.city}</span>
                                    <span>💰 ₹{job.salary} LPA</span>
                                </div>

                                <div className="job-details">
                                    {job.details}
                                </div>

                                <button className="apply-btn1">
                                    Apply Now
                                </button>
                            </div>
                        )
                    })
                }
            </div>
        </section>
    )
}
export default Jobs;




============ API Backend ========

import express from "express";
import cors from "cors";
import mongoose, { mongo } from "mongoose";
import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@as-integrations/express5";

const app = express();
app.use(cors());
app.use(express.json());

await mongoose.connect("mongodb://127.0.0.1:27017/graphql_demo");
console.log("MongoDB connected");

const ServiceSchema = mongoose.Schema({
    name: String
});

const UserSchema = mongoose.Schema({
    name: String,
    email: String
})

const ProductSchema = mongoose.Schema({
    name: String,
    price: Number,
    qty: Number,
    photo: String,
    details: String
})

const JobSchema = mongoose.Schema({
    title: String,
    salary: String,
    city: String,
    details: String,
    url : String
})

const Service = mongoose.model("service", ServiceSchema);
const User = mongoose.model("user", UserSchema);
const Product = mongoose.model("Product", ProductSchema);
const Job = mongoose.model("job", JobSchema);

const defType = `
    type Service {
     id : ID!
     name : String! 
    }

    type User {
        id: ID!
        name:String
        email:String
    }

    type Product {
        id : ID!
        name : String!
        price : Int!
        qty : Int!
        photo : String!
        details : String!
    }

    type Job {
        id : ID!
        title: String!
        salary: String!
        city: String!
        details: String!
        url : String!
    }

    type Query {
     services : [Service]
     userlist : [User]
     productlist : [Product]
     joblist : [Job]
     jobdetails(url: String!): Job
    }

    type Mutation {
        addService(name : String!) : Service
    }
`;



const resolvers = {
    Query: {
        services: async () => {
            return await Service.find();
        },
        userlist: async () => {
            return await User.find();
        },
        productlist : async () =>{
            return await Product.find();
        },
        joblist : async () => {
            return await Job.find();
        },
        jobdetails : async (_, args) => {
            return await Job.findOne({"url":args.url});
        }

    },

    Mutation: {
        addService: async (_, args) => {
            const newService = new Service({
                name: args.name
            });

            await newService.save();
            return newService;
        }
    }
};


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

await server.start();

app.use(
    "/graphql",
    expressMiddleware(server)
);



app.listen(1111, function () {
    console.log("Server is Live on : http://localhost:1111/graphql");
});