This is the code inside the page.tsx (i.e app/page.tsx):

import { client } from "@/GraphQL/apollo-client";
import { fetchJobs } from "@/GraphQL/queries";
import Jobs from "@/components/jobs";
import React from "react";

export async function getServerSideProps() {
  const { data } = await client.query({ query: fetchJobs });
  const jobs = data?.jobs || [];

  return { props: { jobs } };
}

const page = ({ jobs }) => {
  console.log(jobs);
  return (
    <div>
      <Jobs jobs={jobs} />
    </div>
  );
};

export default page;

This is the code in Jobs component (i.e components/jobs.tsx):

import React from "react";
import { client } from "@/GraphQL/apollo-client";
import { fetchJobs } from "@/GraphQL/queries";
import { useSuspenseQuery } from "@apollo/client";

const Jobs = ({ jobs }) => {
  console.log({ jobs });

  return <div>jobs</div>;
};

export default Jobs;

Here im getting a error like below:

Failed to compile
× "getServerSideProps" is not supported in app/.

Then how to make a graphql request in server component in Nextjs?

I tried creating pages folder in the root directory and inside that i created a jobs folder and index.tsx file inside it (i.e rootdirectory/pages/jobs/index.js):

import { client } from "@/GraphQL/apollo-client";
import { fetchJobs } from "@/GraphQL/queries";

const Test = () => {
  return <div>page</div>;
};

export default Test;

export async function getServerSideProps() {
  const { data } = await client.query({
    query: fetchJobs,
  });

  console.log("HEY", data);

  return {
    props: {
      data,
    },
  };
}

But here im not able to navigate to that jobs pages itself, getting 404 This page could not be found error

i also tried making a request inside Jobs component itself but here the getServerSideProps function is not getting executed and im not getting the “first” console.

const Jobs = () => {
  return <div>jobs</div>;
};

export default Jobs;

export async function getServerSideProps() {
  const { data } = await client.query({ query: fetchJobs });
  const jobs = data?.jobs || [];
  console.log("first");

  return { props: { jobs } };
}