【问题标题】：Is it possible to use Graphql query with React Class component?是否可以将 Graphql 查询与 React Class 组件一起使用？
【发布时间】：2022-06-22 00:48:47
【问题描述】：

我需要把这个组件转换成类组件，如何替换useQuery钩子？

  import {useQuery, gql} from "@apollo/client";

const getBooks = gql`
  {
    books {
      name
    }
  }
`;

function BookList() {
  const {data} = useQuery(getBooks);
      
  console.log(data);
  return (
    <div>
      <ul id="book-list">
        {data.books.map(book => (
          <li key={book.id}>{book.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default BookList;

【问题讨论】：

为什么要把它做成类组件？
我正在做一个测试任务来获得一份工作，他们要求只使用类组件和 Graphql @MarkSkelton
你不能在类组件中使用钩子，所以要么你需要做一些不同的事情，要么你可以使用更高阶的组件，但从技术上讲你仍然在使用函数组件。

标签： javascript reactjs react-redux graphql graphql-js

【解决方案1】：

解决方案-1

您可以使用 Mark 提到的高阶组件，您可以通过制作如下组件来实现：

    const withHook = (Component) => {
      return WrappedComponent = (props) => {
        const someHookValue = useSomeHook();
        return <Component {...props} someHookValue={someHookValue} />;
       }
    }

那么你可以像这样使用它：

class Foo extends React.Component {
  render(){
    const { someHookValue } = this.props;
    return <div>{someHookValue}</div>;
  }
}

export default withHook(Foo);

Source 用于上述 sn-ps。

解决方案-2

如果您对使用 apollo clint 不感兴趣，您可以在获取任何 API 时正常从服务器获取数据，使用 AXIOS 或普通 fetch 或者您可以使用 graphql-request 库来执行此操作：

import { request, gql } from 'graphql-request';

const getBooks = gql`
  {
    books {
      name
    }
  }
`;

function BookList() {
  request('https://<server-link>', getBooks).then((data) => (
    <div>
      <ul id="book-list">
        {data.books.map(book => (
          <li key={book.id}>{book.name}</li>
        ))}
      </ul>
    </div>
  ));
      
}

export default BookList;

【讨论】：

【解决方案2】：

https://softchris.github.io/pages/graphql-apollo-client.html#query

在这里你可以找到答案。这是一种不使用 useQuery 进行查询的方法。

我在我的项目中尝试过，效果很好。

【讨论】：