Upgrade to next 15 and react 19

app/[locale]/(user)/components/Content.tsx

@@ -34,10 +34,15 @@ const statsInfo: any = graphql(`
 
 export const Content = () => {
   const router = useRouter();
-  const Stats: { data: any; isLoading: any } = useQuery([`statsDetails`], () =>
-    GraphQL(statsInfo, {}, [])
-  );
-  // const Tags: { data: any; isLoading: any } = useQuery([`tagDetails`], () =>
+  const Stats: { data: any; isPending: any } = useQuery({
+    queryKey: [`statsDetails`],
+    queryFn: () =>
+      GraphQL(statsInfo, {}, [])
+  });
+  // const Tags: { data: any; isLoading: any } = useQuery({
+  //   queryKey: [`tagDetails`],
+  //   queryFn: (
+  // }) =>
   //   GraphQL(tagsInfo, {}, [])
   // );
 
@@ -93,7 +98,7 @@ export const Content = () => {
               collaborative platform for data changemakers.
             </Text>
           </div>
-          {Stats.isLoading ? (
+          {Stats.isPending ? (
             <div className=" flex w-fit justify-center rounded-2 bg-surfaceDefault p-4">
               <Spinner />
             </div>

app/[locale]/(user)/components/UseCases.tsx

@@ -77,19 +77,21 @@ const useCasesListDoc: any = graphql(`
 const UseCasesListingPage = () => {
   const getUseCasesList: {
     data: any;
-    isLoading: boolean;
+    isPending: boolean;
     error: any;
     isError: boolean;
-  } = useQuery([`useCases_list`], () =>
-    GraphQL(
-      useCasesListDoc,
-      {},
-      {
-        filters: { status: 'PUBLISHED' },
-        pagination: { limit: 6 },
-      }
-    )
-  );
+  } = useQuery({
+    queryKey: [`useCases_list`],
+    queryFn: () =>
+      GraphQL(
+        useCasesListDoc,
+        {},
+        {
+          filters: { status: 'PUBLISHED' },
+          pagination: { limit: 6 },
+        }
+      )
+  });
   const router = useRouter();
 
   return (
@@ -120,7 +122,7 @@ const UseCasesListingPage = () => {
         <Carousel className="flex w-full justify-between">
           <CarouselPrevious />
 
-          {getUseCasesList.isLoading ? (
+          {getUseCasesList.isPending ? (
             <div className="p-8">
               <Spinner />
             </div>

app/[locale]/(user)/datasets/[datasetIdentifier]/DatasetDetailsPage.tsx

@@ -74,10 +74,10 @@ export default function DatasetDetailsPage({
 }: {
   datasetId: string;
 }) {
-  const Datasetdetails: { data: any; isLoading: any } = useQuery(
-    [`details_${datasetId}`],
-    () => GraphQL(datasetQuery, {}, { datasetId: datasetId })
-  );
+  const Datasetdetails: { data: any; isPending: boolean } = useQuery({
+    queryKey: [`details_${datasetId}`],
+    queryFn: () => GraphQL(datasetQuery, {}, { datasetId: datasetId }),
+  });
 
   const jsonLd = generateJsonLd({
     '@context': 'https://schema.org',
@@ -105,22 +105,22 @@ export default function DatasetDetailsPage({
         />
         <div className="flex">
           <div className="w-full gap-10 border-r-2 border-solid border-greyExtralight p-6 lg:w-3/4 lg:p-10">
-            {Datasetdetails.isLoading ? (
+            {Datasetdetails.isPending ? (
               <div className=" mt-8 flex justify-center">
                 <Spinner />
               </div>
             ) : (
               <PrimaryData
                 data={Datasetdetails?.data?.getDataset}
-                isLoading={Datasetdetails.isLoading}
+                isLoading={Datasetdetails.isPending}
               />
             )}
             <Details />
             <Resources />
             <SimilarDatasets />
           </div>
           <div className=" hidden  w-1/4 gap-10 px-7 py-10 lg:block">
-            {Datasetdetails.isLoading ? (
+            {Datasetdetails.isPending ? (
               <div className=" mt-8 flex justify-center">
                 <Spinner />
               </div>

app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx

@@ -120,8 +120,10 @@ const AccessModels = () => {
   const getAccessModeldetails: {
     data: any;
     isError: boolean;
-    isLoading: boolean;
-  } = useQuery([`accessmodel_${params.datasetIdentifier}`], () =>
+    isPending: boolean;
+  } = useQuery({
+    queryKey: [`accessmodel_${params.datasetIdentifier}`],
+    queryFn: () =>
     GraphQL(
       accessModelResourcesQuery,
       {
@@ -131,11 +133,11 @@ const AccessModels = () => {
         datasetId: params.datasetIdentifier,
       }
     )
-  );
+  });
 
   return (
     <>
-      {getAccessModeldetails.isLoading ? (
+      {getAccessModeldetails.isPending ? (
         <div className=" mt-8 flex justify-center">
           <Spinner />
         </div>

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Details/index.tsx

@@ -53,10 +53,10 @@ const Details: React.FC = () => {
   const params = useParams();
   const chartRef = useRef<ReactECharts>(null);
 
-  const { data, isLoading }: { data: any; isLoading: any } = useQuery(
-    [`chartDetails_${params.id}`],
-    () => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier })
-  );
+  const { data, isLoading }: { data: any; isLoading: any } = useQuery({
+    queryKey: [`chartDetails_${params.id}`],
+    queryFn: () => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier })
+  });
 
   const renderChart = (item: any) => {
     if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx

@@ -54,17 +54,17 @@ const datasetResourceQuery: any = graphql(`
 const Resources = () => {
   const params = useParams();
 
-  const getResourceDetails: { data: any; isLoading: boolean } = useQuery(
-    [`resources_${params.datasetIdentifier}`],
-    () =>
+  const getResourceDetails: { data: any; isPending: boolean } = useQuery({
+    queryKey: [`resources_${params.datasetIdentifier}`],
+    queryFn: () =>
       GraphQL(
         datasetResourceQuery,
         {
           // Entity Headers if present
         },
         { datasetId: params.datasetIdentifier }
       )
-  );
+    });
 
   const generateColumnData = () => {
     return [
@@ -204,7 +204,7 @@ const Resources = () => {
   };
   return (
     <div>
-      {getResourceDetails.isLoading ? (
+      {getResourceDetails.isPending ? (
         <div className="mt-8 flex justify-center">
           <Spinner />
         </div>

app/[locale]/(user)/datasets/[datasetIdentifier]/components/SimilarDatasets/index.tsx

@@ -78,21 +78,21 @@ const similarDatasetQuery: any = graphql(`
 const SimilarDatasets: React.FC = () => {
   const params = useParams();
 
-  const SimilatDatasetdetails: { data: any; isLoading: any } = useQuery(
-    [`similar_datasets_${params.datasetIdentifier}`],
-    () =>
+  const SimilatDatasetdetails: { data: any; isPending: any } = useQuery({
+    queryKey: [`similar_datasets_${params.datasetIdentifier}`],
+    queryFn: () =>
       GraphQL(
         similarDatasetQuery,
         {
           // Entity Headers if present
         },
         { datasetId: params.datasetIdentifier }
       )
-  );
+    });
 
   return (
     <div className="py-4 md:py-10 lg:py-10">
-      {SimilatDatasetdetails.isLoading ? (
+      {SimilatDatasetdetails.isPending ? (
         <div className=" mt-8 flex justify-center">
           <Spinner />
         </div>

app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx

@@ -18,11 +18,12 @@ const datasetMetaQuery: any = graphql(`
   }
 `);
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { datasetIdentifier: string };
-}) {
+export async function generateMetadata(
+  props: {
+    params: Promise<{ datasetIdentifier: string }>;
+  }
+) {
+  const params = await props.params;
   try {
     const res: any = await GraphQL(
       datasetMetaQuery,
@@ -51,10 +52,11 @@ export async function generateMetadata({
   }
 }
 
-export default function Page({
-  params,
-}: {
-  params: { datasetIdentifier: string };
-}) {
+export default async function Page(
+  props: {
+    params: Promise<{ datasetIdentifier: string }>;
+  }
+) {
+  const params = await props.params;
   return <DatasetDetailsPage datasetId={params.datasetIdentifier} />;
 }

app/[locale]/(user)/publishers/PublishersListingClient.tsx

@@ -45,12 +45,13 @@ const PublishersListingPage = () => {
   const [type, setType] = useState<'all' | 'org' | 'pub'>('all');
   const Details: {
     data: any;
-    isLoading: boolean;
+    isPending: boolean;
     isError: boolean;
     refetch: any;
-  } = useQuery(['publishers_list_page'], () =>
-    GraphQL(getAllPublishers, {}, [])
-  );
+  } = useQuery({
+    queryKey: ['publishers_list_page'],
+    queryFn: () => GraphQL(getAllPublishers, {}, []),
+  });
 
   type PublisherType = 'all' | 'org' | 'pub';
   const publisherButtons: { key: PublisherType; label: string }[] = [
@@ -170,7 +171,7 @@ const PublishersListingPage = () => {
                     </div>
                   </ButtonGroup>
                 </div>
-                {Details.isLoading ? (
+                {Details.isPending ? (
                   <div className="m-4 flex justify-center">
                     <Spinner />
                   </div>

app/[locale]/(user)/publishers/[publisherSlug]/PublisherPageClient.tsx

@@ -34,15 +34,17 @@ const userInfoQuery: any = graphql(`
 `);
 
 const PublisherPageClient = ({ publisherSlug }: { publisherSlug: string }) => {
-  const userInfo: any = useQuery([`${publisherSlug}`], () =>
+  const userInfo: any = useQuery({
+    queryKey: [`${publisherSlug}`],
+    queryFn: () =>
     GraphQL(
       userInfoQuery,
       {
         // Entity Headers if present
       },
       { userId: publisherSlug }
     )
-  );
+  });
 
   const jsonLd = generateJsonLd({
     '@context': 'https://schema.org',
@@ -77,7 +79,7 @@ const PublisherPageClient = ({ publisherSlug }: { publisherSlug: string }) => {
         <div className="container py-10 text-surfaceDefault">
           <div className="flex flex-wrap gap-10 lg:flex-nowrap">
             <div className="w-full lg:w-1/4">
-              {userInfo?.isLoading ? (
+              {userInfo?.isPending ? (
                 <div className="m-4 flex justify-center rounded-2 bg-surfaceDefault p-4">
                   <Spinner color="highlight" />
                 </div>
@@ -86,7 +88,7 @@ const PublisherPageClient = ({ publisherSlug }: { publisherSlug: string }) => {
               )}
             </div>
             <div className="w-full">
-              {userInfo?.isLoading ? (
+              {userInfo?.isPending ? (
                 <div className="m-4 flex justify-center rounded-2 bg-surfaceDefault p-4">
                   <Spinner color="highlight" />
                 </div>

app/[locale]/(user)/publishers/[publisherSlug]/page.tsx

@@ -17,11 +17,12 @@ const userInfo = graphql(`
     }
   }
 `);
-export async function generateMetadata({
-  params,
-}: {
-  params: { publisherSlug: string };
-}): Promise<Metadata> {
+export async function generateMetadata(
+  props: {
+    params: Promise<{ publisherSlug: string }>;
+  }
+): Promise<Metadata> {
+  const params = await props.params;
   const data = await GraphQL(userInfo, {}, { userId: params.publisherSlug });
 
   const user = data.userById;
@@ -53,10 +54,11 @@ export async function generateMetadata({
   });
 }
 
-export default function PublisherPage({
-  params,
-}: {
-  params: { publisherSlug: string };
-}) {
+export default async function PublisherPage(
+  props: {
+    params: Promise<{ publisherSlug: string }>;
+  }
+) {
+  const params = await props.params;
   return <PublisherPageClient publisherSlug={params.publisherSlug} />;
 }

app/[locale]/(user)/publishers/components/Datasets.tsx

@@ -104,9 +104,9 @@ const organizationPublishedDatasetsDoc: any = graphql(`
 const Datasets = ({ type }: { type: 'organization' | 'Publisher' }) => {
   const params = useParams();
 
-  const PublishedDatasetsList: any = useQuery(
-    [`userDataset_${params.publisherSlug}`],
-    () =>
+  const PublishedDatasetsList: any = useQuery({
+    queryKey: [`userDataset_${params.publisherSlug}`],
+    queryFn: () =>
       type === 'organization'
         ? GraphQL(
             organizationPublishedDatasetsDoc,
@@ -122,7 +122,7 @@ const Datasets = ({ type }: { type: 'organization' | 'Publisher' }) => {
             },
             { userId: params.publisherSlug } // ✅ exact match for expected shape
           )
-  );
+  });
 
   const DatasetData =
     type === 'organization'
@@ -136,7 +136,7 @@ const Datasets = ({ type }: { type: 'organization' | 'Publisher' }) => {
           'grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2'
         )}
       >
-        {PublishedDatasetsList.isLoading ? (
+        {PublishedDatasetsList.isPending ? (
           <div className=" flex w-fit justify-center rounded-2 bg-surfaceDefault p-4">
             <Spinner />
           </div>