[英]Is it possible to use Graphql query with React Class component?
I need to transform this component to a class component, how can I replace useQuery
hook?我需要将此组件转换为类组件,如何替换
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;
You can either use a higher-order component as Mark mentioned and you can achieve so by making a component like:您可以像Mark提到的那样使用高阶组件,您可以通过制作如下组件来实现:
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.以上片段的来源。
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:如果您对使用 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;
https://softchris.github.io/pages/graphql-apollo-client.html#query 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.
下面是一种不使用 useQuery 进行查询的方法。
I tried it in my project, and it works.我在我的项目中尝试过,它有效。
I faced the same situation.我遇到了同样的情况。 Here is the solution that worked for me:
这是对我有用的解决方案:
"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"
},
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
https://github.com/danielOuattara/GraphQL_TheNetNinja https://github.com/danielOuattara/GraphQL_TheNetNinja
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.