如何在react with class组件中获取graphql-api端点数据

Question

所以我有一个本地运行的GRAPHQL服务器，我需要在我的react应用程序中获取数据，我必须用类组件构建该应用程序。我该怎么做？

Answer 1

您将希望使用类似graphql请求的库。如果您使用的是类组件而不是函数组件，那么您将在其中一个生命周期方法中调用请求。您可以将结果设置为状态并从中使用它。

import { request, gql } from 'graphql-request'
const query = gql`
{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}
`
request('https://api.graph.cool/simple/v1/movies', query).then((data) => console.log(data))

Answer 2

import { gql } from "@apollo/client";
export const GET_DATA = gql`
// your data goes here
`
export class App extends Component{
render(){
return(
<Query query={GET_DATA}>
{({ error, loading, data }) => {
if (error) return 'something went wrong';
if (loading) return 'loading...';
if (data) console.log(data)
</Query

)
}
}