How to consume data from Hygraph using Params – Part 2

You can get data from Hygraph using useEffect and useState. You can follow these steps:

Create a file inside your app folder:

app > (routes) > products > _components > CatDetails.jsx

Include Section

"use client"
import React from 'react'
import GlobalApi from '@/app/_services/GlobalApi';
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import Image from "next/image";

function CatDetails() {
    const params=usePathname();
    const catSlug=params.split('/')[2];
    //console.log(catSlug);
    const [catdata, setcatdata] = useState([]);
    
    useEffect(() => {
        params && getCatData();
      }, [params]); //Initialise the Params in useEffect

      const getCatData = () => {
        GlobalApi.querySingleCat(catSlug).then((resp) => { //Send the Parameters
          setcatdata(resp?.categories);
          //console.log(resp);
        });
      };


  return (

    <div>{
        catdata.map((item,index)=>(
      
            <div key={index} className='pb-5'>

<div className='grid grid-cols-4 gap-4 mt-8'>
        <div className='col-span-1'>
        <Image className='rounded' src={catdata[0].catImage.url} alt={catdata[0].name} width={216} height={216}/>

        </div>
    <div className='col-span-3'>
    <h2 className='font-bold text-[24px]'>{catdata[0].name}</h2>
                <div className=''>{catdata[0].description}</div>
                <h2 className='font-bold pt-3'>Here are {catdata[0].name} curated paintings:</h2>
       </div>
    </div>
            </div>
        ))
        }</div>
  )
}
 
export default CatDetails

Now add your Query in _services > GlobalAPI.js

const querySingleCat =async(category)=>{
  const query = gql `
   query getsinglecat {
  categories(where: {slug: "`+category+`"}) {
    id
    name
    description
    catImage
    {
      url
    }
  }
  
}`
const result = await request(MASTER_URL, query)
return result
}

And don’t forget to export the function

export default {
//Add other function with comma seperated here   
    querySingleCat

}

Usage:

app > (routes) > [category] > page.jsx

Include this Tag for showing the Category details

<CatDetails />

This is how it will look