Necesito transformar este componente en un componente de clase, ¿cómo puedo reemplazar el gancho 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;Puede usar un componente de orden superior como mencionó Mark y puede lograrlo haciendo un componente como:
const withHook = (Component) => { return WrappedComponent = (props) => { const someHookValue = useSomeHook(); return <Component {...props} someHookValue={someHookValue} />; } }entonces puedes usarlo como:
class Foo extends React.Component { render(){ const { someHookValue } = this.props; return <div>{someHookValue}</div>; } } export default withHook(Foo);Fuente de los fragmentos anteriores.
Si no está interesado en usar apollo clint, puede obtener datos de su servidor normalmente como obtiene cualquier API, usando AXIOS o normal fetch o puede usar la biblioteca graphql-request para hacerlo:
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;https://softchris.github.io/pages/graphql-apollo-client.html#query
Aquí puedes encontrar la respuesta. Aquí hay una forma de hacer una consulta sin useQuery.
Lo probé en mi proyecto, y funciona.