Apollo 查询失败并出现错误 - TypeError: this.props.getPostInfo is not a function

Posted 2023-03-10

【中文标题】Apollo 查询失败并出现错误 - TypeError: this.props.getPostInfo is not a function

【英文标题】：Apollo query fails with an error - TypeError: this.props.getPostInfo is not a function

【发布时间】：2019-12-16 19:57:27

【问题描述】：

我正在尝试使用Apollo 和React 连接到我的graphql api 端点。为了做到这一点，我有一个组件如下。

import React, Component from 'react'
import GetPostInfoQuery from "./../../../queries/posts"
import  compose, graphql, Query  from "react-apollo";


class PostItem extends Component 

  getCurrentPostInfo =() => 
    this.props.getPostInfo(
            variables: 
                postID: "UG9zdDoy"
            
        )
        .then((loading, data, error) => 
            console.log(data)
        )
        .catch(error => 
            alert(JSON.stringify(error) );
        );

  
  render() 
    return (
      <div>
        <button  onClick=this.getCurrentPostInfo> Load Info </button>
      </div>
    )
  


export default compose(
    graphql(GetPostInfoQuery, 
        name: "getPostInfo"
    )
)(PostItem);

我的GetPostInfoQuery如下图

export const GetPostInfoQuery = gql `
query postInfo($postID: ID!)
   post(id:$postID) 
     id
     title
     content
     headerImage
     createdAt
     user 
       id 
       firstname
       lastname
       locale 
         id
         name
         country
       
     
     tagList 
       edges
         node 
           id
           name
         
       
     
   

`

我将一个变量 - postID 其值为 UG9zdDoy 传递给我的查询，以便它可以被执行并将数据返回给我。当我使用graphiql 接口运行精确查询时，它会毫无问题地返回数据。

当我运行上述代码时，我收到以下错误

这是在graphiql中运行的相同查询

你能告诉我我在这里做错了什么吗？

谢谢

【参考方案1】：

graphql HOC 的行为会有所不同，具体取决于它接收到的是 query 还是 mutation。来自the docs：

[对于查询，] 使用 graphql() 时创建的高阶组件会将数据道具提供给您的组件...数据道具包含从您的查询中获取的数据以及一些其他有用的信息和功能控制 GraphQL 连接组件的生命周期。

当您将突变传递给 graphql() 时创建的高阶组件将为您的组件提供一个名为 mutate 的单一道具。与将查询传递给 graphql() 时获得的数据道具不同，mutate 是一个函数。

换句话说，对于查询，你会得到一个 data 属性，它是一个对象，而对于突变，你会得到一个 mutate 属性，这是一个函数。您正在使用查询，因此您不能像函数一样调用收到的道具，因为它不是函数，如错误所示。

如果您想触发查询以响应某些用户操作，您可以直接在客户端调用query 方法。详情请见withApollo。