如何从基于类的反应组件中查询 graphql endpint

Question

The Load product is maybe we call it hook whose purpose of the life is fetch the data from a graphql backend

Here its how LOAD_PRODUCT LOOKS LIKE

import { gql } from '@apollo/client'

export const LOAD_PRODUCTS = gql`
    query{
        categories {
            name
            products {
              id,
              name,
              inStock,
              gallery,
              category
            }
          }
    }
`

import React, { Component } from 'react'
import { useQuery,gql } from '@apollo/client'
import { LOAD_PRODUCTS } from '../../graphql/productAction'
export class ProductListing extends Component {

  constructor(){
    super();
    const {error,loading,data} = useQuery()

  }

  render() {
    return (
      <div>ProductListing</div>
    )
  }
}

export default ProductListing

for now i just want to fire the load user hook and save set the data to the different state there must be a method to do this i search on google but nothing help i just cant use fetch method to get the result

Answer 1

You can also query a graphql endpoint using the Query component or the HOC . But note that since class based components are considered legacy those do not receive any updates anymore.

Using the Query component:

import { Query } from '@apollo/client/react/components';

export class ProductListing extends Component {

  render() {
    return (
      <Query query={LOAD_PRODUCTS}>
          {({data}) => <div>Render data here ...</div>}
      </Query>
    )
  }
}

Using the HOC:

import { graphql } from '@apollo/client/react/hoc';

class ProductListing extends Component {

  render() {
    const data = this.props.data;

    return <div>Render data here ...</div>;
  }
}

export default graphql(LOAD_PRODUCTS)(ProductListing);