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
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);