Is it possible to use Graphql query with React Class component?

Question

I need to transform this component to a class component, how can I replace useQuery hook?

  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;

Answer 1

Solution-1

You can either use a higher-order component as Mark mentioned and you can achieve so by making a component like:

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

then you can use it like:

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

export default withHook(Foo);

Source for the above snippets.

Solution-2

If you're not interested in using apollo clint, you can fetch data from your server normally as you fetch any API, using AXIOS or normal fetch or you can use graphql-request library to do so:

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;

Answer 2

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

Here you can find the answer. Here is a way to make a query without useQuery.

I tried it in my project, and it works.

Answer 3

I faced the same situation. Here is the solution that worked for me:

package.json partial view

"dependencies": {
  "@apollo/client": "^3.6.9",
  "@apollo/react-components": "^4.0.0",
  "@testing-library/jest-dom": "^5.14.1",
  "@testing-library/react": "^11.2.7",
  "@testing-library/user-event": "^12.8.3",
  "graphql": "^16.5.0",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-scripts": "4.0.3",
  "web-vitals": "^1.1.2"
},

BookList component

import React, { Component } from "react";
import { graphql } from "@apollo/client/react/hoc";
import { gql } from "@apollo/client";        
//--------------------------------------------------------`


const GETBOOKS = gql`
  {
    books {
      title
      id
    }
  }
`;

class BookList extends Component {
  displayBooks = () => {
    let data = this.props.data;
    if (data.loading) {
      return <div>Loading Books ...</div>;
    } else {
      return data.books.map((book) => {
        return <li key={book.id}>{book.title}</li>;
      });
    }
  };

  render() {
    console.log(this.props);
    return (
      <div>
        <ul id="book-list">{this.displayBooks()}</ul>
      </div>
    );
  }
}
export default graphql(GETBOOKS)(BookList);
// use grahql to bind getBookQuery to BookList component

for more details see my github repo

https://github.com/danielOuattara/GraphQL_TheNetNinja