阿波罗查询失败，并显示错误-TypeError：this.props.getPostInfo不是函数

Question

我正在尝试将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中运行的同一查询

您能告诉我我在做什么错吗？

谢谢

Answer 1

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

  

[对于查询，]使用graphql（）时创建的高阶组件将向您的组件中馈送数据道具...数据道具除了包含一些其他有用的信息和功能之外，还包含从查询中获取的数据。控制连接GraphQL的组件的生命周期。

     

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

换句话说，对于查询，您将获得data道具，它是一个对象；对于突变，您将获得mutate道具，这是一个函数。您正在使用查询，因此无法像函数一样调用收到的prop，因为它不是函数，如错误指示所示。

如果要响应某些用户操作而触发查询，则可以直接在客户端上调用query方法。有关更多详细信息，请参见withApollo。