нужна помощь qraphql в классовом компоненте react не используя хук useQuery

Делаю запрос в функциональном компоненте с помощью хука useQuery и получаю данные в консоль. Помогите переделать запрос в классовом компоненте.

import { useQuery } from "@apollo/client";
import { GET_CATEGORIES } from "./query/categories";
import React from "react"

 const App=()=> {

 const {data,loading}=useQuery(GET_CATEGORIES)
 const[categories,setCategories]=React.useState([])

 React.useEffect(()=>{
  if(!loading ){
    setCategories(data.categories)
  }
 },[]) 
  if (loading ){
      return <h1>Loading...</h1>
   }
}
  return()

сам запрос из файла GET_CATEGORIES

   export const GET_CATEGORIES= gql `
     query{
    
     categories{
         name
     }
     
 }`

Я пытался переделать в классовом и постоянно ошибки

   class Product extends React.Component{
       constructor(props){
       super(props)
   

      }
        componentDidMount(){
    
       //...
      }
      render(){  
           const { data: { loading, error } } = this.props;
          if (loading) {
            return <p>Loading...</p>;
       }
          if (error) {
           return <p>Error!</p>;
       } 
          return()
      }
      }
   export default Product

Перепробовал много способов которые я не публикую,но без результатно.Caм запрос GET_CATEGORIES куда писать в классовом компоненте?