如何从基于 class 的 React 组件查询 graphql 端点

Question

Load 产品可能我们称之为钩子，其生命目的是从 graphql 后端获取数据

这是LOAD_PRODUCT的样子

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

现在我只想触发加载用户挂钩并将数据设置为不同的状态必须有一种方法可以做到这一点我在 google 上搜索但没有任何帮助我只是不能使用获取方法得到结果

Answer 1

您还可以使用 Query component or the HOC 查询 graphql 端点。但请注意，由于基于 class 的组件被视为遗留组件，因此不再接收任何更新。

使用查询组件：

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

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

如何从基于 class 的 React 组件查询 graphql 端点

How to query graphql endpint from a class based react component

javascript

reactjs

react-hooks